materialOrginal.glb (209.4 KB)
Hey maybe My question is weird but I am new in Three js, and I need some assistance and will be grateful to get some help, I want to apply the image texture to the loaded glb file but the texture is not applying or applying partially , I’ve provided an image for the texture,glb and the screenshot how it looks in canvas
import { useEffect } from ‘react’;
import { GLTFLoader } from ‘three/examples/jsm/loaders/GLTFLoader’
import * as THREE from ‘three’;
import SceneInit from ‘./lib/SceneInit’;
function App() {
useEffect(() => {
const textureLoader = new THREE.TextureLoader();
let loader = new GLTFLoader();
let material = null;
let root = null;
const texture = textureLoader.load(‘/assets/stone.png’);
texture.wrapS = THREE.RepeatWrapping
texture.wrapT = THREE.RepeatWrapping
texture.magFilter = THREE.LinearFilter
texture.flipY = false
texture.needsUpdate = true
texture.encoding = THREE.sRGBEncoding;
material = new THREE.MeshStandardMaterial({
map: texture,
toneMapped: false,
});
material.side = THREE.DoubleSide;
const test = new SceneInit(‘myThreeJsCanvas’);
//lighting
const al = new THREE.AmbientLight(0xffffff,0.8)
const dl = new THREE.DirectionalLight(0xffffff,0.8)
dl.position.set(0,2,0)
test.initialize();
test.animate();
loader.load('/assets/materialOrginal.glb', function (glb) {
root = glb.scene;
root.traverse((child, key) => {
if (child.isMesh) {
if (child.name.includes('pol')) {
child.material = material
// child.material.color.setHex(0x00ff00)
}
}
})
root.scale.set(1, 1, 1)
});
setTimeout(() => {
test.scene.add(root);
test.scene.add(al);
test.scene.add(dl);
}, 2000);
}, );
return (
);
}
export default App;
