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

【问题标题】：Path for Three.js using node moduleThree.js 使用节点模块的路径
【发布时间】：2020-02-20 05:30:29
【问题描述】：

我正在学习 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 来打包吗？这能解决它找不到我的节点模块的路径吗？

【问题讨论】：

如果你改用import * as THREE from 'three';会发生什么？
documentation中提到，import * as THREE from 'three';是使用官方npm包时的正确做法。
是的，可以在 chrome 中使用，但在 Firefox 中我得到 TypeError: Error resolving module specifier: three 。我必须提供它在 Firefox 中工作的完整路径：import * as THREE from './node_modules/three/build/three.module.js';
你的 Webpack 配置文件是什么样子的？
我没有使用 webpack。也许这是我的问题？我需要 webpack 来解决这个问题吗？

标签： javascript node.js npm webpack three.js

【解决方案1】：

如果您不熟悉捆绑程序，我的建议是使用 parcel。这是一个starter project，可以让你继续前进。如果您不想使用这样的完整路径，则需要一个捆绑器。

【讨论】：

【解决方案2】：

您实际上并不需要将 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.

【讨论】：

【解决方案3】：

您可以考虑从依赖库公开的 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。这就是 10 年前 Web 前端的工作方式，它仍然应该在任何浏览器中工作。

// index.js
const scene = new THREE.Scene();
...

也就是说，您可能很快就会需要一个打包器来支持您的项目即将出现的需求。

【讨论】：