What I’m trying to do is basically rotate the meshes in three js the same way they are in blender. Couldn’t really find any good information about this online so sorry if this is a stupid question. Already have the two models loaded. Also, tell me if any additional information is needed to make this easier to understand.
The are multiple ways to solve this issue. Try it by adding the meshes to a group and then rotate the group like so: https://jsfiddle.net/ucgtasx6/
So I tried doing what was in the js fiddle but nothing really happened so what would I change. This is my world.js file btw if that is important.
import { loadKois } from './components/kois/kois.js';
import { createCamera } from './components/camera.js';
import { createLights } from './components/lights.js';
import { createScene } from './components/scene.js';
import { createControls } from './systems/controls.js';
import { createRenderer } from './systems/renderer.js';
import { Resizer } from './systems/Resizer.js';
import { Loop } from './systems/Loop.js';
import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.125.2/build/three.module.js';
let camera;
let controls;
let renderer;
let scene;
let loop;
class World {
constructor(container) {
camera = createCamera();
renderer = createRenderer();
scene = createScene();
loop = new Loop(camera, scene, renderer);
container.append(renderer.domElement);
controls = createControls(camera, renderer.domElement);
const { ambientLight, mainLight } = createLights();
loop.updatables.push(controls);
scene.add(ambientLight, mainLight);
const resizer = new Resizer(container, camera, renderer);
}
async init() {
const { koi1, koi } = await loadKois();
const group = new THREE.Group();
group.add( koi );
group.add( koi1 );
// move the target to the center of the front bird
controls.target.copy(group.position);
loop.updatables.push(koi1, koi);
scene.add(koi1, koi, group);
}
render() {
renderer.render(scene, camera);
group.rotation.y += 0.01;
}
start() {
loop.start();
}
stop() {
loop.stop();
}
}
export { World };