javascript - 导入 GLTFLoaders 的三个.js 问题

Question

我的 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。但我只想在光标悬停在 Canvas 上时检查鼠标位置。
编码:

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

Answer 1

import * as THREE from '//cdn.skypack.dev/three@0.129.0';import {GLTFLoader} from 'THREE/examples/jsm/loaders/GLTFLoader.js'

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

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>

I want to use OrbitControls. But I want to check mouse position only while the cursor hover over canvas.

看来您不是在创建 OrbitContorls正确。第二个参数是必需的，现在缺少。试试看:

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

renderer.domElement代表你的 Canvas 。