Threejs开发环境的搭建（必须要有Node.js 18版本及以上）

最新推荐文章于 2025-05-10 14:05:00 发布

DS0324

最新推荐文章于 2025-05-10 14:05:00 发布

阅读量390

点赞数 5

CC 4.0 BY-SA版权

文章标签： node.js

本文链接：https://blog.youkuaiyun.com/DS0324/article/details/146547023

1.threejs官网地址：https://threejs.org/

2.点击code分区的github进入下载页面

点击Code可以选择下载方式

3.解压完成后将它放在一个没有中文的路径，要将后续所有类型的文件都归纳到这个地方，所以最好是创建一个新的文件夹命名后放入里面，之后还需要创建一个项目文件夹，通过编辑器打开这个项目文件夹，在终端上输入npm init

# three.js

npm install --save three

# vite

npm install --save-dev vite

在终端上运行上述代码等待安装完成

4.在该项目根目录下创建src文件夹用来存放main.js的文件，还需要在根目录上创建一个html文件用引用main.js的文件，般页面没有特殊需求在进行使用时可以直接使用一个html文件只需替换main.js文件。

5.例子代码

main.js

import * as THREE from "three"; console.log(THREE); 
// 1、创建场景 
const scene = new THREE.Scene(); 
// 2、创建相机 
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); 
// 设置相机位置 
camera.position.set(0, 0, 10); scene.add(camera); 
// 添加物体 
// 创建几何体 
const cubeGeometry = new THREE.BoxGeometry(1, 1, 1); 
const cubeMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00 }); 
// 根据几何体和材质创建物体 
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial); 
// 将几何体添加到场景中 
scene.add(cube); 
// 初始化渲染器 
const renderer = new THREE.WebGLRenderer(); 
// 设置渲染的尺寸大小 
renderer.setSize(window.innerWidth, window.innerHeight); 
// console.log(renderer); 
// 将webgl渲染的canvas内容添加到body 
document.body.appendChild(renderer.domElement); 
// 使用渲染器，通过相机将场景渲染进来 
renderer.render(scene, camera);

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>这是个测试用的</title>
</head>
<body>
<script src="./main/main.js" type="module"></script>
</body>
</html>

6.最后光标选中src文件右键会有一个在当前文件下打开终端的类似选项，点击，然后在终端上运行npx vite，运行后正常情况下会有一个类似 http://localhost:5173的URL，点开它就能看见