I'm trying to figure out how to create a continuous rotation for my FBX model using three.js.
Here's what I've attempted so far:
- Declared my object as a variable
- Called my object in the animate function for rotation (girl1)
However, I encountered an error message:
Error: Cannot read property 'rotation' of undefined.
This is the snippet of my code:
function init() {
...
// zombie girl
let loader_girl = new FBXLoader();
loader_girl.load("ZombiePunching.fbx", (object) => {
// animation mixer
mixer = new THREE.AnimationMixer(object);
const action = mixer.clipAction(object.animations[0]);
action.play();
// make materials opaque
object.traverse((child) => {
if (child.isMesh) {
child.material.transparent = false;
}
});
object.scale.set(0.05, 0.05, 0.05);
object.rotation.x = Math.PI;
scene.add(object);
girl1 = object;
});
...
let loader = new THREE.TextureLoader();
loader.load("smoke.png", function (texture) {
let cloudGeo = new THREE.PlaneBufferGeometry(500, 500);
let cloudMaterial = new THREE.MeshLambertMaterial({
map: texture,
transparent: true,
});
for (let p = 0; p < 25; p++) {
let cloud = new THREE.Mesh(cloudGeo, cloudMaterial);
cloud.position.set(
Math.random() * 800 - 400,
500,
Math.random() * 500 - 450
);
cloud.rotation.x = 1.16;
cloud.rotation.y = -0.12;
cloud.rotation.z = Math.random() * 360;
cloud.material.opacity = 0.6;
cloudParticles.push(cloud);
scene.add(cloud);
}
});
}
function animate() {
cloudParticles.forEach((p) => {
p.rotation.z -= 0.002;
});
rainGeo.vertices.forEach((p) => {
p.velocity -= 0.1 + Math.random() * 0.1;
p.y += p.velocity;
if (p.y < -200) {
p.y = 200;
p.velocity = 0;
}
});
rainGeo.verticesNeedUpdate = true;
rain.rotation.y += 0.002;
girl1.rotation.y += 0.001;
if (Math.random() > 0.93 || flash.power > 100) {
if (flash.power < 100)
flash.position.set(Math.random() * 400, 300 + Math.random() * 200, 100);
flash.power = 50 + Math.random() * 500;
}
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
init();
animate();