Offer to come, dig friends take it! I am participating in the 2022 Spring Recruit Punch card activity. Click here for details.

The sample code uses version three.js-R73: github.com/mrdoob/thre…

We saw in the last video that rotating around the XYZ axis, that the center of a rotating object happens to be the center of rotation. In this video we’re going to do more complicated rotations, so let’s look at that. This section of the code is based on “methods and skills of object rotation 1” code.

It’s rotating around the Y axis around some point

  • Solution: Nest the cube into another group object, then rotate the group object.

  • We create a group, add objects to the group, add groups to the scene

// Create a group inherited from Object3D
group = new THREE.Group() // new THREE.Object3D
group.add(mesh);
scene.add(group)
Copy the code
  • And then I rotate the group around the Y-axis
group.rotateY(0.01);
Copy the code
  • At this point the object is still rotating around the center.

  • Stop the rotation of the group and move the mesh
  mesh.translateX(-50) // Move 50 to the left
  mesh.translateZ(50) // Move 50 out of the screen
Copy the code

  • We can see that the cube has been shifted, but the center of the group is still on the green axis, so the rotation is as follows

  • The geometry looks like it’s already rotating around a point, but the center of the geometry was rejoined with the green axis, so we need to move the group
  group.translateX(50); // Move 50 to the right
  group.translateZ(-50); // Move 50 into the screen
Copy the code
  • At this point, the center of the group is in the following position

  • We move the geometry back to its original position, and then let the group rotate

  • So our geometry looks like it’s rotating around the Y-axis at some point.

​

Codepen sample code

It rotates in any direction

  • We’re throughrotateOnAxisMethod can be used to rotate around any direction
var angle = 0.01;
function update() {
  var v1 = new THREE.Vector3(1.1.0)
  mesh.rotateOnAxis(v1,angle)
  stats.update();
  controls.update();
}
Copy the code

Codepen sample code

One object revolves around another (e.g. the rotation of the solar system)

  • We need to create two objects, a sphere and a geometry to simulate
  • Place the sphere at the scene (0, 0, 0) and the geometry at the scene (-200, 0, 0)
  • Add geometry to the ball and make it rotate
 var cube;
 var mesh;
 var group;
 var sphere;
// Initialize the object
function initObject() {
  var geometry = new THREE.BoxGeometry(100.100.100);
  // Assign random colors to the faces of the cube
  for (var i = 0; i < geometry.faces.length; i += 2) {
    var hex = Math.random() * 0xffffff;
    // The adjacent faces are of the same color
    geometry.faces[i].color.setHex(hex);
    geometry.faces[i + 1].color.setHex(hex);
  }

  var material = new THREE.MeshBasicMaterial({
    vertexColors: THREE.FaceColors,
  });
  mesh = new THREE.Mesh(geometry, material);
  // mesh.position = new THREE.Vector3(0, 0, 0);
  // scene.add(mesh);
  mesh.position.set(-200.0.0)

  var geometry = new THREE.SphereGeometry(60.100.100);
  var material = new THREE.MeshBasicMaterial({ color: 0xffff00 });
  sphere = new THREE.Mesh(geometry, material);

  sphere.add(mesh);

  scene.add(sphere);
}
Copy the code
function render() {
    sphere.rotateY(0.01);
    renderer.render(scene, camera);
}
Copy the code
  • Results the following

Codepen sample code