I’ve been learning ThreeJs and boy did I get stuck trying to call my files.
Let me start by explaining what I wanted to do!
i have 3 models to display on a page, as people scroll a different emoji should be displayed, like small sections, classic webapge way.
I imported these models from blender in one gltb file to improve performance, and theorically, save time, two of the objects are groups and the other is a mesh. There’s nothing else in the import.
However after using gltf loader to load my models I can’t find a way to access them to accomodate them in the positions and rotations I want them to be at. Please help.
I loaded my scene:
gltfLoader.load(
'EMOJIS.gltf',
(gltf) =>
{
gltf.scene.scale.set(0.25, 0.25, 0.25)
gltf.scene.position.set(0, 0, 0)
mixer = new THREE.AnimationMixer(gltf.scene)
scene.add(gltf.scene)
}
After that I checked my log to reach for the objects
console.log(scene)
console.log(scene.children)
console.log(scene.children[3])
The first and second log show as follows:
I realized that I should reach the children of the scene’s children to get my 3 emojis: heart, peach, heartEyes.
I thought I could just call scene.children[3].children[0] for example. and call the heart object emoji
But I cant call them? I have tried many ways but it always shows as undefined.
console.log(scene.children) shows an array from 0 to 3, in the [3] slot I can see the emoji elements I want, but calling console.log(scene.children[3]) shows undefined, how can I access the group I want?
Calling
var heart = scene.getObjectByName( "heart", true );
or calling by their ID (which are 16, 15 and 23) shows undefined as well.
All help is very much appreciated.