无法导入three.js glTF模型答案

【问题标题】：Can't import three.js glTF model无法导入three.js glTF模型
【发布时间】：2021-06-22 19:38:06
【问题描述】：

我正在尝试将 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/
- common.css
- three.js-master/
- 导入模型/
  - index.html
  - 小游戏百变包/
    - 型号/
      - gltf/
        
        tree_forest.glb
        
        tree_forest.gltf.glb

（未显示所有文件，仅显示必要的文件）

我从here 下载了所有模型，但使用的是tree_forest 之一。当我加载页面时，我看到的是：

我在 Mac 上，我在 VSCode 上使用五个服务器。

【问题讨论】：

标签： javascript three.js

【解决方案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 和带有 <script src=""> 标签的 GLTFLoader 而不是 imports？
是的，如果您想测试一下，请使用https://cdn.skypack.dev/three@0.129.0/build/three.js 和https://cdn.skypack.dev/three@0.129.0/examples/js/loaders/GLTFLoader.js。