提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
文章目录
- 前言
- 一、安装
- 二、三要素
- 1.场景
- 1.1创建场景
- 1.2向场景添加元素
- 1.3场景属性
- 2.相机
- 2.1相机特点
- 2.2正交相机
- 2.3空间布局
- 2.4小姐操作
- 3.渲染器
- 总结
前言
本章简单介绍前端框架threeJS的使用，使用threeJS我们可以构建出前端的3D界面。不仅能应用在看房、模型分享网站等有需求的项目中，还可以在其他项目中做出酷炫的效果。
一、安装
为了方便查看效果，我们用vite快速创建一个项目,然后使用npm工具进行安装，命令如下：
npm install --save three
安装完成后，我们编写一个html文件测试
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><script type="module">import * as THREE from "three";// 创建场景const scene = new THREE.Scene();// 加载图片作为背景// const loader = new THREE.TextureLoader();// loader.load("./image/1.png", (texture) => {// scene.background = texture;// });// 创建透视相机const camera = new THREE.PerspectiveCamera(75,window.innerWidth / window.innerHeight,0.1,1000);// 修改相机位置camera.position.set(0, 0, 5);// 旋转相机camera.lookAt(0, 0, 0);// 物体网格const geometry = new THREE.BoxGeometry(1, 1, 1);// 物体材质const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });const cube = new THREE.Mesh(geometry, material);// 添加到场景scene.add(cube);// 创建网格辅助线const gridHelper = new THREE.GridHelper(10, 10);scene.add(gridHelper);// 创建渲染器const renderer = new THREE.WebGLRenderer();renderer.setSize(window.innerWidth, window.innerHeight);// 将渲染出的元素追加到页面document.body.appendChild(renderer.domElement);function animation() {requestAnimationFrame(animation);cube.rotation.x += 0.01;cube.rotation.y += 0.01;// 渲染场景和相机renderer.render(scene, camera);}animation();</script></body>
</html>运行后，对应页面上会出现一个不停旋转的立方体
然后说明threeJS可以使用了
二、三要素
treeJS中有三个重要元素
- 场景
- 相机
- 渲染器
1.场景
场景元素(scene)中存储着我们所有的对象（模型、灯光、摄像机），是一个容器
1.1创建场景
从导入three包中提供的函数，可以创建一个场景对象
import * as THREE from 'three';const scene = new THREE.Scene();
1.2向场景添加元素
有了场景后，我们就可以向里面添加需要的元素，这个元素可以是模型、灯光等，threeJS中提供了多种默认的模型，也可以自己读取建模软件中的模型进行导入，我们试着导入一个默认的立方体：
const geometry = new THREE.BoxGeometry( 1, 1, 1 );// 物体材质
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );
对于模型而言，创建出的物体还需要为其指定材质才能够正常显示。
最后使用BoxGeometry()创建模型顶点数据，用MeshBasicMaterial()创建模型材质,两者结合变成完整的立方体模型，然后添加到场景scene中
1.3场景属性
场景除了可以存储各种元素以外，场景对象本身也有很多属性，比如我们可以使用background属性设置场景背景
2.相机
threejs中提供了多种类型的相机：正交相机（距离不影响物体大小）、透视相机（物体近大远小）、立方相机（用于全景图）、立体相机。
这里主要使用的是透视相机，因为符合人眼的规律。
2.1相机特点
在开始介绍该对象的属性前，先说一下3D建模中透视相机的特点：
相机的视野区域是一个立方体（锥体），离我们人眼原的一段是远端，离我们人眼近的一端是近端，处于这个立方体内的物体会被投射到近端，形成画面。
2.2正交相机
我们说过，相机有很多种类型，上面视野范围呈锥体的是透视相机，而正交相机的视角范围是一个立方体，正交相机投射的物体会保留原来的大小（不会近大远小）。
这种相机常被用于一些需要精准测量的模型中，不会因为缩放干扰到数据。
2.3空间布局
场景中用三维坐标来描述位置，threejs中的布局如下（用blender模拟一下）：
如果是刚创建出的元素（包括相机）都是生成在场景原点的位置，如果我们想要成功渲染出模型，需要先调整模型和相机的位置，让模型处于相机的可视范围内。
2.4小姐操作
相机可以进行位置的移动和视角的旋转，这些可以帮助我们在页面渲染出一些想要的效果。
// 修改相机位置camera.position.set(0, 0, 10);// 视角中心位置（看向哪）camera.lookAt(5, 0, 0);
3.渲染器
设置好场景和相机后需要使用渲染器才可以真正渲染到页面上。
本质是在canvas标签上来展示效果。
渲染器我们这里介绍WebGLRenderer
调用构造器可以创建对应对象，其中可以设置canvas属性来指定一个已有的canvas标签，在里面渲染效果。
// 创建渲染器const renderer = new THREE.WebGLRenderer({canvas: document.querySelector('.canvas1')});
如果不设置，或者没有现成的canvas元素，就需要用追加节点的方式动态的追加一个新的canvas元素。
document.body.appendChild(renderer.domElement)
这里renderer.domElement指向的是用来渲染的canvas对象，如果在构造方法中指定过，就是我们指定的那一个。如果是没有指定过，就会自动生成一个canvas，这个时候再用来作为追加节点就可以了。
总结
由此我们已经能够简单使用threeJS创建简单模型，不过想要做出酷炫效果，需要导入外部模型，这个后面再说。
