javascript - 如何使用 Three.js 为不同的对象设置动画

Question

我只是想创建一个非常简单的场景，其中有两个不同的移动物体 不同。 但我的球体根本没有动。 当我更改线路时:

 scene.add(obj2)

至:

 obj.add(obj2) 

球体的移动与盒子完全相同

我可以改变什么来让球体旋转？

//set up the scene
const scene = new THREE.Scene();
const renderer = new THREE.WebGLRenderer();
const camera = new THREE.PerspectiveCamera(30, window.innerWidth / window.innerHeight, 0.1, 1000);
const light = new THREE.DirectionalLight();

scene.background = new THREE.Color("white");
renderer.setSize((3 * window.innerWidth) / 4, (3 * window.innerHeight) / 4);
document.body.appendChild(renderer.domElement);
camera.position.z = 17;
light.position.set(-1, 1, 1);

//-----GEOMETRY VARIABLES------//

let box = new THREE.BoxGeometry(1, 1, 1);
let sphere = new THREE.SphereGeometry(0.5, 32, 32);

//-----MATERIAL VARIABLES------//

let phong = new THREE.MeshPhongMaterial({
  color: "pink",
  emissive: 0,
  specular: 0x070707,
  shininess: 100,
});

//-----FUNCTIONALITY------//

//make the objects and add them to the scene
let obj, currentShape, currentMesh, obj2;

currentShape = box;
currentMesh = phong;
obj = new THREE.Mesh(currentShape, currentMesh);
scene.add(light);
scene.add(obj);
obj2 = new THREE.Mesh(sphere, currentMesh);
obj2.position.set(3, 0, 0);

scene.add(obj2);

//methods for making the objects move
let up = true;
function animate() {
  requestAnimationFrame(animate);
  obj.rotation.y += 0.01;
  obj2.rotation.x += 0.02;
  if (up) {
    obj.translateOnAxis(new THREE.Vector3(0, 1, 0).normalize(), 0.1);
    if (obj.position.y > 3.4) {
      up = false;
    }
  } else if (!up) {
    obj.translateOnAxis(new THREE.Vector3(0, 1, 0).normalize(), -0.1);
    if (obj.position.y < -3.4) {
      up = true;
    }
  }

  renderer.render(scene, camera);
}

window.onload = () => {
  document.getElementById("shape-form").onchange = evt => {
    switch (evt.target.value) {
      case "box":
        currentShape = box;
        break;
    }
    obj.geometry = currentShape;
    obj.geometry.buffersNeedUpdate = true;
  };

  document.getElementById("mesh-form").onchange = evt => {
    switch (evt.target.value) {
      case "phong":
        currentMesh = phong;
        break;
    }
    obj.material = currentMesh;
    obj.material.needsUpdate = true;
  };

  animate();
};

Answer 1

很难看到球体旋转:)

这是您的示例的简化版本 - 我使立方体和球体都旋转并以柔和的波浪漂浮。

const renderer = new THREE.WebGLRenderer();
renderer.setSize((3 * window.innerWidth) / 4, (3 * window.innerHeight) / 4);
document.body.appendChild(renderer.domElement);

const scene = new THREE.Scene();
scene.background = new THREE.Color("white");

const camera = new THREE.PerspectiveCamera(30, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 17;


const light = new THREE.DirectionalLight();
light.position.set(-1, 1, 1);
scene.add(light);


const phong = new THREE.MeshPhongMaterial({
  color: "pink",
  emissive: 0,
  specular: 0x070707,
  shininess: 100,
});

const boxGeom = new THREE.BoxGeometry(1, 1, 1);
const boxObj = new THREE.Mesh(boxGeom, phong);
scene.add(boxObj);

const sphereGeom = new THREE.SphereGeometry(0.5, 32, 32);
const sphereObj = new THREE.Mesh(sphereGeom, phong);
scene.add(sphereObj);

function animate() {
  const time = +new Date() / 1000;
  requestAnimationFrame(animate);
  boxObj.rotation.y += 0.01;
  sphereObj.rotation.x += 0.02;
  boxObj.position.x = Math.sin(time * .2) * 3.4;
  sphereObj.position.x = Math.cos(time * .3) * 3.4;
  boxObj.position.y = Math.sin(time) * 3.4;
  sphereObj.position.y = Math.cos(time) * 3.4;
  renderer.render(scene, camera);
}


animate();

<script src="https://threejs.org/build/three.min.js"></script>