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

news2024/11/15 11:02:24

发现在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();