Being new to ThreeJS, I am seeking help with a basic question. I have loaded multiple GLTF files into my scene and I need to position one object on top of another (but the position should be adjustable later on)
For instance: https://i.sstatic.net/oJq1BIiA.png
Below is the code snippet I am working with:
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
const backgroundColor = new THREE.Color('rgb(67, 177, 232)');
const scene = new THREE.Scene();
scene.background = backgroundColor;
const light = new THREE.AmbientLight(0x222222, 200)
light.position.set(10, 130, 15)
scene.add(light)
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 10000 );
const controls = new OrbitControls( camera, renderer.domElement );
const loader = new GLTFLoader();
// Load in cup
loader.load('assets/models/Cup.glb', (gltf) => {
scene.add(gltf.scene);
}
)
// Load in laptop
loader.load('assets/models/Laptop.glb', (gltf) => {
scene.add(gltf.scene);
}
)
//controls.update() must be called after any manual changes to the camera's transform
camera.position.set(-0.03, 0.859, 1.59);
controls.update();
window.addEventListener('resize', onWindowResize, false)
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight
camera.updateProjectionMatrix()
renderer.setSize(window.innerWidth, window.innerHeight)
// render()
}
function animate() {
requestAnimationFrame(animate );
// required if controls.enableDamping or controls.autoRotate are set to true
controls.update();
renderer.render(scene, camera);
}
renderer.setAnimationLoop(animate)
animate()
I am looking for an official method to place the cup on top of the desk without manually inputting the coordinates. Any suggestions?