从Unity到Three.js（安装启动）

news/2025/3/26 7:58:23/

发现在3D数字孪生或模拟仿真方向，越来越多的公司倾向使用Web端程序，目前一直都是使用的Unity进行的Web程序开发，但是存在不少问题，比如内存释放、shader差异化、UI控件不支持复制或输入中文等。虽然大多数问题都可以找到解决方案，但是最后也只能停在解决问题的程度，算不上是一个完美方案，因此想接触下three.js，开个系列记录下，一个0基础js的unity开发人员学习three.js的过程。
Three.js官方文档:(https://threejs.org/docs/index.html#manual/zh/introduction/Creating-a-scene)
一、环境配置，win10 64位操作系统。参考链接 https://zhuanlan.zhihu.com/p/653881053
1.安装Node.js: (https://www.nodejs.com.cn/)
win+R 输入cmd 输入node -v 确认node.js安装完成在这里插入图片描述
2.vscode安装

二、工程创建
1.新建一个存放工程的文件夹，如learning
2.将新建的工程目录文件夹拖拽到新打开的vscode中。
3.点击终端–新建终端会发现终端直接进入了当前文件夹。在这里插入图片描述
4.创建vite项目，输入命令 npm create vite@latest
在出现的提示中，
设置项目名称，
框架默认Vanilla，
上下箭头选择javaScript
5.安装threeJS
在左侧资源管理器项目名称文件夹上右键选择在集成终端中打开。
输入命令 npm i vite three
这个过程等待可能会稍长一些时间。在这里插入图片描述
6.启动运行vite首页，输入 npm run dev按住ctrl+鼠标左键，会直接在浏览器中打开，可以看到vite的主页。

三、编写第一个three.js代码，测试环境配置是否成功。
1.在左侧资源管理器中找到index.html
填入如下代码。

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><title>My first three.js app</title><style>body {margin: 0;}</style>
</head><body><script type="module" src="main.js"></script>
</body></html>

2.找到main.js文件
填入如下代码。

import * as THREE from 'three';const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
cube.position.x += 4;
scene.add(cube);const cube2 = new THREE.Mesh(geometry, material);
scene.add(cube2);camera.position.z = 5;function animate() {requestAnimationFrame(animate);cube.rotation.x += 0.01;cube.rotation.y += 0.01;renderer.render(scene, camera);
}animate();