使用节点模块的Three.js的路径

Question

使用节点模块的Three.js的路径

acr*_*ene 7 javascript node.js npm three.js webpack

我正在学习Three.js，并建立了一个运行node.js服务器并导入Three.js作为节点模块的基本项目。

其实我的设置可以用，但是如果这是一个好的设置，我有点困惑吗？

我正在考虑的事情基本上是我的node_module的漫长道路。在某些页面上，Three.js仅通过以下方式导入：

import * as THREE from 'three';

Run Code Online (Sandbox Code Playgroud)

但就我而言，我必须写完整路径：

import * as THREE from './node_modules/three/build/three.module.js';

Run Code Online (Sandbox Code Playgroud)

这是正确的实现吗？

这是我的完整代码：

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>

Run Code Online (Sandbox Code Playgroud)

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();

Run Code Online (Sandbox Code Playgroud)

我需要使用webpack捆绑吗？那可以解决它找不到我的nodemodule路径的问题吗？

Answer 1

iic*_*ain 4

如果您是捆绑程序新手，我的建议是使用Parcel。这是一个可以帮助您开始的入门项目。如果您不想使用这样的完整路径，则需要捆绑器。

归档时间：	6 年前
查看次数：	131 次
最近记录：	6 年前