After mastering the ins and outs of three.js, I've encountered a roadblock. Despite successfully uploading my model to the server, it refuses to appear in the three.js window. Adding a light source alongside the model didn't yield any results either, and the browser's developer tools confirm that all files are properly loaded.
Can anyone provide assistance?
Here is my JavaScript code:
import * as THREE from 'three';
import { GLTFLoader } from '../node_modules/three/examples/jsm/loaders/GLTFLoader.js';
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.z = 2.5;
const renderer = new THREE.WebGLRenderer( {
canvas: eddie
});
renderer.setSize( 500, 500 );
document.body.appendChild( renderer.domElement );
const color = 0x11111;
const intensity = 1;
const light = new THREE.AmbientLight(color, intensity);
scene.add(light);
const loader = new GLTFLoader();
loader.load( './models/eddieFinal.gltf', function ( gltf ) {
let eddie = scene.add( gltf.scene );
eddie.scale.set(1, 1, 1);
eddie.position.set()
console.log(eddie.position);
renderer.render(scene, camera);
}, undefined, function ( error ) {
console.error( error );
} );
I have tried searching on Google for solutions, but to no avail. Even adjusting the camera positioning hasn't brought me any success.