Hi,
So I created a model in sketchup and exported it to blender as a .dae file. From blender, I added textures and materials and exported it as a .glb file, using Khronos glTF-Blender-IO I was able to successfully export from blender to a glb / gltf file using the export default settings in blender, which I believe exports the materials / textures.
Now I was also able to successfully add the model to the three.js canvas. My issue, however, is that none of the textures / materials seem to be showing up. The model looks material-less and I can’t figure out why.
Just an FYI I am using React JS for this project
Code
My scene has several lights as shown below:
var lights = [];
lights[ 0 ] = new THREE.PointLight( 0xffffff, .4, 0 );
lights[ 1 ] = new THREE.PointLight( 0xffffff, .3, 0 );
lights[ 2 ] = new THREE.PointLight( 0xffffff, .8, 0 );
lights[ 0 ].position.set( 0, 200, 0 );
lights[ 1 ].position.set( 100, 200, 100 );
lights[ 2 ].position.set( - 100, - 200, - 100, 100 );
this.scene.add( lights[ 0 ] );
this.scene.add( lights[ 1 ] );
this.scene.add( lights[ 2 ] );
var ambientLight = new THREE.AmbientLight( 0x916262 );
this.scene.add( ambientLight );
var light = new THREE.HemisphereLight( 0xffffbb, 0x080820, 1 );
this.scene.add( light );
This is my code for the glb loader:
var loader = new GLTFLoader();
loader.load( glb,
object => {
console.log("entered into the stage");
this.treeHead = object.scene;
// this.treeHead.position.y += 30;
this.scene.add(this.treeHead);
this.start()
},
xhr => {console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );},
error => {console.log("Error! ", error);}
);
This is my animate function and my start function
animate = () => {
this.controls.update();
var time = Date.now() * .001;
// this.treeHead.rotation.y += .01;
this.renderScene();
this.frameId = window.requestAnimationFrame(this.animate);
}
start = () => {
// changed orbit controls parameters from just this.camera to both the camera and the renderer dom element
this.controls = new OrbitControls(this.camera);
this.controls.target.set(0, 20, 0);
if (!this.frameId) {
this.frameId = requestAnimationFrame(this.animate)
}
}
Images
My blender View
My three.js View
Your help would be much appreciated!
