vue+threeJs 绘制3D圆形

news2025/6/6 11:21:57

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