我正在学习Three.js,并建立了一个基本项目,运行一个node.js服务器并将Three.js作为节点模块导入。
实际上我的设置可以工作,但我有些困惑这是否是一个好的设置?
我在思考的问题主要是我的node_module路径太长了。在一些页面上,Three.js仅通过以下方式导入:
import * as THREE from 'three';
但在我的情况下,我必须写全路径:
import * as THREE from './node_modules/three/build/three.module.js';
这是正确的实现吗?
这是我完整的代码:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
background-color: #cce0ff;
color: #000;
}
a {
color: #080;
}
</style>
</head>
<body>
<script type="module" src="index.js"></script>
</body>
</html>
index.js
**import * as THREE from './node_modules/three/build/three.module.js';**
const scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var geometry = new THREE.BoxGeometry(1, 1, 1);
var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;
var animate = function () {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
};
animate();
我需要使用webpack进行打包吗?能解决找不到我的nodemodules路径的问题吗?
import * as THREE from 'three';
会发生什么? - user5734311npm
包时,import * as THREE from 'three';
是正确的方法。 - Mugen87TypeError: Error resolving module specifier: three
。我必须提供完整路径才能让它在Firefox中工作:import * as THREE from './node_modules/three/build/three.module.js';
- acroscene