I am trying to adjust the properties of a GLB file outside of the loader (I want to be able to animate it later in another function)
Why is this code giving me the error: "Cannot read properties of undefined (reading "scale")"
Something to do with scope I am imagining, but how do I fix this?
let sculpture
const loader = new THREE.GLTFLoader()
const modelFile = require(`./assets/Sculpture_lo5.glb`)
loader.load(modelFile, (gltf) => {
sculpture = gltf.scene
sculpture.scale.set(0.35,0.35,0.35)
scene.add(sculpture)
})
sculpture.scale.z = 1
Related
I am trying to upgrade my Three.js project from 0.126.1 to 0.137.5 however when I now run the project I get the following error.
Exception has occurred: TypeError: Cannot read properties of undefined
(reading 'mergeBufferGeometries')
This is caused by the following method however because this did work I am not sure what to change
import { BufferGeometryUtils } from "three/examples/jsm/utils/BufferGeometryUtils.js";
extractAndMergeOuterMesh(gltf) {
const geometries = [];
gltf.traverse((child) => {
if (child.isMesh && child.name == "polySurface21") {
geometries.push(child.geometry);
}
});
As mentioned in the comments by prisoner849, this was caused due to Three.js changing how it imported BufferGeometryUtils.
The key was the '*"
import * as BufferGeometryUtils from "three/examples/jsm/utils/BufferGeometryUtils.js";
I am using Three.js and I am loading an HDR as an environment map for the scene. Upon loading, I receive this error:
The line in questions is this:
I am assuming that the defined v1 causes an issue in this line because it is not undefined.
I am loading the HDR map like this:
return new Promise((resolve, reject) => {
new RGBELoader()
.setDataType(THREE.HalfFloatType)
.load(
path, // <-- hdr file
(texture) => {
// I tried fromEquirectangular and fromCubemap
// const envMap = this.pmremGenerator.fromEquirectangular(texture).texture;
const envMap = this.pmremGenerator.fromCubemap(texture).texture;
texture.needsUpdate = true;
resolve({ envMap });
},
undefined,
reject
);
});
Does anyone know what is causing this issue in THREE?
const envMap = this.pmremGenerator.fromCubemap(texture).texture;
I doubt this method call is correct. RGBELoader can not load textures in the cube map format. You probably want to use fromEquirectangular(). Before using this method, you need this line in your onLoad() callback:
texture.mapping = THREE.EquirectangularReflectionMapping;
Besides, please check if the usage of PMREMGenerator is actually necessary in your app. In latest releases, three.js internally uses PMREMGenerator to prepare environment maps for the usage with PBR materials.
So I am trying to clone the soldier model from the Three.js examples, because I want more than one later:
https://threejs.org/examples/webgl_animation_skinning_blending.html
I changed line 93 to read:
const loader = new GLTFLoader();
loader.load( 'https://threejs.org/examples/models/gltf/Soldier.glb', function ( gltf ) {
model = gltf.scene.clone();
scene.add( model );
model.traverse( function ( object ) {
if ( object.isMesh ) object.castShadow = true;
} );
But now the soldier is huge.
Why is this happening and is there a fix for it?
Here is a jsfiddle showing the problem:
https://jsfiddle.net/paranoidray/jLpzk374/22/
If you check out the jsfiddle and change line 93 and remove the clone() call.
Everything works again...
Any help would be very much appreciated.
Please clone gltf.scene like so:
model = SkeletonUtils.clone( gltf.scene );
Cloning of skinned meshes is not yet supported in the core. However, you can use SkeletonUtils.clone() to perform this task.
https://jsfiddle.net/yesxrq7g/
I am trying to load some simple keyframe animation (just positions) using the JSON loader.
Using the dev branch r80.
To load the entire scene (made and animated in softimage, exported to FBX, imported into blender, exported using the THREE JSON export script). The file looks good and loads ok.
But when i try to load the animation using:
object.traverse( function ( child ) {
switch(child.name) {
case "dae_scene:helium_balloon_model:helium_balloon_model":
//do anim
console.log(object.animations[0]);
animationClips.balloon1 = object.animations[0]; //
//animationClips.balloon1.weight = 1;
animationMixer = new THREE.AnimationMixer( child );
var sceneAnimation = animationMixer.clipAction(animationClips.balloon1);
sceneAnimation.play();
break;
}
}
it produces:
three.min.js?ver=4.5.4:712 Uncaught Error: cannot parse trackName at all: dae_scene:helium_balloon_model:helium_balloon_model.position
Anyone who can point me in the right direction?
I am trying to load an external model using ObjectLoader. I am using the following code
loader.load( 'teapot.obj', function ( object ) {
globalobject=object;
object.traverse( function ( child ) {
if ( child instanceof THREE.Mesh ) {
child.material.map = texture;
console.log(child);
child.position.x = 3;
child.position.y = -6;
child.position.z = -17;
child.scale.x=.04;
child.scale.y=.04;
child.scale.z=.04;
child.name='tea';
scene.add( child );
}
});
But when I try to access this object in my render method using the following code it shows error
scene.getObjectByName('tea').rotation.z+=.01;
I saw using console that scene.getObjectByName('tea') is undefined
I can use all other standard Mesh objects using the above command but what is the problem with my object loaded using loader?
Can anyone help me to get the way?
If you have multiple childs in one obj file then append some number to differentiate between multiple mesh.
Then this should work:
scene.getObjectByName( "objectName" );
This answer may help