CODEWITHSUNDEEP
javascriptthree.js
LuisAFK
LuisAFK

Reputation: 957

Can't import three.js glTF model

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:

(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:

Screenshot

I'm on a Mac and I'm using Five Server on VSCode.

Upvotes: 3

Views: 592

Answers (1)

Mugen87
Mugen87

Reputation: 31076

<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/[email protected]/build/three.module.js';
import { OrbitControls } from 'https://cdn.skypack.dev/[email protected]/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 );

Upvotes: 4

Related Questions