It is created on Cubic Bezier but Please guide me from where to start.
Is there any demos or tutorial for the same >
Cubic bezier is a type of line with multiple control points, as far as I’m aware. For instance, if you want to create an arching line, from point-to-point, you might use a cubic bezier so you can control the curve of the line at different positions, or elevations. What you have here is simply a cube viewed at specific starting angle. The cube rotation is locked to its Z axis and it rotates clockwise, scaling down as it rotates. The tricky part for me is whether the cube is copying itself at regular rotation intervals, while increasing its z.position, or, its using possibly a shader effect to create the trailing lines of the box edges as it scales down during its rotation. I would say the latter is the right approach as the former would create a slew of box clones. Although I can sort of break it down, I’m not sure Im the best to tell you the simplest way to recreate this in ThreeJS.
My rough guess for you, the dirtiest way I can think of, would be to create a loop in the animate function that creates a clone of the box, in its current position, and on a slightly higher z.position than the last box, as it rotates. Since the animation frame is pretty fast it would give you a very similar effect as it would copy a new box on each frame. However, this would be a lot of duplicated geometry just to create a trailing edge effect like that. Maybe someone with a little more know how will answer this. It doesnt look extremely complex, although Im not sure how youre going to get the gradient on the box edges unless you have multiple colored light sources around your scene that light up a custom LineMesh that reflects the color of the lights… its definitely possible.
Maybe a custom function in controls.update in your animate function. Assuming youve already created the cube, it may be as easy as something like:
controls.update(function(){
var cube = scene.getObjectByName( "cube" );
var cubeClone = cube.clone();
scene.add(cubeClone);
cube.scale.set(cubeClone.x-1, cubeClone.y-1, cubeClone.z-1);
cube.rotation.set(cubeClone.rotation.x, cubeClone.rotation.y, cubeClone.rotation.z + .01);
});
1 Like
You can also try to play around with autoClear and preserveDrawingBuffer in the renderer (basically disable cleaning previous frame before painting on a new one.) Mix that with an outline shader and adjust rotation based on scroll position (to have a consistent effect and no “in-betweens”, make sure rotation angle is a divisor of 90° / Math.PI)
Demo of not 100% what you are looking for, but may help you a bit: https://jsfiddle.net/ymhn83x9/1/
From what I see on the GIF, I agree with @D13, that there are many boxes 
Thus, combining InstancedMesh and this approach for box edges, I’ve got this:
7 Likes
Wowsers!!!
1 Like
Oh, Awesome. @prisoner849. You solved my problem.
Thank you.
Thank you @D13. for you valuable response.
Lol, yw. I’m glad you got such quick turn around! If @prisoner849 answers then you are set! Very cool effect!
2 Likes