导入 GLTFLoaders 时出现的三个 js 问题

Question

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

第一：我无法导入 GLTFLoader。错误消息显示：“未捕获类型错误：无法解析模块说明符“THREE/examples/jsm/loaders/GLTFLoader.js”。相对引用必须以“/”、“./”或“../”开头。 ” 然而，当我输入“/”时，它会尝试从我的服务器导入，如果我输入“//”，它会查找 https://two/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);

Answer 1

从'//cdn.skypack.dev/ Three@0.129.0'导入*为三；从“三个/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 OrbitControls(camera, renderer.domElement);
controls.addEventListener('change', renderer);

renderer.domElement代表你的画布。