本篇主要学习内容 :
三维坐标系与辅助坐标系物体位移与父子元素物体的缩放与物体的旋转设置响应式画布与全屏控制
点赞 + 关注 + 收藏 = 学会了
本文使用
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()
}
感谢：b站up主：老陈打码 以及 threejs中文网 教学及参考文档
到此基础入门（二）学习告一段落，道阻且长，行则将至。与诸君共勉。 ⭐️
