無法導入three.js glTF模型

Question

我正在嘗試將 3D 模塊導入到three.js 中，我正在閱讀here和here 。 但是全是黑的。 我試過將相機的z位置移動到5 ，但仍然是黑色的。 我剛剛開始使用 Three.js。 我在在線 Three.js 查看器中加載了模型，並且加載良好。 這是我的代碼：

 <!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>

我的文件夾是這樣的：

三個JS/
- 常見的.css
- 三.js-master/
- 導入模型/
  - 索引.html
  - 小游戲綜藝包/
    - 楷模/
      - 格特夫/
        
        tree_forest.glb
        
        tree_forest.gltf.glb

（未顯示所有文件，僅顯示必要的文件）

我從這里下載了所有模型，但使用的是tree_forest模型。 當我加載頁面時，我看到的是：

我在 Mac 上，我在 VSCode 上使用五台服務器。

Answer 1

<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';

將全局腳本與 ES6 模塊混合並不是一個好主意，而且會很快導致未定義的行為。 我建議你像這樣組織導入，直到應用程序運行：

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';

您還應該向場景中添加一些燈光，否則您只會看到黑屏。 試試看：

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 );

無法導入three.js glTF模型

問題描述

1 個解決方案

解決方案1
2 已采納 2021-06-22 11:37:34

無法導入three.js glTF模型

問題描述

1 個解決方案

解決方案1 2 已采納 2021-06-22 11:37:34

解決方案1
2 已采納 2021-06-22 11:37:34