Hello,
I also asked this question on stackoverflow.
I learn how to use Three.js by following the tutorial on discoverthreejs.com.
I have no worries about creating meshes and geometry via three.js
The problem is when I want to load models coming from blender or others.
I use blender 2.8 to create my model and export it as a .glb file. I test the file with a gtlf viewer and everything works as expected.
But as soon as I want to import my model with Three.js to my website, I get this error:
I thought it came from my model, I tried to export it in gltf or glb: same error.
I downloaded another model available on the web: same error.
I use parcel.js if it helps.
{
"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"
}
}
Everything is test in my index.js.
Here is how I call Three.js: (all is good here)
*index.js*
import * as THREE from 'three';
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
Here are the function for Three.js (tutorial)(all good here)
*index.js*
// these need to be accessed inside more than one function so we'll declare them first
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 );
}
// perform any updates to the scene, called once per frame
// avoid heavy computation here
function update() {
// Don't delete this function!
}
// render, or 'draw a still image', of the scene
function render() {
renderer.render( scene, camera );
}
// a function that will be called every time the window gets resized.
// It can get called a lot, so don't put any heavy computation in here!
function onWindowResize() {
// set the aspect ratio to match the new browser window aspect ratio
camera.aspect = container.clientWidth / container.clientHeight;
// update the camera's frustum
camera.updateProjectionMatrix();
// update the size of the renderer AND the canvas
renderer.setSize( container.clientWidth, container.clientHeight );
}
window.addEventListener( 'resize', onWindowResize );
// call the init function to set everything up
init();
Problem is here maybe I do something wrong.
const loader = new GLTFLoader();
const url = "./assets/models/test.glb";
// Here, 'gltf' is the object that the loader returns to us
const onLoad = ( gltf ) => {
console.log( gltf );
};
loader.load( url, onLoad );
I’ve been thinking about a problem with the path
I tried :
'/src/assets/models/test.glb'
'assets/models/test.glb'
Here is my folder structure:
Thx for your time