Hi, I’m new to three.js and I’m having this issue with the textures, which are related in a scene.gltf file, the textures won’t load properly at the browser, just like this:
Also checked in the gltf viewer and looks fine:
I’m using these scripts: GTLFLoader.js , three.js, OrbitControls.js
the sketch is Low Poly Car - Chevrolet C10 Pickup 1963 - Download Free 3D model by tedpermana (@tedpermana) [679354c] - Sketchfab
The code I’m trying:
- main.js
let scene, camera, renderer;
function init() {
scene = new THREE.Scene();
scene.background = new THREE.Color(0xCACACA);
camera = new THREE.PerspectiveCamera(40,window.innerWidth / window.innerHeight,1,5000);
camera.rotation.y = 45/180*Math.PI;
camera.position.x = 800;
camera.position.y = 100;
camera.position.z = 1000;
renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.addEventListener('change', renderer);
hlight = new THREE.AmbientLight (0xffffff, 3);
scene.add(hlight);
directionalLight = new THREE.DirectionalLight(0xffffff, 5);
directionalLight.position.set(0,1,0);
directionalLight.castShadow = true;
scene.add(directionalLight);
hemiLight = new THREE.HemisphereLight( 0x0000ff, 0x00ff00, 0.6 );
hemiLight.position.set(100,10,100);
scene.add(hemiLight);
light = new THREE.PointLight(0xffffff,10);
light.position.set(0,300,500);
scene.add(light);
light3 = new THREE.PointLight(0xffffff,8);
light3.position.set(0,10,-50);
scene.add(light3);
let loader = new THREE.GLTFLoader();
loader.load('src/scene.gltf', function ( gltf ) {
car = gltf.scene.children[0];
car.scale.set(1,1,1);
scene.add(gltf.scene);
}, undefined, function ( error ) {
console.error( error );
});
animate();
}
function animate() {
requestAnimationFrame( animate );
renderer.render(scene,camera);
renderer.physicallyCorrectLights = true;
}
function onWindowResize(){
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
window.addEventListener('resize', onWindowResize, false)
init();
- index.html
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8 />
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<script src="src/three.js"></script>
<script src="src/GLTFLoader.js"></script>
<script src="src/OrbitControls.js"></script>
<script src="main.js"></script>
</body>
</html>
Thanks in advance kind souls!