个人中心
gpt4 book ai didi

javascript - Three.js 使用 Node 模块的路径

转载 作者：行者123 更新时间：2023-12-04 05:04:18 32 4
gpt4 key购买 nike

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

实际上我的设置有效，但如果这是一个好的设置，我有点困惑？

我正在考虑的事情基本上是我的 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 来打包吗？这可以解决它找不到我的 Node 模块的路径吗？

最佳答案

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

关于javascript - Three.js 使用 Node 模块的路径，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58531808/

32 4 0
文章推荐： sql - SELECT SQL语法，用于WHERE子句中的计数
文章推荐： jquery-ui - Jquery 调用在 Angular 的 $viewContentLoaded 中不起作用
文章推荐： 带有误差条的 Gnuplot 条形图直方图
文章推荐： apache-spark - Spark SQL 如何读取 Parquet 分区文件
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com