导入 GLTFLoaders 的三个.js 问题

Posted 2023-02-21

【中文标题】导入 GLTFLoaders 的三个.js 问题

【英文标题】：THREE.js problems with importing GLTFLoaders

【发布时间】：2021-08-25 05:09:52

【问题描述】：

我的 WordPress 页面上的 three.js 有两个问题。

首先： 我无法导入 GLTFLoader。错误消息显示：“未捕获的 TypeError：无法解析模块说明符“THREE/examples/jsm/loaders/GLTFLoader.js”。相对引用必须以“/”、“./”或“../”开头。 "但是，当我输入“/”时，它会尝试从我的服务器导入，如果我输入“//”，它正在寻找 https://three/examples/。这也不起作用。

在这里你可以看到我的部分代码：

<script type="module">
// Find the latest version by visiting https://cdn.skypack.dev/three.
 import * as THREE from '//cdn.skypack.dev/three@0.129.0';
 import GLTFLoader from 'THREE/examples/jsm/loaders/GLTFLoader.js'
</script>

<script>
 //load 3d model
    const loader = new GLTFLoader();
    loader.load( 'https://www.historia3d.pl/wp-content/uploads/2021/05/mini_3D02.glb', function ( gltf ) 
        model = gltf.scene.children[0];
        model.scale.set(0.5,0.5,0.5);
        scene.add( gltf.scene );
    ,
    undefined, function ( error ) 
        console.error( error );
     );
</script>

第二：我想使用 OrbitControls。但我只想在光标悬停在画布上时检查鼠标位置。

代码：

controls = new THREE.OrbitControls(camera);
controls.addEventListener('change', renderer);

【问题讨论】：

你能本地加载three.module.js吗？

【参考方案1】：

从 '//cdn.skypack.dev/three@0.129.0' 导入 * 作为三个； 从 'THREE/examples/jsm/loaders/GLTFLoader.js' 导入 GLTFLoader

不建议从不同位置导入模块。现在就这样做吧：

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/controls/OrbitControls.js';
import  GLTFLoader  from 'https://cdn.skypack.dev/three@0.129.0/examples/jsm/loaders/GLTFLoader.js';

您还必须将代码放入同一个脚本标记中。请记住，您导入的不是全局脚本，而是 ES6 模块（具有模块范围）。应该是：

<script type="module">
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/controls/OrbitControls.js';
import  GLTFLoader  from 'https://cdn.skypack.dev/three@0.129.0/examples/jsm/loaders/GLTFLoader.js';


 //load 3d model
    const loader = new GLTFLoader();
    loader.load( 'https://www.historia3d.pl/wp-content/uploads/2021/05/mini_3D02.glb', function ( gltf ) 
        model = gltf.scene.children[0];
        model.scale.set(0.5,0.5,0.5);
        scene.add( gltf.scene );
    ,
    undefined, function ( error ) 
        console.error( error );
     );
</script>

我想使用 OrbitControls。但我只想在光标悬停在画布上时检查鼠标位置。

您似乎没有正确创建OrbitContorls。第二个参数是必需的，现在缺少。试试看：

const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.addEventListener('change', renderer);

renderer.domElement 代表你的画布。

【讨论】：

感谢您的帮助。不幸的是，现在我所有的画布都变黑了，我无法弄清楚我做错了什么编辑：对不起，我很愚蠢。我错误地删除了定义nessesery变量的一行

确保在场景中添加一些灯光。使用官方示例之一作为代码模板，例如threejs.org/examples/webgl_morphtargets_horse.