Index
HT
provides graphic packages ht.graph3d.Graph3dView
of 3D technology based on WebGL. As a graphic interface based on OpenGL ES 2.0, WebGL
is a underlying graphic API
interface, which is difficult for secondary development. Like other HT
packages, the Graph3dView
package of HT
drives graphic display with the unified HT
DataModel
. It lowers the technological threshold of 3D
graphics development through the encapsulation of WebGL
technology. If familiar with the HT
data model, an average programmer will need only about 1
hour to learn before he can start 3D
graphics development.
At the same time, HT
provides a powerful 3D
graphic model designer based totally on HTML5
technology. Users can set up various visual 3D
scenes quickly without coding. The HT
3D
development mode breaks traditions and frees most applications from modeling by professional 3D
designers proficient in 3ds Max or Maya, or graphic rendering with integrated engines like Unity3d. HT
provides a one-stop plan from modeling to rendering, including 2D
package display and data integration.
WebGL
technology has been supported by most of the latest browsers, caniuse.com/webgl website keeps the latest desktop and mobile browsers supportive for WebGL
.
Use get.webgl.org to detect whether your browser supports WebGL
.
Currently, the PC or mobile versions of Chrome
, Firefox
, Safari
and Opera
have already been able to support WebGL
, for iOS
systems users, please update to iOS8
and above, IE
browsers need to be IE11
and above to support WebGL
, regardless of the type of the browser you choose, we recommend using the latest version.
If you have to use old IE browsers like IE6
, IE7
, IE8
and others, or because of HT for Web 3D
, and the old machine can not be upgraded to IE11
, you can consider the installation
Google Chrome Frame plug-in, in the page embedded in the following Tag
code snippet, the page will be used to render.
<meta http-equiv="X-UA-Compatible" content="chrome=1">
Users of Google Chrome Frame
also need to note:
Google Chrome Frame
does not support opening web pages directly from local file
, you have to deploy the page to the Web
server release mode.
Google Chrome Frame
does not support 64-bit browsers: Currently, 64-bit versions of IE are not supported. It's worth pointing out that 32-bit IE is the default on 64-bit Windows 7.
* Google Chrome Frame
does not support iframe
: At this point ChromeFrame only supports the meta tag detection on top level URLs.. You can use the embedded OBJECT
element as a solution to overcome the problem that Google Chrome Frame
does not support iframe
.
<OBJECT ID="ChromeFrame" WIDTH=500 HEIGHT=500 CODEBASE="http://yourdomain/yourproject/"
CLASSID="CLSID:E0A900DF-9611-4446-86BD-4B1D47E7DB2A">
<PARAM NAME="src" VALUE="http://yourdomain/yourproject/">
<embed ID="ChromeFrameplug-in" WIDTH=500 HEIGHT=500 NAME="ChromeFrame"
SRC="http://yourdomain/yourproject/" TYPE="application/chromeframe">
</embed>
</OBJECT>
Google Chrome Frame
will no longer support or update from January 2014
, the current Google Chrome Frame
is the 31
version. This version has been able to provide the Canvas
function that HT
2D
and 3D
required, so HT
customers can use Google Chrome Frame
to solve the old IE
problem.
Other questions can be found on the Developer Guide
and Troubleshooting
of Google Chrome Frame
.
The 3D coordinate system of HT
consists of three axes: x
, y
and z
, the x
-axis points to the right, the y
-axis to the above, and the z
-axis outside the screen in their positive directions. The rotation of HT
system follows the Right Hand Spiral Rule.
The 3D
coordinate system of Graph3dView
is related to but different from the 2D
coordinate system of GraphView
. The x
-axis of 2D
coordinate system corresponds to the x
-axis of 3D
coordinate system. The y
-axis of 2D
coordinate system corresponds to z
-axis of 3D
coordinate system. The xy
plane of the 2D
coordinate system equals to the xz
plane of the 3D
coordinate system.
For example, Node#getPosition()
returns {x: 100, y: 200}
, it means:
2D
coordinate system, the position on the x
axis is 100
, y
axis 200
3D
coordinate system, the position on the x
axis is 100
, z
axis 200
For example, Node#getSize()
returns {width: 300, height: 400}
, it means:
2D
coordinate system, x
axis length 300
, y
axis length 400
3D
coordinate system, x
axis length 300
, z
axis length 400
The y
-axis of the 3D
coordinate system is a new axis that is not associated with the 2D
coordinate system. The getElevation()
and setElevation(elevation)
functions are added to the ht.Node
to control the y
-axis position of the 3D
coordinate system where the Node's
center is located. The getTall()
and setTall(tall)
functions are added to control the length of the Node
on the y
axis.
In order to avoid the confusion of 2D
and 3D
coordinate systems and for the convenience to set the size of the 3D
data position, HT
adds the following new functions to the ht.Node
data:
setPosition3d(x, y, z)|setPosition3d([x, y, z])
You can set x, y, z
three parameters, or an array of [x, y, z]
getPosition3d()
Returns the [x, y, z]
array value, that is [getPosition().x, getElevation(), getPosition().y]
setSize3d(x, y, z)|setSize3d([x, y, z])
You can set x, y, z
three parameters, or insert into [x, y, z]
arraygetSize3d()
Returns the [x, y, z]
array value, that is, [getWidth(), getTall(), getHeight()]
ht.Node
in the 2D
coordinate system is controlled by the getRotation()
and setRotation(rotation)
functions, which correspond to the negative rotation values along the y
axis in the 3D
coordinate system. At the same time, the 3D
coordinate system adds new rotation variables two new rotationX
and rotationZ
along the x
-axis and z
-axis respectively, as well as the following new functions:
setRotationY(y)
Sets the curvature along the y axis, which equals to setRotation(-y)
getRotationY()
Gets the curvature along the y axis, which equals to -getRotation()
setRotation3d(x, y, z)|setRotation3d([x, y, z])
Can be put in x, y, z
three parameters, or an array of [x, y, z]
getRotation3d()
Returns the [x, y, z]
array value, that is, [getRotationX(), -getRotation(), getRotationZ()]
There is another very important parameter rotationMode
for rotation. This parameter is set by getRotationMode()|setRotationMode('xzy')
. The order of rotation will affect the final effect. This parameter is used to specify the order of rotation. The default value is xzy
, and users can change the rotation sequence mode by setting the following six parameters:
xyz
: First x
-axis rotation, and then y
-axis rotation, and finally z
-axis rotation.xzy
: First x
-axis rotation, and then z
-axis rotation, and finally y
-axis rotation.yxz
: First y
-axis rotation, and then x
-axis rotation, and finally z
-axis rotation.yzx
: First y
-axis rotation, and then z
-axis rotation, and finally the x
-axis rotation.zxy
: First z
-axis rotation, and then x
-axis rotation, and finally the y
-axis rotation.zyx
: First z
-axis rotation, and then y
-axis rotation, and finally the x
-axis rotation.HT
has a lot of shortcuts for commonly used functions, such as getDataModel()|dm()
, getSelectionModel()|sm()
, etc. There are also a lot of convenient shorthand functions for 3D
:
setPosition3d(x, y, z)|setPosition3d([x, y, z])
Referred to briefly as p3(x, y, z)|p3([x, y, z])
getPosition3d()
can be abbreviated as p3()
setSize3d(x, y, z)|setSize3d([x, y, z])
Referred to briefly as s3(x, y, z)|s3([x, y, z])
getSize3d()
can be abbreviated as s3()
setRotation3d(x, y, z)|setRotation3d([x, y, z])
Referred to briefly as r3(x, y, z)|r3([x, y, z])
getRotation3d()
Referred to briefly as r3()
3D Projection is an algorithm mapping points in 3D space to the 2D plane, which is the process of projecting 3D
space objects to 2D
screen coordinates. Different algorithm will eventually produce different display effects of the screen content. HT
supports Perspective Projection and Orthographic Projection, the two most commonly used projection algorithms.
Graph3dView
components use perspective projection by default, and through Graph3dView#setOrtho(true)
it can be switched to orthogonal projection.
A perspective projection is a method of drawing or rendering on a 2D paper or canvas, in order to obtain a visual effect close to the real 3D object, which is also referred to as a perspective view. Perspective makes far objects smaller, close objects larger. Parallel lines will appear to be closer to the actual visual effects like intersecting.
As is shown in the picture above, the perspective projection eventually shows only the frustum part View Frustum onto the screen. The Graph3dView
provides parameters like eye
, center
, up
, far
, near
, fovy
and aspect
to control the specific scope of the frustum body:
getEye()|setEye([x, y, z])
Determines the location of the eye (or Camera
), the default value is [0, 300, 1000]`getCenter()|setCenter([x, y, z])
Determines the location of the target center point (or Target
), the default value is [0, 0, 0]
getUp()|setUp([x, y, z])
Determines the upper direction of the camera, which seldom changes, the default value is [0, 1, 0]
getNear()|setNear(near)
Determines the proximal section position, the default value is 10
getFar()|setFar(far)
Determines the remote section position, the default value is 10000
getFovy()|setFovy(fovy)
Fovy determines the vertical radian of the visual angle, the default value is Math.PI/4
getAspect()|setAspect(aspect)
Determines the aspect ratio of the frustum of the vertebral body. This parameter automatically adjusts according to the aspect ratio of the screen by default.near
and far
can be adjusted according to the actual scene, but it is recommended to let near
and far
closer to each other within an acceptable range. The closer the better, which helps to avoid the accuracy problem of Z-fighting.
Orthogonal projection is also called orthogonal view. In this projection mode, objects look the same in size regardless of the distance. The screen image makes people feel different from what they see. Orthogonal projection is useful in modeling, which provides a more "technical" vision of the scene, making it easy to draw and estimate proportions.
Most parameters in orthogonal projection are the same with Perspective Projection, but there is no fovy
parameter, which is replaced by the orthoWidth
parameter:
isOrtho()|setOrtho(ortho)
Determines whether it is orthogonal projection, the default value is false
getOrthoWidth()|setOrthoWidth(orthoWidth)
Determines the width, that is the distance between left
and right
, the default value is 2000
.HT
provides a variety of basic types of forms for users in modeling. Different from the traditional 3D modeling methods, HT
modeling bases its core on the API
interface. It sets through the HT
pre-defined meta-type and parameter interface to become able to construct a 3D model. The following sections will describe the predefined 3D model types and setup parameters. Please also refer to the Modeling Manual and the OBJ Manual for more customized extension models.
Hexahedron is a cube composed of six faces, which is the most commonly used basic beta type in HT
system. A hexahedron appears by default when building a ht.Node
object. The overall parameters of six faces can be controlled through the all.*
in the style
. For example, if all.color
is set to red
, then the default color of all six faces will turn red. If you need to specifically set a certain face, you can control through the left.*|right.*|top.*|bottom.*|front.*|back.*
face parameter. For example, set left.color
to blue
, then the left side will turn red, if left.color
is not set, then HT
will use all.color
value.
all.light
: The default value is true
, it means whether the six sides will be influenced by light. When influenced, it looks the lightest from the front, and darker from the side.all.visible
: The default value is true
, it means whether the six faces are visible. This parameter does not affect The Attachmentall.color
: The default value is #3498DB
, the color on the six facesall.image
: The default value is undefined
, mapping on all six faces, its priority is higher than all.color
all.blend
: The default value is undefined
, six-side color, priority higher than all.color
. If there is a map, then blend it.all.opacity
: The default value is undefined
, six-side transparency. Value range is 0~1
. Generally, you need to set all.transparent
to true
if there is transparency.all.reverse.flip
: The default value is false
, whether the positive side of the six faces is shown on the negative side.all.reverse.color
: The default value is #868686
, the opposite side color of the six faces, that is the internal color of the cubeall.reverse.cull
: The default value is false
, it controls whether the opposite side is visible, that is, whether the inside of the cube is displayed. Generally it is not displayed for a close cube to improve performance.all.transparent
: The default value is false
, whether the six faces are transparent. If color|image|opacity
attribute appears to be transparent, it needs to be set to be true
generally.all.discard.selectable
: The default value is true
, means that the part with mapping transparency low enough to be rejected can also be clicked to select. It can be set to false
, and then the excluded part is not selectable.By default, mapping will fill the entire picture into the whole face, but in many cases the image needs to be offset from a certain position. Sometimes the tile needs to be tiled in the way Tile
, sometimes the map needs to be flipped, and sometimes the layout of the map needs to be dynamically changed to complete special effects like flow and others. In this case you need to customize UV Mapping, tell HT
how to attach the picture to the face according to the need of customization through uv
parameters:
all.uv.offset
: The default value is undefined
, which determines the uv
offset of the overall map in the format [0.5, 0.5]
, including in horizontal and vertical directions respectivelyall.uv.scale
: The default value is undefined
, which determines the uv
scaling of the overall map in the format [3, 2]
, including horizontal and vertical mapping multipleall.uv
: The default value is undefined
, customized uv
parameters. Here are some customized uv
parameters to meet common requirements for reference [0,0, 0,1, 1,1, 1,0]
90
degrees: [1,0, 0,0, 0,1, 1,1]
90
degrees: [0,1, 1,1, 1,0, 0,0]
180
degrees: [1,1, 1,0, 0,0, 0,1]
180
degrees: [0,1, 0,0, 1,0, 1,1]
[0,1, 0,0, 1,0, 1,1]
[1,0, 1,1, 0,1, 0,0]
The display of 2D graphics of HT
in GraphView
is determined by the shape
attribute of style
. Similarly, HT
provides the shape3d
attribute for 3D
, which pre-defines a variety of 3D
objects. The default value for shape3d
is undefined
, and the beta is shown as a hexahedral graphic as described in the previous section. When shape3d
is set a certain value, it is displayed as specified by shape3d
. The remaining specific parameters are set by shape3d.*
:
shape3d
: The default value is undefined
. When empty, it is displayed as a six-sided cube, the other optional values are:box
: Cube, different from the default hexahedron. This cube type requires six face color and texture to be the same, and higher performance than the default hexahedral.sphere
: Sphere, can be divided into multiple pieces by shape3d.side
. Hemispheres can be formed when combined with shape3d.side.from
and shape3d.side.to
.cone
: Cone, a shape of a triangular pyramid, a quadrangular pyramid, or a shape can be formed by shape3d.side
torus
: Rings that can be divided into multiple pieces by shape3d.side
, semi-rings can be formed when combined with shape3d.side.from
and shape3d.side.to
.cylinder
: Cylinder, you can control the top and bottom parameters through shape3d.top.*
and shape3d.bottom.*
.star
: Star-shape object, you can control the top and bottom parameters through shape3d.top.*
and shape3d.bottom.*
.rect
: Rectangular object, you can control the top and bottom parameters through shape3d.top.*
and shape3d.bottom.*
.roundRect
: Round rectangle, you can control the top and bottom parameters through shape3d.top.*
and shape3d.bottom.*
.triangle
: A triangular object, you can control the top and bottom parameters through shape3d.top.*
and shape3d.bottom.*
.rightTriangle
: Right angle triangular, you can control the top and bottom parameters through shape3d.top.*
and shape3d.bottom.*
.parallelogram
: Parallel quadrilateral object, you can control the top and bottom parameters through shape3d.top.*
and shape3d.bottom.*
.trapezoid
: Trapezoidal object, you can control the top and bottom parameters through shape3d.top.*
and shape3d.bottom.*
.shape3d.color
: The default value is #3498DB
, overall color of the 3d
graphics shape3d.top.color
: The default value is undefined
, top-surface-color of the 3d
graphics shape3d.bottom.color
: The default value is undefined
, bottom-surface-color of the 3d
graphics shape3d.from.color
: The default value is undefined
, starting-surface-color of the 3d
graphics shape3d.to.color
: The default value is undefined
, ending-surface-color of the 3d
graphics shape3d.image
:The default value is undefined
, overall texture of the 3d
graphics shape3d.top.image
: The default value is undefined
, top-surface-texture of the 3d
graphics shape3d.bottom.image
: The default value is undefined
, bottom-surface-texture of the 3d
graphics shape3d.from.image
: The default value is undefined
, starting-surface-texture of the 3d
graphics shape3d.to.image
: The default value is undefined
, ending-surface-texture of the 3d
graphicsshape3d.light
:The default value is true
, whether the graphics are influenced by the lightshape3d.side
: The default value is 0
, number of the sides of the 3d
graphics. The graphic is displayed as a smooth surface when set 0
.shape3d.side.from
: The default value is undefined
, determines the position of the start side of the 3d
graphics.shape3d.side.to
: The default value is undefined
, determines the position of the end side of the 3d
graphics.shape3d.visible
: The default value is true
, whether the graphics is visible. This parameter does not affect label
, note
, icons
and other elements.shape3d.from.visible
: The default value is true
, whether the starting surface of the graphics is visible.shape3d.to.visible
: The default value is true
, whether the ending surface of the graphics is visible.shape3d.top.visible
: The default value is true
, whether the top surface of the graphics is visible.shape3d.bottom.visible
: The default value is true
, whether the bottom surface of the graphics is visible.shape3d.torus.radius
: The default value is 0.17
, determines the radius of the 3d circular tubeshape3d.resolution
: The default value is 24
, determines the accuracy of the3d
graphics, similar to side
but different in directions in terms of the sections they divide. The larger the value is, the better distributed the graphics are, but the more it influences performance.shape3d.blend
: The default value is undefined
, determines dyeing of the 3d
graphicsshape3d.opacity
: The default value is undefined
, determines the transparency of the 3d
graphics, value ranges between 0~1
shape3d.reverse.flip
: The default value is false
, determines whether the front side is shown on the opposite sideshape3d.reverse.color
: #868686
, determines the color of the opposite side of the 3d
graphicsshape3d.reverse.cull
: The default value is false
, determines whether the opposite side is shown. Hiding the opposite side can improve performance.shape3d.transparent
: The default value is false
, determines whether the 3d
graphics is transparent.shape3d.uv.offset
: The default value is undefined
, which determines the uv
offset of the 3d
graphics overall map in the format [0.5, 0.5]
shape3d.uv.scale
: The default value is undefined
, which determines the uv
scaling of the 3d
graphics overall map in the format [3, 2]
shape3d.top.uv.offset
:The default value is undefined
, which determines the uv
offset of the 3d
graphics top-surface map in the format [0.5, 0.5]
shape3d.top.uv.scale
:The default value is undefined
, which determines the uv
scaling of the 3d
graphics top-surface map in the format [3, 2]
shape3d.bottom.uv.offset
:The default value is undefined
, which determines the uv
offset of the 3d
graphics bottom-surface map in the format [0.5, 0.5]
shape3d.bottom.uv.scale
:The default value is undefined
, which determines the uv
scaling of the 3d
graphics bottom-surface map in the format [3, 2]
shape3d.from.uv.offset
:The default value is undefined
, which determines the uv
offset of the 3d
graphics starting-surface map in the format [0.5, 0.5]
shape3d.from.uv.scale
:The default value is undefined
, which determines the uv
scaling of the 3d
graphics starting-surface map in the format [3, 2]
shape3d.to.uv.offset
:The default value is undefined
, which determines the uv
offset of the 3d
graphics ending-surface map in the format [0.5, 0.5]
shape3d.to.uv.scale
:The default value is undefined
, which determines the uv
scaling of the 3d
graphics ending-surface map in the format [3, 2]
shape3d.discard.selectable
: The default value is true
, means that the part with overall texture transparency low enough to be rejected can also be clicked to select. It can be set to false
, then the excluded part is not selectable.shape3d.top. discard.selectable
: The default value is true
, means that the part with top texture transparency low enough to be rejected can also be clicked to select. It can be set to false
, then the excluded part is not selectable.shape3d.bottom. discard.selectable
: The default value is true
, means that the part with bottom texture transparency low enough to be rejected can also be clicked to select. It can be set to false
, then the excluded part is not selectable.shape3d.from. discard.selectable
: The default value is true
, means that the part with starting-surface-texture transparency low enough to be rejected can also be clicked to select. It can be set to false
, then the excluded part is not selectable.shape3d.to. discard.selectable
: The default value is true
, means that the part with ending-surface-texture transparency low enough to be rejected can also be clicked to select. It can be set to false
, then the excluded part is not selectable.HT
can render 3D
text by loading the corresponding typeface
font and specifying the shape3d
type of the node
as text
.
Rendering 3D
fonts needs a json
format typeface font first, for more details please use the website facetype.js to generate, download the generated font (json
format), and load fonts into memory through ht.Default.loadFontFace
.
ht.Default.loadFontFace(url, callback)
url
The address of the typeface
font in json
formatcallback
The optional parameter. If without, it is synchronized loading; if within, it is asynchronously loaded fonts, parameters of which are successfully loaded font namesSpecific control parameters for texts include:
shape3d.text
: The text needed to be displayed. If it needs to set, the text is used first. If not, the name
of the node
is used first, then the label
shape3d.text.amount
: The default value is 0.5
, which determines the relative thickness of the textshape3d.text.size
: The default value is 1
, which determines the magnification factor of the text. Of course it can also be done through the zoom in and zoom out of node
itself (also proposed).shape3d.text.fill
: The default value is true
, which determines whether the graph is solidshape3d.text.curveSegments
: the default value is 4
, which determines the sampling frequency of the curve of the graphics, the greater the finer (pay attention to the balance of performance)shape3d.text.spacing
: The default value is 1
, which determines the size of the space between wordsshape3d.text.font
: Font name, note that it is the familyName
in the json
font file. The first of the loaded font will be used when empty.shape3d.text.style
: The default value is normal
, indicating that the font is normal
(standard), italic
(italic), oblique
(tilted)shape3d.text.weight
: The default value is normal
, indicating that the font is normal
(standard), bold
(bold)ht.Edge
in the GraphView
topology components, as a connection linking nodes, is an important beta type. The display function of 2D connection still exists in the Graph3dView
package. It can also realize the 3D connection effect. At the same time, it also added some connection parameters for 3D
. Connection in the 3D space is displayed in a non-stereo way by default. By setting style
to cylinder
, it can be presented as a tubular with 3D effect. The commonly used parameters to build the connection are the followings:
edge.color
: Connection coloredge.width
: The width of the connectionedge.gradient.color
: Gradual color of the connection, currently available only in the 3D
connection on the non-stereo mode, the target
end will be displayed in this gradual coloredge.source.t3
: Connection source
end offset, [tx, ty, tz]
format, empty by defaultedge.target.t3
: Connection target
end offset, [tx, ty, tz]
format, empty by defaultWhen the edge.type
is the type of points
, the inflection point parameter set to edge.points
is compatible with the JSON
format of the 2D
{x: 100, y: 100}
. The new parameter e
is introduced on the 3D
to represent the elevation of elevation
, so the 3D
supports the inflection point parameter in the format of {x: 10, y: 20, e: 30}
, which represents the position of the x
axis 10
, the y
axis 30
, and the z
axis 20
.
By setting style
to cylinder
, it can be presented as a tubular with 3D effect. Then all the parameters to control the connection are inshape3d.*
. repeat.uv.length
parameter is added with the default parameter being empty. If the length value is set, the texture will automatically adjusts the map multiple in the direction of the connection based on the length of the connection.
Refer to Shape Manual
Refer to Shape Manual.
brightness
: The default is undefined
, as for the 3D
brightness of whole graph, 1 means unchanged, values greater than 1 mean brighter and values less than 1 mean darker.opacity
: The default is undefined
, values vary from 0 to 1 (0~1
)in the 3D
transparency of whole graph.transparent.mask
: The default is false
, this attribute makes graphic data not display on screen but you can still click on and select the data.Text attributes of label.*
in 2D still apply in 3D which also support the second internal label2.*
, meanwhile it added some attribute parameters in accordance with the layout of 3D space and the features of displaying as following:
label.face
: The default is front
, as for the orientation of labels in 3D
, the value list contains left|right|top|bottom|front|back|center
.label.t3
: The default is undefined
, in the matter of labels’ offset in 3D
, the format is [x,y,z]
.label.r3
: The default is undefined
, as for the rotation of labels in 3D
, the format is [rotationX,rotationY,rotationZ]
.label.rotationMode
: The default is xzy
, labels in 3D
rotate along three axis with sequences changes, the value list contains xyz|xzy|yxz|yzx|zxy|zyx
.label.light
: The default is false
, it means whether labels in 3D
are influenced by light. label.blend
: The default is undefined
, it means the coloring of in labels in 3D
.label.opacity
: The default is undefined
, as for the transparency of labels in 3D
, values vary from 0 to 1(0~1
).label.reverse.flip
: The default is false
, it means whether the back side of labels in 3D
show the content of the front side. label.reverse.color
: The default is #868686
, it means the color of back side of labels in 3D
.label.reverse.cull
: The default is false
, it means whether labels in 3D
are showed in the back side, and hiding the back can improve performance. label.transparent
: The default is false
, it means whether labels in 3D
are transparent. label.autorotate
: The default is false
, it means whether labels in 3D
move towards eyes automatically, and the value can be set true
or x
、y
、z
, in which y
represents the rotation is limited along Y-axis.label.texture.scale
: The default is 2
, this value means the multiple that memory actually has created texture, and it is suitable for setting too large or it will affect performance. Refer to Position Guide
The attribute of annotation of note.*
in 2D
also apply in 3D
which also support the second internal note.*
annotation, meanwhile it added some attribute parameters in accordance with the layout of 3D space and the features of displaying as following:
note.face
: The default is front
, as for the orientation of annotation in 3D
, the value list contains left|right|top|bottom|front|back|center
.note.t3
: The default is undefined
, in the matter of annotations’ offset in 3D
, the format is [x,y,z]
.note.r3
: The default is undefined
, as for the rotation of annotations in 3D
, the format is [rotationX,rotationY,rotationZ]
.note.rotationMode
: The default is xzy
, annotations in 3D
rotate along three axis with sequences changes, the value list contains xyz|xzy|yxz|yzx|zxy|zyx
.note.light
: The default is false
, it means whether annotations in 3D
are influenced by light.note.blend
: The default is undefined
, it means the coloring of in annotations in 3D
.note.opacity
: The default is undefined
, as for the transparency of annotations in 3D
, values vary from 0 to 1(0~1
).note.reverse.flip
: The default is false
, it means whether the back side of annotations in 3D
show the content of the front side. note.reverse.color
: The default is #868686
, it means the color of back side of annotations in 3D
.note.reverse.cull
: The default is false
, it means whether annotations in 3D
show in the back side, and hiding the back can improve performance. note.transparent
: The default is false
, it means whether annotations in 3D
are transparent.note.autorotate
: The default is false
, it means whether annotations in 3D
move towards eyes automatically, and the value can be set true
or x
、y
、z
, in which y
represents the rotation is limited along Y-axis.note.texture.scale
: The default is 2
, this value means the multiple that memory actually has created texture and it is suitable for setting too large or it will affect performance. See examples in Position Guide
icons
is a very useful attribute of HT
data extension, and it can be used to add as many icon accessories for data as you want.
The sample codes of icons
content structure are as following:
data.setStyle('icons', {
whateverName1: {
position: 17,
direction: 'north', // east, west, south, north
gap: 1,
names: ['icon1', 'icon2', 'icon3']
},
whateverName2: {
position: 20,
width: 16,
height: 16,
name: ['icon5']
},
whateverName3: ...
]);
icons
can be divided into many groups, and whateverName*
can be understood as the name of a group. This name is not displayed by HT
and not used to present interface results. Users can name and manage it according to their demands.
Setting the icons objects directly will remove the side effects caused by the icons that have been set. For this reason, HT
provides the function of Data#addStyleIcon(name, json)
and Data#removeStyleIcon(name)
so as to control and manage additions and deletions of icons, therefore the above code can be implemented by the code shown below:
data.addStyleIcon('whateverName1', {
position: 17,
direction: 'north', // east, west, south, north
gap: 1,
names: ['icon1', 'icon2', 'icon3']
});
data.addStyleIcon('whateverName2', {
position: 20,
width: 16,
height: 16,
name: ['icon5']
});
From the sample code above, you can find that every group of icons defines icon5
for single icon as well as puts many icons in order, such as ['icon1', 'icon2', 'icon3']
of whateverName1
. Other parameters of json
are related to how to set and display these icons.
The other parameters of json
are associated with how to place and display these icons.
names
: It contains many arrays of strings; for every strings, there is a image or vetor (you can register by ht.Default.setImage
).visible
: It means whether this group of images show. for3d
: It means this group of images can be only used for displaying in the components of Graph3dView
rather than the componets of GraphView
. direction
: Its value is one of the west
、east
、north
、south
, and it sets the arranging direction of icons
; its default is east
.keepOrien
: When you rotate Edge
, icons
will adjust the directions automatically in order to maintain the best reading effects (such as characters); this attribute is true
which means automatical adjustment of directions is forbidden. gap
: It specify the distance between icons in the same group. width
: It specify the width of every icon
, its default width is the one of image first registered.height
: It specify the height of every icon
, its default height is the one of image first registered.face
: The default is front
, as for the orientation of icons in 3D
, the value list contains left|right|top|bottom|front|back|center
.t3
: The default is undefined
, in the matter of icons’ offset in 3D
, the format is [x,y,z]
.r3
: The default is undefined
, as for the rotation of icons in 3D
, the format is [rotationX,rotationY,rotationZ]
.rotationMode
: The default is xzy
, icons in 3D
rotate along three axis with sequences changes, the value list contains xyz|xzy|yxz|yzx|zxy|zyx
.light
: If shape3d
is null, the default will be false
or it will be true
, it means whether icons in 3D
are influenced by light.blend
: The default is undefined
, it means the coloring of in characters in 3D
.opacity
: The default is undefined
, as for the transparency of characters in 3D
, values vary from 0 to 1(0~1
).reverseFlip
: The default is false
, it means whether the back side of characters in 3D
show the content of the front side.reverseColor
: The default is #868686
, it means the color of back side of characters in 3D
.reverseCull
: The default is false
, it means whether characters in 3D
show in the back side, and hiding the back can improve performance. transparent
: The default is false
, it means whether characters in 3D
are transparent.autorotate
: The default is false
, it means whether characters in 3D
move towards eyes automatically.discardSelectable
: The default is true
which means the transparency of texture is so low that the excluded part can be clicked on and selected, otherwise you can set the value of false
.textureScale
The default is 2
, this value means the multiple that memory actually has created texture , and it is suitable for setting too large or it will affect performance.
See examples in Position Guide shape3d
: This attribute specify to display the effects of icon for 3d
model, if you set this attribute , the attributes of names
, width
and height
will be ignored.
See examples in Position Guide position
: It specify the position of icons
, the corresponding positions of enumeration values it supported are as following:
34 35
1 | 2 38 3 39 4 | 5
----6-------40-----7-----41-------8----
9 | 10 42 11 43 12 | 13
| |
| 44 |
14 15 16 45 46 17 47 48 18 19 20
| 49 |
| |
21 | 22 50 23 51 24 | 25
----26------52-----27-----53------28---
29 | 30 54 31 55 32 | 33
36 37
The function of attaching is very convenient for designing hierarchically related mode, for example, device panels attach rack and device ports attach device panels. So it will shape the mode of frame-panel-port attaching, and when users drag the whole frames, all graphical elements of this hierarchy will move accordingly.
In the context of 3D
, the concept of host extends further. When rack shift anywhere in 3D space and rotate by arbitrary angle, all related host graphical elements would pan correctly. They will do some rotation to corresponding location. As a result, all parts of images of the whole device will relatively uniform in location of scenes.
Node#getHost()
and Node#setHost(node)
Used for catching and setting the data objects to attach. Node#getAttaches()
Returns all attached objects of this graphical element and return the objects of ht.List
link lists. If there is no object to attach, the result of returning will be null. If there is no object to attach, the result of returning will be null. Node#isHostOn(node)
Used for judging whether the graphical elements can attach specific objects. Node#isLoopedHostOn(node)
Used for judging whether the graphical elements can attach in a ring with specific graphical elements, for example, A
host B
, B
host C
and C
host A
back, so this is the ring-like attaching among A
, B
and C
. Displaying 3D view of HT
component are ht.graph3d.Graph3dView
, ht.graph3d
is a package related to 3D
components, Graph3dView
is a kind of components for presenting 3D
view.
By analogy with ht.graph.GraphView
as 2D
view components, both GraphView
and Graph3dView
can share the same data model DataModel
. The design of API in 2D
and 3D
, HT
kept consistency in many places.
The DOM
structure, the interface of Graph3dView
, consists of the bottom element div
and renders layer element canvas
. The div
can be gotten by getView()
while the canvas
can be gotten by getCanvas()
. The interactive events of HT
default are added on the bottom element div
, so users can make custom interaction extension through adding ways of events listener on elements returned by getView()
.
Color parameters are flexible in HTML
. They can be the hexadecimal format of #F0F1F2
, string names such as red
and black
, the format of rgb(255,128,32)
or the format rgba(255,128,32,0.5)
that contains transparency. However, in matter of the API interfaces of WebGL
, it is generally required that values of four rgba parameters vary from 0 to 1 (0~1
). So default values of color parameters for Graph3dView
components are formatted in numbers array of [r,g,b,a], but considering compatibility of Data
and 2D
on DataModel
, color parameters will be transformed automatically inside HT
. Therefore, no matter data.s('all.color','red')
or data.s('all.color',[1,0,0,1])
, they all have the same effects.
Lighting, frog and other effects refer to Lighting Guide
In order to provide 3D space coordinate reference, Graph3dView
has prepared real xz
surface grid, three direction axes of x
,y
and z
, and the displaying function of central point position.
All these parameters close the status of not displaying, and you can open the switch and change the displaying parameters of as required.
getGridSize()|setGridSize(40)
Specifies the numbers of rows and columns of grids. getGridGap()|setGridGap(20)
Specifies the spacing of grid lines.getGridColor()|setGridColor([0.4, 0.75, 0.85, 1.0])
Specifies the color of grid lines.isGridVisible()|setGridVisible(true)
Specifies whether grids will be displayed. isOriginAxisVisible()|setOriginAxisVisible(true)
Specifies whether coordinate origin [0,0,0]
grid will be displayed. isCenterAxisVisible()|setCenterAxisVisible(true)
Specifies whether current central point axis will be displayed. getAxisXColor()|setAxisXColor([1.0, 0.0, 0.0, 1.0])
Specifies the color of x
axis. getAxisYColor()|setAxisYColor([0.0, 1.0, 0.0, 1.0])
Specifies the color of y
axis. getAxisZColor()|setAxisZColor([0.0, 0.0, 1.0, 1.0])
Specifies the color of z
axis. There is a big difference of interaction between 3D
and 2D
. It is set default that Graph3dView
provides the rotation along central point of Graph3dView#getCenter()
.
When you operate Drag
in this mode, it will change the location of eye observation points for Graph3dView#getEye()
, mouse wheel and zooming effects of touch screen pinch
. Actually, it will change the position of eye
as well, which make the eye
close to the central position of center
or further away from it. Eventually, the effects of approaching and moving away from something and zooming effects will be achieved.
drag
for rotating along the center, you can click the button of shift
to pan the viewpoint, the mouse wheel can approach and move away from the center. When you click the right mouse button to drag
, the location changes of top and bottom will influence forward and backward moving, and the horizontal position changes will influence horizontal translation.pinch
, you can use three fingers to drag for translation in the way of pan
. Graph3dView
also provide the interactive roaming model of first person; this mode will change the position of eye
and center
at the same time.
You can switch to First person mode by Graph3dView#setFirstPersonMode(true)
, and this mode will produce the results that passengers are walking and cars are travelling:
shift
, and you can pan` the viewpoint, and that means changing the positions both vertically and horizontally. The mouse wheel can adjust the vertical positions.pan
the viewpoint, and that means changing the positions both vertically and horizontally.The parameters of Graph3dView#setMouseRoamable(true|false)
can be set in the mode of first person. The default value is true
. When you set the false
, the mouse will lose the function of moving forward and backward; in this condition, the left mouse button can drag and edit graphic elements and the right mouse button can change the view directions; the above operation will combine with roam operation by using w|s|a|d
buttons on keyboard.
Interaction functions of HT
generally contain parameter anim
that means whether to start animations. This parameter can be simply true|false
type of boolean
, and can be the json
object as well.
When the parameter is the json
object, it means starting the animation. Meanwhile the attributes of the json
object will be applied to control parameters related to animation. You can refer to the sample code snippets as following:
g3d.walk(distance, {
frames: 50,
interval: 30,
easing: function (t) {return t; },
finishFunc: function () {
forwardIndex += 1;
if (points.length - 2 > forwardIndex) {
g3d.setCenter([point2.x, 1600, point2.y]);
setTimeout(function () {
g3d.rotate(Math.PI / 2, 0, {
frames: 30,
interval: 30,
easing: function (t) {return t;},
finishFunc:function () {forward();}
});
}, 60);
} else {
var lastPoint = points[points.length - 1];
g3d.setCenter([lastPoint.x, 1400, lastPoint.y]);
setTimeout(function () {
g3d.rotate(-Math.PI / 2, 0, {
frames: 30,
interval: 30,
finishFunc: function () {
window.isAnimationRunning = false;
}
});
}, 60);
}
}
});
Although the nature of 3D
interaction is to change the position parameters of eye
and center
, direct operation of 3D coordinate points is too raw and obscure.
Graph3dView
gives clearer and more intuitive way for function operating below:
setZoom(increment, anim)
: It is the operation of zooming; the default operation mode means the changes of distance between eye
and center
, and increment
means the proportion of stepping.
Calling zoomIn(anim)
and zoomOut(anim)
equates to call setZoom(1.3, anim)
and setZoom(1/1.3, anim)
.
Under the condition that Graph3dView#isOrtho()
is true
orthographic projection, the zooming means changing the Graph3dView#setOrthoWidth(width)
width of visual scope for Graph3dView#setOrthoWidth(width)
.
pan(dx, dy, anim, firstPersonMode)
: It means the pan of up, down, left and right direction. The nature is that eye
and center
will make the same amount of four directions’ offset; dx
means the parameter of horizontal offset, dy
means the parameter of vertical offset while the dx
and dy
present the moving pixels on screen. Graph3dView
Graph3dView
can convert into proper amount of 3D logical coordinates offset automatically.
When parameters of firstPersonMode
are null, the current value of Graph3dView#isFirstPersonMode()
will be adopted by default.
When first person mode calls the operation of pan
, this function will consider limiting the boundary of Graph3dView#getBoundaries()
.
rotate(leftRight, upDown, anim, firstPersonMode)
: It means that four directions rotate at some angle; leftRight
means horizontal rotation radian while upDown
means vertical rotation radian.
When the parameter of firstPersonMode
is null, the current value of Graph3dView#isFirstPersonMode()
will be adopted by default. This parameter will influence reference standards of rotating movement. When it is not set in the first person mode, rotation takes center
as the center of rotation, that is, rotating around a central object, When the first person rotates, the center of the eye
rotates, that is, the eye turns toward the direction.
walk(step, anim, firstPersonMode)
: This function changes the position of eye
and center
at the same time, that is, eye
and center
move the same offset at the same time in the vector direction established at two points.
step
is the vector length value for the offset. When the number of firstPersonMode
is null, the current value of Graph3dView#isFirstPersonMode()
will be adopted by default, if the walk
operation is called for the first-person mode, the function will consider limiting the boundary of Graph3dView#getBoundaries()
.
reset()
: It is the reset function, calling the function to set the eye
, center
and up
three variables to correspond the original default value of graph3dViewCenter
, graph3dViewEye
and graph3dViewUp
.
By default, the following parameters are in open status; you can use the mouse or keyboard to perform the following interoperability, according to the requirements of the switch settings:
isRotatable()|setRotatable(true)
Controls whether to rotate. isZoomable()|setZoomable(true)
Controls whether to zoom. isPannable()|setPannable(true)
Whether the control can be translatedisWalkable()|setWalkable(true)
Whether the control can advance or retreatisResettable()|setResettable(true)
Controls whether the space key can be resetisRectSelectable()|setRectSelectable(true)
Whether the control can be selectedGraph3dView
Preset a lot of keyboard operation
w
: Go ahead, Press the shift
key at the same time to move ups
: Backward, Press the shift
key at the same time to Backward a
: Left shiftd
: Right shiftctrl
or command
key: Frame selectionspace
space key: Call reset()
resetshift
key: When the shift
keyboard is pressed, the default operation becomes the translation effect of pan
Graph3dView
by default, the moving data move along the xz
plane and change the moving mode when the following keys are pressed:
shift
key, or press x
, y
and z
at the same time, move the xyz
3D spacex
key only, you move along the x-axis.y
key only, you move along the y-axis.z
key only, you move along the z-axis.If you want to change the default implementation in move mode by keyboard, you can apply the function of getMoveMode(event, data)
. The default implementation of the function is as following:
If the style
attribute 3d.move.mode
specified in the final element specifies the value, the keyboard state is no longer taken into account and the setting value is used:
getMoveMode: function (event, data){
var movemode = data.s('3d.move.mode');
if(movemode){
return movemode;
}
var map = ht.Default.getCurrentKeyCodeMap(),
x = '88',
y = '89',
z = '90';
if(event.shiftKey || (map[x] && map[y] && map[z])) return 'xyz';
if(map[x] && map[y]) return 'xy';
if(map[x] && map[z]) return 'xz';
if(map[y] && map[z]) return 'yz';
if(map[x]) return 'x';
if(map[y]) return 'y';
if(map[z]) return 'z';
return 'xz';
},
See it in Adsorption chapter example, and set the code of the move mode to move along the xyz
in 3D space:
g3d.getMoveMode = function (event){
return 'xyz';
};
By default, the data can be dragged along the xz
plane in a 3D scene, or Combine keyboard achieves any movements to any directions in space, but after all this method is not direct and easy to use.
At the same time the data have rotation angle of three axes, the size of the three axis size and other parameters need to control, that is, need to modify the editing function of p3
, s3
and r3
parameters.
For this reason, HT
provides an intuitive solution that, when `Graph3dView#setEditable (true) is in edit state, the last selected data will present the following:
The center of data extends control bar of three axes, and the control bar of each axis has been divided into three parts.
shift
button, and you will change the size of the three axes by same amount and at same time.0
.See filter section to know whether the data are allowed to move, rotate and scale.
You can monitor the process of interaction by Graph3dView#addinteractorListener
:
g3d.addinteractorListener(function (e){
console.log(e.kind);
});
The parameters type of callback events e.kind
are as following:
beginRotate
: It means starting rotation.betweenRotate
: It means between rotation.endRotate
: It means ending rotation.beginWalk
: It means starting walk.betweenWalk
: It means between walk.endWalk
: It means ending walk.beginZoom
: It means starting Zoom.betweenZoom
: It means between Zoom.endZoom
: It means ending Zoom.beginPan
: It means starting pan.betweenPan
: It means between translation.endPan
: It means ending translation.beginPinch
: It means starting double finger pinch.betweenPinch
: It means between double finger pinch.endPinch
: It means ending double finger pinch.toggleNote
: It means double clicking on note
.toggleNote2
: It means double clicking on note2
.clickData
: It means clicking data.clickBackground
: It means clicking background.doubleClickData
: It means double clicking data.doubleClickBackground
: It means double clicking background.beginEditRotation
: It means the edition of data’s rotation angle begins.betweenEditRotation
: It means the edition of data’s rotation angle is on. endEditRotation
: It means the edition of data’s rotation angle ends. beginEditSize
: It means starting to edit the size of data.betweenEditSize
: It means the edition of data’s size is on.endEditSize
: It means the edition of data’s size ends.beginMove
: It means starting to move data.betweenMove
: It means the process of moving data is on.endMove
: It means the process of moving data ends.beginRectSelect
: It means starting to select data in frame.betweenRectSelect
: It means the process of selecting data in frame is on.endRectSelect
: It means the process of selecting data in frame ends.When you click or double-click on the data, in addition to the return event such as e.kind
, the e.part
parameter also provides information about which part of the data should be clicked.
edit_tx
: If it is in the condition of editing, it means the position of [x
] is changing.body
: central part of picturelabel
: text label of datalabel2
: second text label of datanote
: bubble note of datalabel2
: second bubble note of datakey
on icons
: It represents a group of icons.edit_tx
: In the edit state, mark the changing part of the x
axis positionedit_ty
: In the edit state, mark the changing part of the y
axis positionedit_tz
: In the edit state, mark the changing part of the z
axis positionedit_rx
: In the edit state, mark the changing part of the rotation of the x
axisedit_ry
: In the edit state, mark the changing part of the rotation of the y
axisedit_rz
: In the edit state, mark the changing part of rotation of the z
axisedit_sx
: In the edit state, mark the size changes in the x
axis edit_sy
: In the edit state, mark the size changes in the y
axis edit_sz
: In the edit state, mark the size changes in the z
axisHT
not only provide first person roaming interactive mode, but also supports the detection the collision with any blocks like wall in the roaming process. This collision detection can limit the allowed scope of first person roaming. Roaming generally operates along the xz
plane, so HT
provides the multi-lines to define the xz
plane in order to describe the roaming boundary that can not go beyond.
The boundary of collision can be specified by Graph3dView#setBoundaries(boundaries)
, the format of boundaries
are following:
g3d.setBoundaries([
[
p0.x, p0.y,
p1.x, p1.y,
p2.x, p2.y,
p3.x, p3.y
],
[
p4.x, p4.y,
p5.x, p5.y,
p6.x, p6.y
]
]);
The above code sets two polylines p0-p1-p2-p3
and p4-p5-p6
, array describe all endpoints in each polyline, and the first and second element means the x, z
coordinates of start point. The following are the x, z
coordinates of the second, third and other endpoints; you can understand that the MoveTo
goes to the first endpoint and then LineTo
the shape of other endpoints.
The following sample code apply the function of ht.Default.toBoundaries(data.getPoints(), data.getSegments())
. This function can convert discontinuous curves into differential straight lines segments. The code uses GraphView#addTopPainter
, the position orientation information of eye
and center
in 3D
are real-time rendered in 2D
so as to intuitively understand the position and orientation of the current first person.
The data in Graph3dView
selected are displayed in a darker status, and the dark coefficient is determined by the attributes of brightness
, select.brightness
and the style
. The default attribute value of select.brightness
default value is 0.7
, the final return value is more than 1
with brighter result, less than 1
with darker result, equal to 1
without any changes or null result.
Graph3dView#getBrightness
function controls the final brightness of data, so you can also override the brightness of data that is selected by this function in user-defined manners, the following is the default logic:
getBrightness: function (data){
var brightness = data.s('brightness'),
selectBrightness = this.isSelected(data) ? data.s('select.brightness') : null;
if(brightness == null){
return selectBrightness;
}
if(selectBrightness == null){
return brightness;
}
return brightness * selectBrightness;
},
Graph3dView#getWireframe
function is used to define the result of 3D wire frame for data; the default implementation code is as follows.
Through the code, we can know that the result of displaying the selected wire frame by controlling the related wf.*
(wf
is the abbreviation of wireframe
).
getWireframe: function (data){
var visible = data.s('wf.visible');
if(visible === true || (visible === 'selected' && this.isSelected(data))){
return {
color: data.s('wf.color'),
width: data.s('wf.width'),
short: data.s('wf.short'),
mat: data.s('wf.mat')
};
}
},
wf.visible
: The default is false
which represents not displaying; it can be set in selected
value, which means displaying when selected; the true
value represents displaying the wire frame all the time.wf.color
: It means the color of wireframe.wf.short
: The default value is false
which represents displaying the closed 3D wire frame, and when set the true
value, an unclosed short wire frame will be displayed.wf.width
: It means the width of the wireframe, and the default value is 1
. Some systems just show the effect of 1
, the biggest value that different systems can display has restrictions. wf.mat
: The default value is null, The transformation matrix can be constructed by ht.Default.createMatrix
. Refer to examples in Unboxing instanceBy default, all data can be selected and users cancel the function of being selected of some data by setting the selection of filters,
The final control that decides whether to be selected is in the filterFunc
filter on SelectionModel
model by reloading the isSelectable
function of the GraphView
, or calling the packaged function control of GraphView.setSelectableFunc(func)
. The sample code is as follows:
graph3dView.setSelectableFunc(function (data){
return data.a('selectable');
});
In default situation, data are visible, and users can set the visible filters to hide part of data, the sample code is as follows:
graph3dView.setVisibleFunc(function (data){
return data.s('all.transparent') === true;
});
The example code logic is to only display the data which all.transparent
is true
. The Graph3dView#isVisible
function ultimately determines whether the metafile is visible, so you can also override the function:
graph3dView.isVisible = function (data){
return data.s('all.transparent') === true;
};
By default, all data can move, users can fix part of data by setting movable filter, and the sample code is as follows:
graph3dView.setMovableFunc(function (data){
return movableItem.selected;
});
The sample code logic is when the selected
of movableItem's
selected
is true
, the data can move.
Graph3dView#isMovable
function ultimately determines whether the data can moved, so you can also override the function:
graph3dView.isMovable = function (data){
return movableItem.selected;
};
When Graph3dView#setEditable(true)
is set to be editable, the selected data can rotate by default. The following code can be used to prohibit part of data to rotate:
graph3dView.setRotationEditableFunc(function (data){
return data instanceof ht.Shape;
});
The logic of the above code is that only data of the ht.Shape
type are allowed to rotate. Graph3dView#isRotationEditable
function ultimately determines whether the data can be rotated, so you can also override the function:
graph3dView.isRotationEditable: function (data){
return data instanceof ht.Shape;
},
When Graph3dView#setEditable(true)
is set to be editable, the selected data can rotate by default. The following code can be used to prohibit part of data to rotate:
graph3dView.setSizeEditableFunc(function (data){
return data instanceof ht.Shape;
});
The logic of the above code is that only data of the ht.Shape
type are allowed to change the size. Graph3dView#isSizeEditable
function ultimately determines whether the entity can be resized, so you can also override the function:
graph3dView.isSizeEditable: function (data){
return data instanceof ht.Shape;
},
In addition to setting the filter on the view components, the internal filtering mechanism for GraphView
and Graph3dView
also refers to the following style
attributes, users can directly change the following style
to achieve the result of controlling single data:
2d.visible
: The default value is true
, which controls whether the data are visible on GraphView
.2d.selectable
: The default value is true
, which controls whether the data can be selected on GraphView
.2d.movable
: The default value is true
, which controls whether the data can move on GraphView
.2d.editable
: The default value is true
, which controls whether the data can be edited on GraphView
2d.move.mode
: The default value is null, which controls the movement scope for data, it can be set as the following parameters:xy
: It can move on the xy
plane.x
: It can rotate only along the x
axis.y
: It can rotate only along the y
axis.3d.visible
: The default value is true
, which controls whether the data are visible on Graph3dView
.3d.selectable
: The default value is true
, which controls whether the data can be selected on on Graph3dView
.3d.movable
: The default value is true
, which controls whether the data can move on Graph3dView
.3d.editable
: The default value is true
, which controls whether the data can be edited on Graph3dView
.3d.move.mode
: The default value is null, and you can refer to Keyboard Operation. In order to control movement scope of data, it can be set as the following parameters:xyz
: It means movements only in 3D space.xy
: It means movements only on xy
plane.xz
: It means movements only on xz
plane. yz
: It means movements only on yz
plane.x
: It means movements only along x
axis.y
: It means movements only along y
axis.z
: It means movements only along z
axis.showDebugTip
: It shows the Draw Calls, the vertices, the number of faces and lines of current scene.hideDebugTip
: It means turn off the displaying of debug information.toCanvas(background)
: It means exporting the contents of the current view into a Canvas
component, and background
as the background colortoDataURL(background)
: It means exporting the contents of the current view of the base64 as string image content, and background
as the background color.Export some snippets of examples:
{
label: 'Export Image',
action: function (){
var w = window.open();
w.document.open();
w.document.write("<img src='" + g3d.toDataURL(g3d.getView().style.background) + "'/>");
w.document.close();
}
}