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

vue+threeJs 创建千色三角形宇宙

news 2025/5/22 6:43:08

嗨，我是小路。今天主要和大家分享的主题是“vue+threeJs 创建千色三角形宇宙”。

在做three.js项目练习，并进行梳理，搭建了这个千色三角形页面。

1.内存释放

注意：在vue项目最后，切换页面时，注意其中渲染内存的释放。当一些网格不需要显示时，也要将其内存释放出来。

onUnmounted(()=>{//释放内存renderer.dispose();
})

2.代码封装

注意：这个项目经过二次封装，很多可以用的功能，我都封装到了commonThree.js里面，可以参考文末的文章，其中生成随机颜色、生成三角形、生成光点都可以在封装的commonThree.js中找到。

二、实例代码

<!--创建100个随机颜色的三角形-->
<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,createTriangle } from '../utils/commonThree';
const leftRef = ref();
// 定义相机输出画布的尺寸(单位:像素px)
let width = window.innerWidth; //宽度
let height = window.innerHeight; //高度
// 创建3D场景对象Scene
const scene = new THREE.Scene();
//设置背景色
scene.background = getRandomColor(0.5,0.5);const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
//三角形缩放过大时，会形成多种三角形形成的背景图
camera.position.z = 1000;// 创建渲染器对象
const renderer = new THREE.WebGLRenderer();let triangles = [];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 = 1000; i >= 0; i--) {const triangle = createTriangle(getRandomColor(),2000,1000,1000);triangles.push(triangle);scene.add(triangle);}render();
}
function render() {requestAnimationFrame(render);// 旋转所有三角形triangles.forEach(triangle => {triangle.rotation.x += 0.01;triangle.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>