? ? ? ? 嗨，我是小路。今天主要和大家分享的主題是“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>

三、總結

? ? ? ?持續的刻意練習，感覺每天都有新的收獲！不僅學會了如何繪制圓形，還初步掌握，如何將2D圖形拉伸成3D效果。

都看到這里了，記得【點贊】+【關注】喲。