英文:
How can I avoid errors in three.js?
问题
以下是您提供的内容的翻译：
我有一个简单的three.js示例，我通过Visual Studio Code进行测试，使用内置的实时预览服务器构建：我不使用Node.js。
HTML代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Three.js中的跳跃人物</title>
<style>
body { margin: 0; }
</style>
</head>
<body>
<script src="three.js"></script>
<script type="module" src="GLTFLoader.js"></script>
<script type="module">
import * as THREE from "./three.js";
import {GLTFLoader} from "./GLTFLoader.js";
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(
75,
window.innerWidth/window.innerHeight,
.01,
1000
);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth,window.innerHeight);
document.body.appendChild(renderer.domElement);
var loader = new GLTFLoader();
var obj;
loader.load("scene.gltf", function(gltf){
obj = gltf.scene
scene.add(gltf.scene);
});
scene.background = new THREE.Color(0xFFFFFF);
var light = new THREE.HemisphereLight(0xffffff,0x000000,2);
scene.add(light);
camera.position.set(0,0,100);
function animate(){
requestAnimationFrame(animate);
renderer.render(scene,camera);
}
animate();
</script>
</body>
</html>
但我一直收到以下错误：无法解析模块说明符“three”。相对引用必须以“/”、“./”或“../”开头。
英文:
i have this simple three.js sample which i test via visual studio code with live preview server build in: i don't use node.js.
HTML CODE:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Persoană care sare în Three.js</title>
<style>
body { margin: 0; }
</style>
</head>
<body>
<script src="three.js"></script>
<script type="module" src="GLTFLoader.js"></script>
<script type="module">
import * as THREE from "./three.js";
import {GLTFLoader} from "./GLTFLoader.js";
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(
75,
window.innerWidth/window.innerHeight,
.01,
1000
);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth,window.innerHeight);
document.body.appendChild(renderer.domElement);
var loader = new GLTFLoader();
var obj;
loader.load("scene.gltf", function(gltf){
obj = gltf.scene
scene.add(gltf.scene);
});
scene.background = new THREE.Color(0xFFFFFF);
var light = new THREE.HemisphereLight(0xffffff,0x000000,2);
scene.add(light);
camera.position.set(0,0,100);
function animate(){
requestAnimationFrame(animate);
renderer.render(scene,camera);
}
animate();
</script>
</body>
</html>
but i keep getting this error : Uncaught TypeError: Failed to resolve module specifier "three". Relative references must start with either "/", "./", or "../".
答案1
得分: 0
我认为你应该在你的HTML文件中包括这两个脚本：
<script async src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script>
<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/three@<version>/build/three.module.js",
"three/addons/": "https://unpkg.com/three@<version>/examples/jsm/"
}
}
</script>
更多信息请参考：
https://threejs.org/docs/manual/en/introduction/Installation.html
(在选项2中)
英文:
I think you should include these two scripts in your HTML file:
<script async src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script>
<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/three@<version>/build/three.module.js",
"three/addons/": "https://unpkg.com/three@<version>/examples/jsm/"
}
}
</script>
More information here:
https://threejs.org/docs/manual/en/introduction/Installation.html
(in Option 2)
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论