CODEWITHSUNDEEP
javascriptthree.js
Lisalein
Lisalein

Reputation: 51

How to animate objects different with three.js

I just wanted to create a very simple scene with 2 different objects that move differently. But my sphere isnt moving at all. When I change the line:

 scene.add(obj2)

to:

 obj.add(obj2)

the sphere is moving exactly as the box

what can I change to just let the sphere rotate? 

//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();
};

Upvotes: 0

Views: 79

Answers (1)

AKX
AKX

Reputation: 168834

It's just hard to see a sphere rotating :)

Here's a simplified version of your example - I made both the cube and the sphere rotate and float around in gentle waves.

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>

Upvotes: 3

Related Questions