当前位置：首页 > news >正文

vue+threeJs 创建多色几何体+加载obj模型+跳转ojb模型中心

news 来源：原创 2025/5/29 12:36:05

嗨，我是小路。今天主要和大家分享的主题是“vue+threeJs 创建多色几何体+加载obj模型+跳转ojb模型中心”。

项目案例示意图

1.创建网格

定义：创建辅助网格主要用以下方法执行，其中有四个参数

new THREE.GridHelper(大小，分割段数，中心线轴颜色，网格颜色)

属性列表	列表说明
size	大小
divisions	分割段数
colorCenterLine	颜色中心线
colorGrid	颜色网格

2.加载obj模型并调整模型中心

定义：获取模型中心，需用用到box3中的getCenter来获取。

const group = new THREE.Group();
const manager = new THREE.LoadingManager();const loader = new OBJLoader(manager);loader.load('./models/model.obj', function (object) {// 计算几何体中心const box = new THREE.Box3().setFromObject(object);const center = box.getCenter(new THREE.Vector3());console.log('obj', object);// 将模型几何顶点平移到中心点位置object.position.set(-center.x, -center.y, -center.z);object.position.y = 100;//然后将模型套入groupgroup.add(object);scene.add(group);})

二、实例代码

<!--加载obj-->
<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';
import { OBJLoader } from "three/addons/loaders/OBJLoader.js";
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(45, width / height, 1, 10000);
//三角形缩放过大时，会形成多种三角形形成的背景图
camera.position.x = 100;
camera.position.y = 300;
camera.position.z = 600;camera.up.x = 0;
camera.up.y = 1;
camera.up.z = 0;
camera.lookAt({x: 0,y: 0,z: 0
});// 创建渲染器对象
const renderer = new THREE.WebGLRenderer();let tubes = [];
let objMesh;
const group = new THREE.Group();
const createObj = () => {const manager = new THREE.LoadingManager();const loader = new OBJLoader(manager);loader.load('./models/model.obj', function (object) {// 计算几何体中心const box = new THREE.Box3().setFromObject(object);const center = box.getCenter(new THREE.Vector3());console.log('obj', object);// 将模型几何顶点平移到中心点位置object.position.set(-center.x, -center.y, -center.z);object.position.y = 100;//然后将模型套入groupgroup.add(object);scene.add(group);})const geometry = new THREE.BoxGeometry(30, 30, 30);console.log(geometry);const material = [new THREE.MeshBasicMaterial({color: getRandomColor()}),new THREE.MeshBasicMaterial({color: getRandomColor()}),new THREE.MeshBasicMaterial({color: getRandomColor()}),new THREE.MeshBasicMaterial({color: getRandomColor()}),new THREE.MeshBasicMaterial({color: getRandomColor()}),new THREE.MeshBasicMaterial({color: getRandomColor()}),];const tube = new THREE.Mesh(geometry, material);tube.position.set(0, 0, 0);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);})
let outSphere;
const initData = () => {createLight(scene, 100, 100, 200);outSphere = createObj();scene.add(outSphere);//创建网格辅助线const helper = new THREE.GridHelper(1000, 50, getRandomColor(), getRandomColor());console.log('helper', helper);scene.add(helper);render();
}
function render() {requestAnimationFrame(render);group.rotation.y += 0.01;outSphere.rotation.y += 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>