Loading 3D models into 3js scene

Questions
1

I’m making a 3D animated movie using 3js and have a problem loading the 3D models using GLTFLoader. I know the code but whenever I run the code, an error message in the console is shown which says syntax error. Your gltf file is being read as your HTML file .
Here’s the detailed error:

" Unexpected token ‘<’, “<!DOCTYPE "... is not valid JSON at JSON.parse ()
at GLTFLoader.parse (GLTFLoader.js:340:17)
at Object.onLoad (GLTFLoader.js:245:11)
at three.module.js:44568:38”

I tried a bunch of different solutions but nothing seems to work. Kindly help me in solving this issue. Here’s my code :

import * as THREE from ‘three’;
import {OrbitControls} from
‘three/examples/jsm/controls/OrbitControls’;
import { GLTFLoader } from ‘three/examples/jsm/loaders/GLTFLoader.js’;

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

renderer.setClearColor(0xA3A3A3);

const orbit = new OrbitControls(camera, renderer.domElement);
camera.position.set(10, 10, 10);
orbit.update();

// Lighting
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(0, 1, 1).normalize();
scene.add(light);

// Load GLTF Model

const assetLoader = new GLTFLoader();
const m_url = ‘C:/Users/shrey/OneDrive/Desktop/threejsprojects/assets/ground.glTF’;
assetLoader.load(m_url,
function(glTF) {
const model = glTF.scene;
scene. add(model);

},
undefined,
function (error) {
    console.error(error);
}

);

renderer.render(scene, camera);
2

Hey there, you can’t load local files from your computer’s filesystem just like that. Imagine what a huge security hole it would be.

You have to setup a web server that serves the files from a designated directory, then you can load the data from `http://localhost/…’ instead.

3

Thank you. Can you explain it more ?

4

I can’t help with Windows stuff. Try using search here – I’m sure there’s similar issues, explanations and solutions already posted.

5

Thank you. I corrected the file path but my problem is still not solved. I’ll try searching here.

6

Refer to the official three installation and follow “Option 1” to set up a server. Place your model in Vite’s public directory (public/assets/ground.gltf), and load it using the URL: http://localhost:5173/assets/ground.gltf.

2 Likes
7

Thank You so much but it is still not working. i don’t know why ?

8

gltf isn’t ideal, better use glb, which includes all assets in one. gltf is a container format that still refers to outside files and gltfloader has to be specifically set up for it which is not worth the trouble since gltf is bigger in size anyway.

put the glb into the public dir, say /public/foo.glb, then you can access it via “/foo.glb”.

ps the three instructions for some reason bypass vite install, so you would have to create a folder named “public”. it is better to run “npm create vite” and it will set everything up for you.

pps if your glb is compressed you need to set up draco or meshopt still.

1 Like
9

Thank you. Since I’m new to this, I have one question, I already installed Vite using the install method for one of my projects; to install it differently, what are the other steps that I need to follow? Do I need to remove all the three js installed files as well or I can create a different folder and install everything again ?

10

Thank you everyone for your help. It is finally working. But, I changed my server from vite to Vanilla and now it is working.

1 Like