公司建网站几天可以,电子商务网站开发形式有,国外搜索引擎,永久免费建站网站发现在3D数字孪生或模拟仿真方向#xff0c;越来越多的公司倾向使用Web端程序#xff0c;目前一直都是使用的Unity进行的Web程序开发#xff0c;但是存在不少问题#xff0c;比如内存释放、shader差异化、UI控件不支持复制或输入中文等。虽然大多数问题都可以找到解决方案越来越多的公司倾向使用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/) winR 输入cmd 输入node -v 确认node.js安装完成 2.vscode安装
二、工程创建 1.新建一个存放工程的文件夹如learning 2.将新建的工程目录文件夹拖拽到新打开的vscode中。 3.点击终端–新建终端 会发现终端直接进入了当前文件夹。 4.创建vite项目输入命令 npm create vitelatest 在出现的提示中 设置项目名称 框架默认Vanilla 上下箭头选择javaScript 5.安装threeJS 在左侧资源管理器项目名称文件夹上右键 选择在集成终端中打开。 输入命令 npm i vite three 这个过程等待可能会稍长一些时间。 6.启动运行vite首页输入 npm run dev按住ctrl鼠标左键会直接在浏览器中打开可以看到vite的主页。
三、编写第一个three.js代码测试环境配置是否成功。 1.在左侧资源管理器中找到index.html 填入如下代码。
!DOCTYPE html
html langenheadmeta charsetutf-8titleMy first three.js app/titlestylebody {margin: 0;}/style
/headbodyscript typemodule srcmain.js/script
/body/html2.找到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();刷新主页可以看到两个cube,一个静态的一个实时旋转的。
