Foreword
Most industrial machinery bulky, high transport costs, when attending trade shows or sales to overseas customers, if there is no physical display, the mere static, simple graphic presentation instructions not to allow customers to fully understand the product, not only the staff making trouble, see also demanding customers. If you can do 3D display device on the Web, sales staff can not introduce the platform at any time to the customer presentation. Also not realistic conditions, presentation equipment split and assembly process, showing the effect of the internal structure and dynamic functioning, allowing customers more intuitive understanding of the product composition components, more accurate and comprehensive understanding of the features and characteristics of the product, greatly reducing communication costs. To address these industry pain points, this article uses Hightopo of HT for Web products to achieve a 3D visualization engine equipment case.
System Preview
Preview Address: HTML5 WebGL engine based 3D visualization system ( http://www.hightopo.com/demo/engine/ )
Scene set up
Model engine designer by 3ds Max modeling, and then export the obj mtl files, parsing the obj mtl file generating 3D scene model available (refer to the manual obj "in the HT by JSON loading " section), since the individual components required separate operation, so after introducing the device model obj split into multiple files.
2D panel part is by HT vector drawing, we need to create ht.graph.GraphView and ht.graph3d.Graph3dView to render 2D and 3D content. Related code is as follows:
new new ht.graph.GraphView G2D = var (); var = new new ht.graph3d.Graph3dView G3D (); // The 3D body component is added to the g3d.addToDOM (); // The 3D 2D component is added to the root assembly the div g2d.addToDOM (g3d.getView ());
Function to achieve
Equipment dismantling animation
When we click the "expand" button, to each set different animation delay, the animation staggered execution, in order to achieve better visual effects, 2D drawings and 3D scene better linked together.
If we run a constant speed of each animation, it seems inevitable that some monotonous. I then added to different animation Easing different functions, Easing function formula data by way of different curves defined to describe the parameters necessary to change the attribute pattern when the amplitude of each frame callback, to achieve a uniform, slow down after, the first slow after the fast, even before a variety of animation effects beyond the start and end values and then slowly restored. There is also an example that can help us feel more intuitive function of different Easing effect: " the From Easing ."
Central follower member, such as sheets of dismantling the rotary ring enlarged, it sets I Easing.backBoth easing effect, as follows:
// annular animation
animCenter (Data) {
ht.Default.startAnim ({
DURATION: 4500,
// easing function provided
that the easing: Easing.backBoth,
// Animate one second delay
Delay: 1000,
Action: function (V, T) {
// modified primitives scaling value
data.setScale (. 1 + 0.9 * V, * V + 0.9. 1);
// modified primitives rotation angle
data.setRotation (Math.PI V *);
},
});
}
// easing function
Easing.easeOutStrong = function (T) {
var BACK_CONST = 1.70158;
IF ((T * = 2) <. 1) {
return .5 * (T * T * (((BACK_CONST * = (1.525) ) + 1) * t - BACK_CONST ));
}
return .5 * ((t -= 2) * t * (((BACK_CONST *= (1.525)) + 1) * t + BACK_CONST) + 2);
};
Animation dismantling equipment components, is achieved by changing the rotation angle and the coordinates of the nodes, as follows:
// targetP3 coordinates after dismantling, p3 current coordinate
var node.p3 P3 = ();
var offset = [targetP3 [0] - P3 [0], targetP3 [. 1] - P3 [. 1], targetP3 [2 ] - P3 [2]];
// targetR3 rotation angle after dismantling, r3 is the current rotational angle
var node.r3 R3 = ();
var offset = [targetR3 [0] - R3 [0], targetR3 [. 1 ] - R3 [. 1], targetR3 [2] - R3 [2]];
// dismantling animation
ht.Default.startAnim ({
DURATION: 2000,
// easing function provided
that the easing: Easing.easeOutStrong,
Delay: 1000,
Action: function (V, T) {
// change the node coordinate
node.p3 (p3 [0] + offset [0] * v, p3 [1] + offset [1] * v, p3 [2] + offset [2 ] V *);
// change the node rotational angle
node.r3 (r3 [0] + offset [0] * v, r3 [1] + offset [1] * v, r3 [2] + offset [2] * v );
},
});
// easing function
Easing.easeOutStrong = function (T) {
return. 1 - (beginning with --t) * T * T * T;
};
There are panels on either side of the drawing, the effect may be achieved by providing a hidden its cutting direction and cutting ratio, as follows:
// set the cutting elements direction from right to left
node.s ( 'clip.direction', 'left');
// Crop Animation
ht.Default.startAnim ({
DURATION: 1800,
that the easing: Easing.easeOutStrong,
Action: function (V, T) {
// modified primitives clipping ratio
node.s ( 'clip.percentage',. 1 - V);
}
});
// easing function
Easing.easeOutStrong = function (T) {
return. 1 - (beginning with --t) * T * T * T;
};
Animation inner workings of the device
Next we achieve viewing angle different from the device to observe the animation part construction, 3D scene viewing angle is Center (target coordinates) and the eye (camera coordinates) parameters provided by the two Graph3dView determined, so long as the dynamic animation viewing angle changes both parameter, here provided by the HT method moveCamera implementation code is as follows:
g3d.moveCamera([-466, 93, -280], [40, -40, -40], {
duration: 2500,
easing: function (t) {
return 1 - (--t) * t * t * t;
},
});
Small apparatus components adsorbed on the large member, will follow the movement of the rotating member large. Hydraulic rod such that, when we want to realize a small movement of the animation part, if the calculated coordinates modify them with much trouble, so we used a modified way to achieve the anchor, the anchor node affects the position, rotation of the anchor is and scaling center point. Here animation achieved by modifying the Y-axis hydraulic rod anchor effect is as follows:
Related code is as follows:
ht.Default.startAnim ({
DURATION: 800,
Action: function (V, T) {
// modified anchor node Y axis
node.setAnchor3d (0.5, V, 0.5);
},
};
After clicking the button flow, we can see the animation fluid flow in the pipeline. To achieve the effect of flow, first of all we need to map a two continuous side (horizontally or vertically may be seamless texture), then we driven by UV codes shifted to the positive direction of the quadrant of a U-axis, and the infinite loop operation, results are as follows:
code show as below:
ht.Default.startAnim ({
DURATION: 2000,
Action: function (V, T) {
// modify the texture uv value
node.s ( 'shape3d.uv.offset', [V, 0]);
},
};
Animation recovery equipment
Mouse into effect
In order to clearly observe the internal structure of the device through the shell, so that when the mouse hovers over the member, I adjust and set the transparency of the housing model model highlight mode, the relevant code is as follows:
// set the highlight color
ht.Style [ 'highlight.color'] = 'RGBA (255,255,255,0.6)';
// set the current mode highlighted
g3d.setHighlightMode ( 'mouseOver');
// enabled node highlight results
data.s ( 'highlight.visible', to true);
// node is set to interactive
data.s ( 'interactive', true) ;
after turning interactive // node, the default scene does not prevent interactions
data.s ( 'preventDefaultWhenInteractive', to false);
// interactivity event listener
g3d.mi (function (E) {
// mouse events into
IF (e.kind === 'the onEnter') {
// open the node transparent
data.s ( 'shape3d .transparent ', to true);
// set the node transparency
data.s (' shape3d.opacity ', 0.25);
}
// mouse out event
if (e.kind ===' onLeave ') {) {
data.s('shape3d.transparent', false);
}
});
Scenes perspective limit
Finally, we'll do the next limit the scope of the whole scene perspective, the code is as follows:
// set the maximum angle ht.Default.graph3dViewMaxPhi = Math.PI / 2; // set the minimum angle ht.Default.graph3dViewMinPhi = Math.PI / 4;
to sum up
Through case we can feel, compared to the conventional three-dimensional display mode, the device more flexible and more intuitive form of expression dramatic effect, for export-oriented enterprises, lively animation make foreign products more quickly understand how and advantages, but also to avoid errors caused by language misunderstandings. And compared to ordinary industrial animation, visual display systems on the Web richer, more freedom, more flexible subsequent demand for change, at a lower cost.
As used herein, device model designer fictional nuclear engines and more focused on showing the effect of the model, if applied to actual products, can also create a more practical reduction process dismantling equipment, the product line by 3D operation drills, product assembly of staff, split, maintenance training. We are interested can refer to another case " HTML5 + WebGL WebVR 3D virtual reality visualization system based on training ."
Original Address: https://www.cnblogs.com/xhload3d/p/12520693.html