学习three.js —— 第一天

news2024/11/28 2:42:08

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)
})

在这里插入图片描述