Can't import three.js glTF model
Question
I'm trying to import a 3D module into three.js and I was reading here and here . But it's all black. I've tried moving the Camera's z position to 5 , but still black. I've just started with Three.js. I loaded the model in online Three.js viewers and it loads fine. Here's my code:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Import 3D Model into Three JS</title> <link rel="stylesheet" href="../common.css"> </head> <body> <div id="container"> </div> </body> <script src="../three.js-master/build/three.js"></script> <script type="module"> // import { THREE } from '../three.js-master/build/three.js'; import { GLTFLoader } from '../three.js-master/examples/jsm/loaders/GLTFLoader.js'; const container = document.querySelector('div#container'); const path_to_model = './Mini-Game Variety Pack/Models/gltf/tree_forest.gltf.glb'; const loader = new GLTFLoader(); const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); const renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); loader.load(path_to_model, function (gltf) { console.log('Adding glTF model to scene...'); scene.add(gltf.scene); console.log('Model added.'); console.log('Moving camera 5z...'); camera.position.z = 5; console.log('Camera moved.'); }, undefined, function (error) { console.error(error); }); container.appendChild(renderer.domElement); function animate() { requestAnimationFrame(animate); renderer.render(scene, camera); } animate(); </script> </html>
My folders are like this:
- Three JS/
- common.css
- three.js-master/
- ImportModel/
- index.html
- Mini-Game Variety Pack/
- Models/
- gltf/
- tree_forest.glb
- tree_forest.gltf.glb
- gltf/
- Models/
(Not all files are shown, only necessary ones)
I downloaded all the models from here , but using the tree_forest one. When I load the page, all I see is:
I'm on a Mac and I'm using Five Server on VSCode.
1 answers
solution1
2 ACCPTED 2021-06-22 11:37:34
<script src="../three.js-master/build/three.js"></script>
<script type="module">
// import { THREE } from '../three.js-master/build/three.js';
import { GLTFLoader } from '../three.js-master/examples/jsm/loaders/GLTFLoader.js';
Mixing global scripts with ES6 modules is no good idea and quickly leads to undefined behavior. I suggest you organize imports like so until the app works:
import * as THREE from 'https://cdn.skypack.dev/three@0.129.0/build/three.module.js';
import { OrbitControls } from 'https://cdn.skypack.dev/three@0.129.0/examples/jsm/loaders/GLTFLoader.js';
You should also add some lights to your scene otherwise you just see a black screen. Try it with:
const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444 );
hemiLight.position.set( 0, 10, 0 );
scene.add( hemiLight );
const dirLight = new THREE.DirectionalLight( 0xffffff );
dirLight.position.set( 0, 0, 10 );
scene.add( dirLight );
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.