Three.js 入门(辅助、位移、父子关系、缩放旋转、响应式布局)

本篇主要学习内容 :

三维坐标系与辅助坐标系
物体位移与父子元素
物体的缩放与物体的旋转
设置响应式画布与全屏控制

点赞 + 关注 + 收藏 = 学会了

本文使用 Three.js 的版本：171 基于 Vue3+vite开发调试

1.`三维坐标系`与`辅助坐标系`

1.1) 导入three和轨道控制器

// 导入threejs
import * as THREE from 'three'
//导入轨道控制器扩展库OrbitControls.js
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'

1.2）实例化轨道控制器和坐标辅助器

// 坐标辅助器 （xyz轴绘制） 5代表辅助线长度
const axesHelper = new THREE.AxesHelper(5)
//添加到场景
scene.add(axesHelper)

1.3）OrbitControls本质上就是改变相机的参数，比如相机的位置属性，改变相机位置也可以改变相机拍照场景中模型的角度，实现模型的360度旋转预览效果，改变透视投影相机距离模型的距离，就可以改变相机能看到的视野范围。

// 轨道控制器 两种方式
const controls = new OrbitControls(camera, document.body)
// 设置相机控件轨道控制器OrbitControls
const controls = new OrbitControls(camera, renderer.domElement);
// 如果OrbitControls改变了相机参数，重新调用渲染器渲染三维场景
controls.addEventListener('change', function () {renderer.render(scene, camera); //执行渲染操作
});//监听鼠标、键盘事件

2.`物体位移`与`父子元素`

2.1）相机位移动画基于(.position和.lookAt())属性，下面完成一段缓动动画

// 创建相机
const camera = new THREE.PerspectiveCamera(45, //视角window.innerWidth / window.innerHeight, //宽高比0.1, //近平面1000 //远平面
)
// 渲染函数
;(function animate() {camera.position.x += 0.1//相机直线运动动画requestAnimationFrame(animate)renderer.render(scene, camera)
})()// 渲染循环 相机圆周运动
let angle = 0; //用于圆周运动计算的角度值
const R = 100; //相机圆周运动的半径
;(function animate() {angle += 0.01;// 相机y坐标不变，在XOZ平面上做圆周运动camera.position.x = R * Math.cos(angle);camera.position.z = R * Math.sin(angle);renderer.render(scene, camera);requestAnimationFrame(render);
})()

2.2）父子元素

// 创建几何体
const geometry = new THREE.BoxGeometry(1, 1, 1)// 创建材质
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 })
// 创建父元素材质
const parMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 })
// 设置材质为线框模式
parMaterial.wireframe = true// 创建网络
const cube = new THREE.Mesh(geometry, material)
// 创建父元素网络
let parentCube = new THREE.Mesh(geometry, parMaterial)//添加到父元素上
parentCube.add(cube)
cube.position.set(-3, 0, 0)
parentCube.position.set(3, 0, 0)

3.物体旋转与缩放

// 设置放大缩小
cube.scale.set(2, 2, 2) //子放大2
parentCube.scale.set(2, 2, 2) // 父放大2  子基于2再放大2// 旋转
cube.rotation.x = Math.PI / 4 //父旋转
cube.rotation.x = Math.PI / 4 //子旋转，叠加父旋转

4.`设置响应式画布`与`全屏控制`

threejs渲染输出的结果就是一个Cavnas画布，canvas画布也是HTML的元素之一，这意味着three.js渲染结果的布局和普通web前端习惯是一样的。

通过renderer.domElement属性可以访问threejs的渲染结果，也就是HTML的元素canvas画布

4.1）非全屏渲染

const width = 800; //宽度
const height = 500; //高度
const camera = new THREE.PerspectiveCamera(30, width / height, 1, 3000);
renderer.setSize(width, height); //设置three.js渲染区域的尺寸(像素px)
renderer.render(scene, camera); //执行渲染操作
document.getElementById('wegbl').appendChild(renderer.domElement);

4.2）全屏渲染

const width = window.innerWidth; //窗口文档显示区的宽度作为画布宽度
const height = window.innerHeight; //窗口文档显示区的高度作为画布高度
const renderer = new THREE.WebGLRenderer();
document.body.appendChild(renderer.domElement);

4.3）响应式画布

// 监听窗口变化
window.addEventListener('resize', () => {// 重置渲染器宽高比renderer.setSize(window.innerWidth, window.innerHeight)// 重置相机宽高比camera.aspect = window.innerWidth / window.innerHeight// 更新相机投影矩阵camera.updateProjectionMatrix()
})

4.4）全屏控制

<template><div><button@click="toggleFullscreen"style="position: absolute; left: 10px; top: 10px; z-index: 999">点击全屏</button><button@click="outToggleFullscreen"style="position: absolute; left: 80px; top: 10px; z-index: 999">退出全屏</button></div>
</template>

// 按钮全屏
const toggleFullscreen = () => {// renderer.domElement.requestFullscreen()document.body.requestFullscreen()
}
// 退出全屏
const outToggleFullscreen = () => {document.exitFullscreen()
}