如何在浏览器中显示三个.js

Question

每当我试图在本地浏览器上打开并查看我使用three.js的进度时，它都不会加载并向我抛出这个错误，

Uncaught TypeError: Failed to resolve module specifier "three". Relative references must start with either "/", "./", or "../".

我是three.js的新手，已经被困了一段时间，甚至还没有真正开始。我很感激你的帮助。如果javascript文件的第一行是：import * as THREE from '/Users/16103/Desktop/three'。非常感谢。

Answer 1

试着使用一个带有cdn的演示，比如从他们的样本中提取的这个简单的cdn。您可以从cdn本地下载该脚本。

var camera, scene, renderer, geometry, material, mesh;
init();
animate();
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.z = 500;
scene.add(camera);
geometry = new THREE.CubeGeometry(200, 200, 200);
material = new THREE.MeshNormalMaterial();
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
renderer = new THREE.CanvasRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
}
function animate() {
requestAnimationFrame(animate);
render();
}
function render() {
mesh.rotation.x += 0.01;
mesh.rotation.y += 0.02;
renderer.render(scene, camera);
}

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/three.js/r54/three.js"></script>
<canvas style="margin-top:-200px"></canvas>