1.创建三要素
-
场景
// 创建场景
const scene = new THREE.Scene() -
相机
// 创建透视相机
const camera = new THREE.PerspectiveCamera(a,b,c,d)
// 参数含义
// a:相机可视垂直角度;b:相机可视长宽比;c:近端距离;d:远端距离 -
渲染器
// 创建渲染器
const renderer = new WebGLRenderer()
// 设置渲染器的大小
renderer.setSize(window.innerWidth,window.innerHeight)
2.获取canvas画布,并将其加入到body中
document.body.appendChild(renderer.domElement)
3.创建几何体
// 创建几何体
const geometry = new THREE.BoxGeometry(1,1,1)
4.创建材质
// 创建材质
const Material = new.THREE.MeshBssicMaterial({color:0xff00ff,wireframe:true})
// color:材质颜色;wireframe:为true时,渲染网格将会呈现线框形式
5.创建网格
几何体 + 材质 -> 物体
const cube = new THREE.Mesh(geometry,Material)
// geometry:几何体;Material:材质
// 将网格添加到场景中
scene.add(cube)
6.设置相机的位置
相机的位置就相当于人是视角
camera.position.z = 5
camera.position.y = 3
camera.position.x = 2
// 设置相机看向的位置(默认为原点)
camera.lookAt(0,0,0)
7.渲染
renderer.render(scene,camera)
完成以上操作,边可以在页面上渲染一个基础的立方体,可以通过一下操作进一步完善。
设置响应式画布
监听窗口变化,做出响应的操作
window.addEventListener('resize',()=>{
// 重新设置渲染器的宽高比
renderer.setSize(window.innerWidth,window.innerHeight)
// 重新设置相机的宽高比
camera.aspect(window.innerWidth/window.innerHeight)
// 更新相机投影矩阵
camera.updateProjectionMatrix()
})
世界坐标
为了更好的观察,我们可以添加一个世界坐标辅助器
const axesHelper = new THREE.AxesHelper(5)
// 将世界坐标辅助器添加到场景中
scene.add(axesHelper);
轨道控制器
// 导入轨道控制器
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
// 添加轨道控制器
const controls = new OrbitControls(camera,render,domElement)
// 设置带阻尼的惯性
controls.enableDamping = true
// 阻尼系数
controls.dampingFactor = 0.05
GUI控件
// 引入lil.gui
import { GUI } from "three/examples/jsm/libs/lil-gui.module.min.js";
// 创建GUI
const gui = new GUI()
// 利用folder对控件进行分组
let folder = gui.addFolder("立方体的位置")
folder.add(cube.position,"x",-5,5).name("x轴方向的位置")
folder.add(cube.position,"y").min(-5).max(5).step(1).name("y轴方向的位置")
let folder1 = gui.addFolder("旋转");
folder1.add(cube.rotation, "x", -Math.PI, Math.PI).name("绕x轴旋转");
gui.add(Material,"wireframe").name('线框模式')
let coloeParams = {
cubeColor:'#00ff00'
}
gui.addColor(coloeParams,'cubeColor').name('立方体颜色').onChange(val=>{
cube.material.color.set(val)
})