wordpress打赏分享seo辅助优化工具
嗨，我是小路。今天主要和大家分享的主题是“vue+threeJs 设置模型默认的旋转角度”。
今天主要对设置模型默认的旋转角度，来展示模型的视角。通常在一些3d模型展示的时候，可以用到。
模型实例展示图
1.Math.PI
定义：这个返回一个圆周率的值，相当于3.1415926.......
| 属性列表 | 列表说明 |
2.Quaternion
定义：四元数，一个实数，三个虚数；在 3D 图形学中，四元数常用于表示物体的旋转。它提供了一种无奇异点、无万向锁的旋转方式，特别适合用于 3D 动画和物理引擎中
| 属性列表 | 列表说明 |
| 轴 | x,y,z |
| 角度 | 90 |
二、实例代码
<!--创建一个四元换算-->
<template><div class="pageBox"><div class="leftBox" ref="leftRef"></div></div></template>
<script setup>
import { onMounted, onUnmounted, reactive, ref } from 'vue';
import * as THREE from 'three';
// 引入轨道控制器扩展库OrbitControls.js
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { getRandomColor, createLight } from '../utils/commonThree';
const leftRef = ref();
// 定义相机输出画布的尺寸(单位:像素px)
let width = window.innerWidth; //宽度
let height = window.innerHeight; //高度
// 创建3D场景对象Scene
const scene = new THREE.Scene();
//设置背景色
scene.background = new THREE.Color(0x646d59);const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
//三角形缩放过大时，会形成多种三角形形成的背景图
camera.position.z = 10;// 创建渲染器对象
const renderer = new THREE.WebGLRenderer();let tubes = [];const createTube = () => {const geometry = new THREE.BoxGeometry(5, 5, 5);const material = new THREE.MeshBasicMaterial({color: getRandomColor(),});const tube = new THREE.Mesh(geometry, material);return tube;
}onMounted(() => {initData()//添加相机空间const controls = new OrbitControls(camera, renderer.domElement);// 如果OrbitControls改变了相机参数，重新调用渲染器渲染三维场景controls.addEventListener('change', function () {renderer.render(scene, camera); //执行渲染操作});//监听鼠标、键盘事件renderer.setSize(width, height); //设置three.js渲染区域的尺寸(像素px)//将innerHTML置空，避免append重复添加渲染leftRef.value.innerHTML = ''leftRef.value.append(renderer.domElement);})
const initData = () => {createLight(scene);// for (let i = 1; i >= 0; i--) {const outSphere = createTube();tubes.push(outSphere);scene.add(outSphere);//设置模型旋转的角度const quaternion = new THREE.Quaternion();console.log('Math.PI',Math.PI)//第一个参数是轴 第二个是旋转的角度 Math.PI 是π，相当于Math.PI 3.141592653589793quaternion.setFromAxisAngle(new THREE.Vector3(0, 1, 0), Math.PI /7);outSphere.quaternion.multiplyQuaternions(quaternion, outSphere.quaternion);// }render();
}
function render() {requestAnimationFrame(render);// 旋转所有三角形// tubes.forEach(tube => {// tube.rotation.x += 0.01;// tube.rotation.y += 0.01;// tube.rotation.z += 0.01;// });renderer.render(scene, camera);
}
onUnmounted(() => {//释放内存renderer.dispose();
})</script>
<style scoped lang="less">
.pageBox {width: 100%;height: 100vh;padding: 0;margin: 0;display: flex;justify-content: space-between;align-items: center;.rightBox {width: 100%;height: 100%;}
}
</style>
三、复盘
今天又了解three.js 一些手册上运用不到的技能，继续努力！每天进步一点点！
都看到这里了，记得【点赞】+【关注】哟。
参考文章：
vue+threeJs 在开发中将部分常用的代码模块封装-CSDN博客