Discovering how to use Three.js has been an exciting journey for me, thanks to the tutorial available on discoverthreejs.com.
Creating meshes and geometry through three.js is a breeze for me.
However, things take a turn when I try to import models from Blender or other software.
I usually design my models in Blender 2.8 and export them as .glb files. After testing these files with a gltf viewer, everything seems to be in order.
https://i.sstatic.net/0Cq94.jpg
Unfortunately, the challenge arises when I attempt to bring these models into my website using Three.js, resulting in this error:
https://i.sstatic.net/cgPY7.png
https://i.sstatic.net/tL77m.png
I initially thought the issue was with my model; hence, I experimented with exporting it as either gltf or glb, but encountered the same error.
Even after downloading another model from the web, the problem persisted.
In my development process, I utilize parcel.js.
{
"name": "cedric_grvl",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"clean": "rm -rf dist",
"dev": "parcel src/index.html --host 192.168.0.37 --open Firefox"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {},
"devDependencies": {
"autoprefixer": "^9.7.3",
"parcel-bundler": "^1.12.4",
"postcss-custom-properties": "^9.0.2",
"postcss-modules": "^1.4.1",
"postcss-preset-env": "^6.7.0",
"sass": "^1.23.7",
"three": "^0.111.0"
}
}
All elements are tested within my index.js file.
The following snippet showcases how I integrate Three.js: (no issues here)
*index.js*
import * as THREE from 'three';
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
Below are the functions pertaining to Three.js implementation (tutorial) - everything appears fine here too:
*index.js*
// The following variables need multiple function access, so we declare them initially
let container;
let camera;
let controls;
let renderer;
let scene;
let mesh;
function init() {
container = document.querySelector( `[data-js="canvas"]` );
scene = new THREE.Scene();
scene.background = new THREE.Color( 0xFFFFFF );
createCamera();
createControls();
createLights();
createMeshes();
createRenderer();
// Start the animation loop
renderer.setAnimationLoop( () => {
update();
render();
} );
}
function createCamera() {
camera = new THREE.PerspectiveCamera(
35, // FOV
container.clientWidth / container.clientHeight, // aspect
0.1, // near clipping plane
100, // far clipping plane
);
camera.position.set( -4, 4, 10 );
}
function createControls() {
controls = new OrbitControls( camera, container );
}
function createLights() {
const ambientLight = new THREE.HemisphereLight(
0xddeeff, // sky color
0x202020, // ground color
5, // intensity
);
const mainLight = new THREE.DirectionalLight( 0xffffff, 5 );
mainLight.position.set( 10, 10, 10 );
scene.add( ambientLight, mainLight );
}
function createMeshes() {
const geometry = new THREE.BoxBufferGeometry( 2, 2, 2 );
const material = new THREE.MeshStandardMaterial( { color: 0x800080 } );
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
}
function createRenderer() {
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( container.clientWidth, container.clientHeight );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.gammaFactor = 2.2;
renderer.gammaOutput = true;
renderer.physicallyCorrectLights = true;
container.appendChild( renderer.domElement );
}
function update() {
// Avoid heavy computation here
}
function render() {
renderer.render( scene, camera );
}
function onWindowResize() {
camera.aspect = container.clientWidth / container.clientHeight;
camera.updateProjectionMatrix();
renderer.setSize( container.clientWidth, container.clientHeight );
}
window.addEventListener('resize', onWindowResize);
init();
The root of the problem might lie in this segment:
const loader = new GLTFLoader();
const url = "./assets/models/test.glb";
const onLoad = ( gltf ) => {
console.log( gltf );
};
loader.load( url, onLoad );
I've considered a potential issue with the file path and have tried variations like:
'/src/assets/models/test.glb'
'assets/models/test.glb'
Here is an overview of my folder structure:
https://i.sstatic.net/rM3JR.png
Thank you for taking the time to review my situation.