Hi, I’m new to three.js. I tried to load a model using gltfLoader but nothing appears on the screen, the scene was created successfully, there is no error message but the cube does not appear. I also tried adjusting the camera position to be too far and too close but it didn’t work. Here’s the code:
const loader = new GLTFLoader();
loader.load( ‘/3dmod/mine.glb’, function ( gltf ) {
scene.add( gltf.scene );
}, undefined, function ( error ) {
console.error( error );
} );
Here’s a file where it works,
//import './style.css';
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({
canvas: document.querySelector('#background_canvas'),
});
THREE.ColorManagement.enabled = true;
//renderer.setClearColor(color, opacity);
renderer.setClearColor(new THREE.Color("rgb(100, 100, 100)"), 0.2);
//renderer.setClearColor(new THREE.Color("rgb(118, 165, 175)", 1.0));
//renderer.setClearColorHex( 0xffffff, 1 );
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
//const axesHelper = new THREE.AxesHelper( 5 );
//scene.add( axesHelper );
//The X axis is red. The Y axis is green. The Z axis is blue.
camera.position.setX(3);
camera.position.setY(3);
camera.position.setZ(-2);
//const loader = new GLTFLoader();
//Absolute Path C:\Users\HP\Desktop\apps-threeJSImport\vite-project\dice_v2_seperateFaces_backup.glb
//Relative Path of custom object vite-project/dice_v2_seperateFaces_backup.glb
// Relative path of main.JS vite-project/main.js
//loader.load( './dice_v2_seperateFaces_backup.glb', function ( glb ) {
//const loader = new GLTFLoader().setPath('dice_v2_seperateFaces_backup.glb');
const loader = new GLTFLoader();
let loadedModel;
//vite-project\Dice
//
//vite-project\main.js
//C:\Users\HP\Desktop\apps-threeJSImport_backup\vite-project\main.js
loader.load( './dice_v2_seperateFaces_backup.glb', function ( glb ) {
loadedModel = glb;
glb.castShadow = true;
scene.add( glb.scene );
glb.scene.traverse(obj => {
if (obj.isMesh) {
console.log(obj.geometry);
console.log(obj.name);
console.log(obj.id);
console.log("----------------");
}
});
}, undefined, function ( error ) {
console.error( error );
} );
//const cylinderGeometry = new THREE.CylinderGeometry(15, 15, 15, 7, 5, false);
//we changed from MeshBasicMaterial that does NOT require a lightsource to MeshStandardMaterial, that does.
//const material = new THREE.MeshStandardMaterial({color: 0xffffff, wireframe: false});
//const meshedSelector = new THREE.Mesh(cylinderGeometry, material);
//You have used MeshBasicMaterial for your plane mesh which is a unlit material. So it does not receive shadows.
//Using a lit material like MeshStandardMaterial solves the issue.
const boxGeometry = new THREE.BoxGeometry(10,0.2,10);
const boxMaterial = new THREE.MeshStandardMaterial({color: 0x000082});
const box = new THREE.Mesh(boxGeometry, boxMaterial);
box.position.set(0, -4, 0);
box.receiveShadow = true
scene.add(box);
// const planeGeometry = new THREE.PlaneGeometry(30,30);
// const planeMaterial = new THREE.MeshBasicMaterial({color: 0x0000ff});
// const plane = new THREE.Mesh(planeGeometry, planeMaterial);
// plane.position.set(25,15,10);
// scene.add(plane);
// var geo = new THREE.PlaneBufferGeometry(2000, 2000, 8, 8);
// var mat = new THREE.MeshBasicMaterial({ color: 0x000000, side: THREE.DoubleSide });
// var plane = new THREE.Mesh(geo, mat);
// plane.rotateX( - Math.PI / 2);
// scene.add(plane);
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
//const lightHelper1 = new THREE.DirectionalLightHelper(directionalLight);
directionalLight.position.set(25,25,25);
directionalLight.lookAt(0,0,0);
directionalLight.castShadow = true;
//scene.add(directionalLight,lightHelper1);
scene.add(directionalLight);
//hemisphere light is functional - this one has rose colored light like in the eavening
// It makes the metallic polyhedron have a rosy hue - more of a brown.
const hemiLight = new THREE.HemisphereLight("rgb(255,204,204)", 0.5);
//const lightHelper2 = new THREE.HemisphereLightHelper(hemiLight);
hemiLight.position.set(35,25,10);
hemiLight.castShadow = true;
hemiLight.lookAt(0,0,0);
//scene.add(hemiLight, lightHelper2);
scene.add(hemiLight);
// //hemisphere light is functional - this one has white light
// const hemiLight = new THREE.HemisphereLight(0xffffff, 0.5);
// //const lightHelper2 = new THREE.HemisphereLightHelper(hemiLight);
// hemiLight.position.set(35,25,10);
// hemiLight.lookAt(0,0,0);
// //scene.add(hemiLight, lightHelper2);
// scene.add(hemiLight);
//Spotlight is functional
const spotLight = new THREE.SpotLight(0xffffff, 3, 100, 0.2, 0.5);
spotLight.position.set(25,15,10);
spotLight.lookAt(0,0,0);
spotLight.castShadow = true;
//const lightHelper3 = new THREE.SpotLightHelper(spotLight);
//scene.add(spotLight, lightHelper3);
scene.add(spotLight);
//Spotlight is functional
const spotLightOnFace1 = new THREE.SpotLight(0xffffff, 3, 100, 0.2, 0.5);
spotLightOnFace1.position.set(-5,-5,-5);
spotLightOnFace1.castShadow = true;
spotLightOnFace1.lookAt(0,0,0);
//const lightHelper4 = new THREE.SpotLightHelper(spotLightOnFace1);
//scene.add(spotLightOnFace1, lightHelper4);
scene.add(spotLight);
//Spotlight is functional
const spotLight2 = new THREE.SpotLight(0xffffff, 3, 100, 0.2, 0.5);
spotLight2.position.set(2,5,2);
spotLight2.castShadow = true;
spotLight2.lookAt(0,0,0);
spotLight2.castShadow = true;
//const lightHelper4 = new THREE.SpotLightHelper(spotLightOnFace1);
//scene.add(spotLightOnFace1, lightHelper4);
scene.add(spotLight2);
const pointLight_face1 = new THREE.PointLight( 0x0000ff, 1, 100);
pointLight_face1.position.set(0,-1, -1);
pointLight_face1.lookAt(0,0,0);
//const lightHelper5 = new THREE.PointLightHelper(pointLight_face1);
//scene.add(pointLight_face1, lightHelper5);
scene.add(pointLight_face1);
const pointLight_face9 = new THREE.PointLight( 0x0000ff, 1, 100);
pointLight_face9.position.set(0,1,1);
pointLight_face9.lookAt(0,0,0);
//const lightHelper6 = new THREE.PointLightHelper(pointLight_face9);
//scene.add(pointLight_face9, lightHelper6);
scene.add(pointLight_face9);
//This listens to dom events on the mouse and updates the screen accordingly
const controls = new OrbitControls(camera, renderer.domElement);
function animate() {
requestAnimationFrame(animate);
loadedModel.scene.rotation.x += 0.01;
loadedModel.scene.rotation.y += 0.005;
//loadedModel.scene.roation.z += 0.01;
//https://stackoverflow.com/questions/47589370/three-js-unable-to-access-imported-object-property-outside-loader-load
//parent.position.x = ....
]
controls.update();
renderer.render(scene, camera);
}
animate();
Note this
I used a .glb file. I can see it loading in the browser by using (CTL+shift+J in windows when the browser pops up).
check if using relative path ./ means on current index.html directory, / without . sometimes fail.
change object scale, perhaps its very big or small.
obj.scale.multiplyScalar(0.10) → 10% of size
obj.scale.multiplyScalar(1.10) → 110% of size
adjust camera to position (0,0,100) or (0,0,-100) and target (0,0,0);
