网站后台管理系统查询,温州专业营销网站费用,天津网约车,做网站服务器有哪些本篇主要学习内容 :
三维坐标系与辅助坐标系物体位移与父子元素物体的缩放与物体的旋转设置响应式画布与全屏控制
点赞 关注 收藏 学会了 本文使用 Three.js 的版本#xff1a;171 基于 Vue3vite开发调试 1.三维坐标系与辅助坐标系
1.1) 导入three和轨道控制器
// 导入…本篇主要学习内容 :
三维坐标系与辅助坐标系物体位移与父子元素物体的缩放与物体的旋转设置响应式画布与全屏控制
点赞 关注 收藏 学会了 本文使用 Three.js 的版本171 基于 Vue3vite开发调试 1.三维坐标系与辅助坐标系
1.1) 导入three和轨道控制器
// 导入threejs
import * as THREE from three
//导入轨道控制器扩展库OrbitControls.js
import { OrbitControls } from three/examples/jsm/controls/OrbitControls.js1.2实例化轨道控制器和坐标辅助器
// 坐标辅助器 xyz轴绘制 5代表辅助线长度
const axesHelper new THREE.AxesHelper(5)
//添加到场景
scene.add(axesHelper)1.3OrbitControls本质上就是改变相机的参数比如相机的位置属性改变相机位置也可以改变相机拍照场景中模型的角度实现模型的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 全屏控制
templatedivbuttonclicktoggleFullscreenstyleposition: absolute; left: 10px; top: 10px; z-index: 999点击全屏/buttonbuttonclickoutToggleFullscreenstyleposition: 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中文网 教学及参考文档 到此基础入门二学习告一段落道阻且长行则将至。与诸君共勉。 ⭐️
