After creating a mesh in Blender, I attempted to use it in three.js. Although the file is being loaded according to the event log, all I see is a black screen. How can I ensure that the mesh actually appears on the screen?
import * as THREE from 'three';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
const scene = new THREE.Scene();
const loader = new GLTFLoader();
loader.load(
'scene.glb',
function (gltf) {
scene.add(gltf.scene);
},
function (xhr) {
console.log((xhr.loaded / xhr.total * 100) + '% loaded');
},
function (error) {
console.log('An error occurred');
}
);
const light = new THREE.PointLight(0xffffff, 9, 100, 1.7);
light.position.set(1.53, 2.627, 1.217)
scene.add(light)
const camera = new THREE.PerspectiveCamera(45, 800 / 600)
camera.position.z = 24.327
camera.position.x = -4.288
camera.position.y = 24.327
scene.add(camera)
const canvas = document.querySelector(".webgl")
const renderer = new THREE.WebGL1Renderer({canvas})
renderer.setSize(800, 600)
renderer.render(scene, camera)
While using the three.js editor, I noticed that adjusting the light intensity made my mesh visible. However, when I attempt to do the same in my JavaScript file, the mesh remains invisible. I have also experimented with changing the camera position without success.