话不多说开整! 持续更新中...
1.下载three.js，并在项目中引入
```npm install three@0.148.0 --save
```import * as THREE from "three"
2.创建场景,几何体,材质,物体,相机,渲染器
2.1 场景
场景 (比作一个大房子)
const scene = new THREE.Scene()
2.2 几何体
几何体
1.长方体
// 参数: x y z 轴上面的宽度,高度,深度
const geometry = new THREE.BoxGeometry(20,20,20)
2.球体
// 参数:半径
const geometry = new THREE.SphereGeometry(15)
2.3 材质
1. 材质(就是为了给几何体设置颜色之类)
1.1 基础网格材质(不受光源的影响)
const material = new THREE.MeshBasicMaterial({
color:0xff0000, // 设置颜色
transparent: true, // 是否开启透明,默认不开启
opacity: 0.3 // 透明度(0-1)
})
1.2 网格材质(需要设置光源)
const material = new THREE.MethLambertMaterial({
color:0xff0000, // 设置颜色
transparent: true, // 是否开启透明,默认不开启
opacity: 0.3 // 透明度(0-1)
})
1.3 高光材质(需要设置光源)
// 类似于汽车表面反光的地方
const material = new THREE.MeshPhongMaterial({
color:0xff0000, // 设置颜色
shininess:50, // 高光的亮度
specular:0xffffff, // 高光的颜色
})
2.4 物体(待补充...)
// 参数1: 几何体 参数2: 材质
const mesh = new THREE.Mesh(geometry,material)
// 设置网格模型在三维空间的位置坐标,默认是坐标原点
mesh.position.set(0,10,0)
// 添加到场景中
scene.add(mesh)
2.5 相机
// 参数1: 视角角度 参数二: Canvas画布宽高比 参数3:近裁截面 参数4:远裁截面
const camera = new THREE.PerspectiveCamera(45,width/height,1,1000)
// 设置位置
camera.position.set(200,200,200)
// 设置相机观察点(相当于相机在哪个位置进行拍摄)
camera.lookAt(0,0,0)
2.6 渲染器
const renderer = new THREE.WebGLRenderer({
antialias: true, // 打开抗锯齿,可以是页面物体加载更清晰
})
// 不同硬件设备的屏幕的设备像素比window.devicePixelRatio值可能不同
console.log("查看当前屏幕设备像素比", window.devicePixelRatio);
renderer.getPixelRatio(window.devicePixelRatio);
// 把场景和相机放进去
renderer.render(scene,camera)
// 设置画布大小
renderer.setSize(width,height)
// 把canvas画布插入到页面中 renderer.domElement:相当于画布
document.body.appendChild(renderer.domElement)
// 设置坐标辅助对象 红色代表 X 轴. 绿色代表 Y 轴. 蓝色代表 Z 轴.
const axesHelper = new THREE.AxesHelper( 5 );
scene.add( axesHelper );
- 灯光
3.1 环境光
// 环境光没有方向,会均匀的照射在物体表面
const light = new THREE.AmbientLight( 0x404040 ); // 柔和的白光
scene.add( light );
3.2 平行光
// 平行光需要设置位置和目标,灯光会在位置和目标连成的直线照射
const light = new THREE.DirectionalLight(0xffffff, 1); // 灯光 平行光
light.position.set(200, 60, 50); // 设置位置
light.target = mesh; // 设置目标(这里设置的是物体的位置) 默认的目标位置为原点(0,0,0)
scene.add(light); // 添加到场景
// 可视化平行光 参数1: 灯光 参数2: 大小 参数3: 颜色
const dirLightHelper = new THREE.DirectionalLightHelper(light, 5, 0xff0000);
scene.add(dirLightHelper);
3.3 点光源
// 从设置的位置照射
const light = new THREE.PointLight( 0xff0000, 1, 100 );
// 设置位置,注意:不能小于几何体的大小
light.position.set( 50, 50, 50 );
// 设置光源不随着距离衰减
light.decay = 0.0
scene.add( light );
// 可视化点光源 参数1: 灯光 参数2: 大小 参数3: 颜色
const PointLightHelper = new THREE.PointLightHelper(light,5,0xff0000)
scene.add(PointLightHelper)
- 相机控件:轨道控制器(待补充...)
// 引入相机控件 可以平移 放大 旋转
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
// 实例化 参数1: 相机 参数2: 监听的元素 (会改变相机的位置,要重新渲染)
const controls = new THREE.OrbitControls(camera,renderer.domElement)
// 改变位置后重新渲染
controls.addEventListener('change',()=>{
// console.log(camera.position) 可以观察相机的位置
renderer.render(scene,camera)
})
- 添加动画帧(待补充...)
//引入性能监视器stats.js
import Stats from "three/addons/libs/stats.module.js";
const stats = new Stats()
// 把该元素插入页面
document.body.appendChild(stats.domElement)
const render = ()=>{
// 可以观察页面左上角
stats.update()
// 物体的属性
mesh.rotateY(0.1);
// 重新渲染
renderer.render(scene, camera);
// H5的动画帧 不出意外的情况下每秒60帧 参数:函数
window.requestAnimationFrame(render);
}
render()
6.gui(一个js库,可视化调试参数)
