Three.js简介；Three.js使用与作品生成

一、Three.js简介

1、简介：

????????three.js，一个WebGL引擎，基于JavaScript，可直接运行GPU驱动游戏与图形驱动应用于浏览器。其库提供的特性与API以绘制3D场景于浏览器。

? ? ? ? 运行环境：

????????Three.js 是一款运行在浏览器中的3D 引擎，你可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象。你可以在它的主页上看到许多精彩的演示。不过，这款引擎还处在比较不成熟的开发阶段，其不够丰富的?API?以及匮乏的文档增加了初学者的学习难度（尤其是文档的匮乏）three.js的代码托管在github上面。

????????官网：1. threejs文件包下载和目录简介 | Three.js中文网

????????包下载地址：Releases · mrdoob/three.js · GitHub

????????开发环境当中使用：npm instell three --save（下载）

????????????????????????import * as Three from 'three'（引入）

2、生成three.js必备：

????????Scene-场景，可以理解成一个3D的虚拟场景，用来模拟三维世界的

????????Camera-相机|摄像机，可以理解成一个3D场景的观测点

????????Renderer-渲染器

3、将一个物体放入3D场景中遵循以下几个步骤：

????????1. 创建场景

????????2.创建几何体

????????3.为几何体挑选网格材质

????????4.将物体mesh添加到场景

????????5.设置一个相机，可以通过相机的位置，表示观测点以及设置观测点的最近和最远距离，观测的角度等信息

????????6.设置一个渲染器：

????????7.将照片（渲染结果）插入到页面节点

二、生成一个three.js作品

? ? ? ? 1、html文件需要引入下载好的three.js包，并做好相关配置

<script type="importmap">
    {
      "imports":{
        "three":"../three.js-r159/build/three.module.js",
        "three/addons/":"../three.js-r159/examples/jsm/"
      }
    }
</script>
<script type="module" src="test.js"></script>

? ? ? ? 2、test.js文件写法

? ? ? ? a）引入主文件?

import * as THREE from 'three';//主文件

? ? ? ? b）创建3d场景

const scene=new THREE.Scene();

? ? ? ? c）在场景中添加物体

//1.在场景中添加物体
const geometry = new THREE.BoxGeometry(100, 100, 100);//矩形
//2.物体外观材质
const material = new THREE.MeshBasicMaterial({
    color:0xFF0000,//红色
})
//3.创建一个网格模型（将长方体和材质整合在一起）
const mesh = new THREE.Mesh(geometry, material);

//4.设置网格模型mesh的位置
mesh.position.set(0,0,0);//如果不设置，默认是原点的位置 0 0 0位置

//5.将物体mesh 添加到场景
scene.add(mesh);

? ? ? ?d） 添加三维坐标系（有助于观看物体的x、y、z轴；不是必选项）

//添加三维坐标系
const axesHelper = new THREE.AxesHelper(200);//值必须必物体值更大（避免观察不到）
//把坐标系应用到场景
scene.add(axesHelper);

? ? ? ? e）相机的相关设置

//7.设置一个相机，通过相机来观测mesh的位置
//参数说明：1.摄像机角度 2.宽高比 3.最近观测距离 4.最远观测距离
const camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,1,1000);

//设置相机位置
camera.position.set(200, 200, 200);

//设置相机观察目标点的位置
camera.lookAt(0,0,0);

? ? ? ? f）设置一个渲染器，让物体能展示在页面上

//8.设置一个渲染器（咔）
const renderer=new THREE.WebGLRenderer();

//设置canvas画布的宽高
renderer.setSize(window.innerWidth,window.innerHeight);

//渲染成像，生成一张照片
renderer.render(scene,camera);

//9.将照片插入到页面节点
document.body.appendChild(renderer.domElement);

通过上面的操作就可以生成第一个3d模型作品啦~~~，使用下面的操作可以让您的3d作品变得更加美观哟~~~

三、物体的光源设置

1、添加点光源

//添加点光源 //参数：1.光源的颜色 2.光源的亮度 3.光源照射的范围 4.衰减度 
const Light = new THREE.PointLight(0xccccc, 1);
 Light.position.set(100, 150, 0); scene.add( Light ); 

//参数 1.需要被可视化的光源 2.点光源大小 
// 光源辅助观察（能够看到官员的照射位置）
const pointLightHelper = new THREE.PointLightHelper(Light, 10); scene.add(pointLightHelper);

2、为物体添加平行光

//平行光 
const directionalLight = new THREE.DirectionalLight(0xffffff, 1); directionalLight.position.set(80, 100, 50)
directionalLight.target = mesh; scene.add( directionalLight );

 //可视化平行光 （能够看到光源的照射位置）
const directionalLightHelper=new THREE.DirectionalLightHelper(directionalLight,5); 
scene.add( directionalLightHelper );

3、为物体添加环境光

//添加环境光 
const ambient = new THREE.AmbientLight(0x404040); 
scene.add(ambient)

四、让物体旋转起来

原理：相机位置改变导致物体旋转

1、引入控件

import {OrbitControls} from 'three/addons/controls/OrbitControls.js'

2、设置相机使其拖动改变位置

//摄像机控件
//创建摄像机控件的参数（1.改变的相机 2.监控的区域范围）
const controls=new OrbitControls(camera,renderer.domElement);

//拖动物体的时候需要设置相机的位置，让它随着鼠标拖动而变换方位
controls.addEventListener("change",()=>{
    renderer.render(scene,camera)
})
controls.target.set(0,0,0)//控件的位置和相机的位置设置成一直，鼠标拖动的时候就不会跳
controls.update();//更新控件，不然可能会出现控件无法识别到设置被更新过的情况

五、设置动画，让图形自动旋转

function render(){
    // const spt=clock.getDelta()*1000;//*1000表示将秒换算成毫秒
    // console.log("两帧之间间隔的毫秒："+spt)
    mesh.rotateY(0.01);//0.01弧度，不是度
    renderer.render(scene,camera);//调用一次render就咔一张照片
    requestAnimationFrame(render)//浏览器自带方法
}
render()

更多详情设置请参考官网1. threejs文件包下载和目录简介 | Three.js中文网