Threejs rotation, particle system, controller operation, etc. (III.)

Preface: The third article of Threejs series, also is one side to learn to summarize;

1, an object rotates around another object

The second article is mainly about object rotation, in order to describe an object around another object, here I describe a lunar orbit around the Earth, and the rotation of the scene;

First, according to the previous tutorial, create two spheres, a small one, and add texture pictures, as the Earth and the moon, and then create a thin ring as the orbit of the planet, (pay attention to adjust the position of the ring, so that the moon's trajectory is just on the ring) here do not do analysis;

The most important part is to add a hinge to the scene

Add a hinge Pivotpoint = new three. Object3d ();p ivotpoint.rotation.x = 0.4;scene.add (pivotpoint);

Note that because the ball rotates around the axis, the ball is added to the shaft, (SPHERESML means small balls) that is:

Pivotpoint.add (SPHERESML);

Then, in the render function, we set the axis to rotate and drive the ball

Setting the initial value in control
This.rotationspeedy = 0.01;

In the Render function
PIVOTPOINT.ROTATION.Y + = Control.rotationspeedy;
Requestanimationframe (render);

Then complete the animation with the Requestanimationframe function

2, granular subsystem

Our background is a starry sky, can create a lot of point particles to complete, the color of the particles is random change

var starsgeometry = new three. Geometry ();  An empty geometry for        (var i = 0; i <-i++) {            //Create a new vertex with random coordinates between-1 and 1            var vertex = new three. Vector3 ();            vertex.x = Math.random () * 2-1;            vertex.y = Math.random () * 2-1;            Vertex.z = Math.random () * 2-1;            Vertex.multiplyscalar ();            StarsGeometry.vertices.push (vertex);        }        var starsmaterial = new three. Particlebasicmaterial ({            color:Math.random () * 0xffffff,            size:2,            sizeattenuation:false        });        var stars = new three. Particlesystem (Starsgeometry, starsmaterial);        Stars.scale.set (a);        Stars.name = ' stars ';        Scene.add (stars);

Add a rotation animation to the star at the same time

Scene.getobjectbyname (' stars '). Rotation.y + = Control.starroitationspeedz;

　3, Trackballcontrols Controller operation

First, we need to use the script tag to introduce the Trackballcontrols.js file

Then add the following code to create a controller instance

Camcontrol = new three. Trackballcontrols (camera);

Then update in the Render function

Camcontrol.update ();

At this time, you can use the mouse to drag, or scroll the mouse wheel, you will see the effect of

Final,: Full code Download: GitHub (Threejs-three) If you think my writing is helpful to you, please give me a star, thank you.

　　

　

Threejs rotation, particle system, controller operation, etc. (III.)