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
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com