hey there,
still working on my ELOCKI-Thing and i did a lot. At the moment i got a problem with rotation and i read a lot (beginnerstutorial, issues) but i did not get the point. I think i do not rotate my elocki properly…it seems to do something with the camera. i can go left and right but when i rotate it (with backspace or arrow-up) the scene is completly de-arranged.
So…do you have a hint for me.
(you can see a lot in the video and the part in the script)
here is the part of the init
// model
const modelSqu = new THREE.Object3D();
new GLTFLoader()
.setPath(‘models/gltf/’)
.load(‘EGCArena.gltf’, function (gltf) {
const box = new THREE.Box3().setFromObject(gltf.scene);
//const box = new THREE.Box3().setFromObject(gltf.scene);
// three.js docs
const boxHelper = new THREE.Box3Helper(box, 0xffff00);
scene.add(boxHelper); // see original position of model.gltf, not centered
const c = box.getCenter(new THREE.Vector3());
const size = box.getSize(new THREE.Vector3());
// center the gltf scene - important for modelSqu.rotation.y = t in function animate
//gltf.scene.position.set(-c.x, size.y / 2 - c.y, -c.z); // put // in front of this line, try it out
gltf.scene.position.set(-c.x, size.y / 2 - c.y, -c.z); // put // in front of this line, try it out
modelSqu.add(gltf.scene); // this gltf.scene is centered
//modelLh.scale.set(2, 2, 2); // because gltf.scene is big
modelSqu.position.set(0, 0, initialMoveZ);
scene.add(modelSqu);
//const object = gltf.scene.getObjectByName( 'SheenChair_fabric' );
const gui = new GUI();
//gui.add( object.material, 'sheen', 0, 1 );
gui.open();
});
//elocki
egcElocki = new egcElockiType();
egcElocki.scale.set(1, 1, 1);
egcElocki.position.set(0, 3, initialMoveZ);
scene.add(egcElocki);
console.log(egcElocki.position);
const box = new THREE.Box3().setFromObject(egcElocki);
//const box = new THREE.Box3().setFromObject(gltf.scene);
// https://threejs.org/docs/index.html#api/en/helpers/Box3Helper
const boxHelper = new THREE.Box3Helper(box, 0xffff00);
scene.add(boxHelper); // see original position of model.gltf, not centered
const c = box.getCenter(new THREE.Vector3());
const size = box.getSize(new THREE.Vector3());
and here are the orbit:
controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.minDistance = 1;
controls.maxDistance = 10;
controls.target.set(0, 0.35, 0);
controls.update();
window.addEventListener('resize', onWindowResize);
just to say : i build the table in theejs-editor and import it.
THANKS for your help (without that i could not continue!)
.