我正在学习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捆绑吗?可以解决它找不到我的nodemodule路径的问题吗?
答案 0 :(得分:4)
如果您不熟悉捆绑软件,我的建议是使用parcel。这是starter project,可以助您一臂之力。如果您不想使用完整路径,则需要一个捆绑器。
答案 1 :(得分:4)
您实际上不需要将Webpack引入方程式中,除非您要将多个JS文件捆绑在一起。一个简单的解决方案是仅指向Three.js的three.module.js
构建,无论它存储在哪里。在下面的示例中,我要从CDN导入它,但也可以从您的node_modules
文件夹中导入它。
<!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">
import * as THREE from 'https://cdnjs.cloudflare.com/ajax/libs/three.js/109/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: 0xff9900 });
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();
</script>
</body>
</html>
请记住,使用<script type="module">
是not supported in Edge and IE,因此,如果您需要支持这些浏览器,则可能要使用WebPack。这是一个非常广泛的主题,因此您可以按照其文档的Getting Started section.
答案 2 :(得分:1)
您可能考虑依靠库公开的UMD(通用模块定义)捆绑包从CDN导入three.js
。
<script src="https://unpkg.com/three@0.110.0/build/three.js"></script>
<script src="./path/to/your/index.js"></script>
这将获取库并在全局对象中公开THREE
。 Web前端就是10年前的工作方式,并且仍然可以在任何浏览器中工作。
// index.js
const scene = new THREE.Scene();
...
也就是说,您可能很快就会需要捆绑器,以支持您项目中即将出现的需求。