GLTF Loader Trial Returning TypeError: 无法解析模块说明符“三”。相对引用必须以“/”、“./”或“../”开头答案

【问题标题】：GLTF Loader Trial Returning TypeError: Failed to resolve module specifier "three". Relative references must start with either "/", "./", or "../"GLTF Loader Trial Returning TypeError: 无法解析模块说明符“三”。相对引用必须以“/”、“./”或“../”开头
【发布时间】：2022-02-09 18:04:20
【问题描述】：

我是 three.js 的新手，正在尝试将模型加载到我的画布中。导入 GLTFLoader 后，我会在控制台中获得上述读数。到底是怎么回事？语法和相对路径看起来不错。我真的不明白发生了什么事。我添加了另一个文件夹以将 master three.js 文件夹放入，但它无法正常工作。

import * as THREE from '../master/three.js-master/build/three.module.js'
import {GLTFLoader} from '../master/three.js-master/examples/jsm/loaders/GLTFLoader.js'
const canvas = document.querySelector('.webgl')
const scene = new THREE.Scene()

const loader = new GLTFLoader()
loader.load('../assets/scene.gltf', function(gltf){
  console.log(gltf);
  const root = gltf.scene;
  scene.add(root);
}, function(xhr){
  console.log((xhr.loaded/xhr.total * 100) + "% loaded")
}, function(error){
  console.log('error');
})

// const geometry = new THREE.BoxGeometry(1,1,1)
// const material = new THREE.MeshBasicMaterial({
//   color: 'green'
// })

const boxMesh = new THREE.Mesh(geometry,material)
scene.add(boxMesh)

//Boiler Plate

const sizes = {
  width: window.innerWidth,
  height: window.innerHeight,
}

const camera = new THREE.PerspectiveCamera(75, sizes.width/sizes.height, 0.1, 100)
camera.position.set(0,1,2)
scene.add(camera)

const renderer = new THREE.WebGLRenderer({
  canvas: canvas
})

renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
renderer.shadowMap.enabled = true
// renderer.outputEncoding = true
renderer.render(scene, camera)


console.log('working')

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Landing Page</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>  
    <canvas class="webgl"></canvas>
    <script type = "module" src="scripts.js"></script>
    <script>
        
    </script>
</body>
</html>

【问题讨论】：

标签： javascript three.js model gltf

【解决方案1】：

因为r137 在浏览器中使用像GLTFLoader 这样的ES6 模块需要导入映射。在您的正下方添加以下部分canvas。

<!-- Import maps polyfill -->
<!-- Remove this when import maps will be widely supported -->
<script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>

<script type="importmap">
    {
        "imports": {
            "three": "../master/three.js-master/build/three.module.js"
        }
    }
</script>

scripts.js 中的 three.js 导入语句如下所示：

import * as THREE from 'three'

【讨论】：