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

vue+threeJs 绘制3D圆形

article 2025/9/9 10:19:52

嗨，我是小路。今天主要和大家分享的主题是“vue+threeJs 绘制圆形”。

今天找到一个用three.js绘制图形的项目，主要是用来绘制各种形状。

项目案例示意图

1.THREE.ShapeGeometry

定义：是 Three.js 中用于从 2D 路径形状（Shape）生成 3D 几何体的类。它非常适合用来创建复杂的 2.5D 或拉伸形状的几何体

2.启用 Wireframe

定义："wireframe" 是一种渲染模式，以线框的形式显示几何体的边，而不是填充面。这在可视化模型结构、调试复杂几何体或创建特定视觉效果时非常有用。

3.`THREE.ExtrudeGeometry`

定义：用于将 2D 形状挤压成 3D 几何体。原来的二位图如下：

参数	说明
steps	分层数
depth	拉伸深度
bevelEnabled	是否倒角
bevelThickness	控制倒角的厚度
bevelSize	0 无倒角 0.5 小倒角 1 标准倒角 2.0+ 强烈倒角
bevelSegments	倒角细分段数

二、实例代码

<!--绘制各种图形-->
<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 = 100;// 创建渲染器对象
const renderer = new THREE.WebGLRenderer();let material;const createCircle = (color = 0xff0000, x = 0, y = 0, z = 0, rx = 0, ry = 0, rz = 0, s = 1) => {const circleRadius = 50;const shape = new THREE.Shape();shape.moveTo(0, circleRadius);shape.quadraticCurveTo(circleRadius, circleRadius, circleRadius, 0);shape.quadraticCurveTo(circleRadius, -circleRadius, 0, -circleRadius);shape.quadraticCurveTo(-circleRadius, -circleRadius, -circleRadius, 0);shape.quadraticCurveTo(-circleRadius, circleRadius, 0, circleRadius);// const geometry = new THREE.ShapeGeometry(shape,10000);const extrudeSettings = {steps: 2,           // 分层数depth: 10,           // 拉伸深度bevelEnabled: true,// 是否倒角bevelThickness: 1,//控制倒角的厚度bevelSize: 0.5,//0 无倒角  0.5 小倒角  1 标准倒角  2.0+ 强烈倒角bevelSegments: 3 //倒角细分段数};const geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);material = new THREE.MeshPhongMaterial({ color: color, side: THREE.DoubleSide, wireframe: true });// material = new THREE.MeshStandardMaterial({ color: color, side: THREE.DoubleSide, wireframe: true })const circle = new THREE.Mesh(geometry, material);circle.scale.set(s, s, s);return circle;
}onMounted(() => {initData()//添加相机空间const controls = new OrbitControls(camera, renderer.domElement);controls.enableDamping = true; // 开启阻尼controls.dampingFactor = 0.02; // 设置阻尼系数controls.autoRotate = true; // 开启自动旋转// 如果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);const circle = createCircle(0x00f000, 120, 250, 0, 0, 0, 0, 1);scene.add(circle);render();
}
function render() {requestAnimationFrame(render);renderer.render(scene, camera);
}
onUnmounted(() => {//释放内存renderer.dispose();
})</script>
<style scoped lang="less">
.pageBox {width: 100%;height: 100vh;padding: 0;margin: 0;position: fixed;top: 0;left: 0;display: flex;justify-content: space-between;align-items: center;.rightBox {width: 100%;height: 100%;}
}
</style>