three.js实现三维爆炸效果

最新推荐文章于 2025-04-24 10:45:47 发布

是云呀！

最新推荐文章于 2025-04-24 10:45:47 发布

阅读量984

点赞数 3

分类专栏： three.js 文章标签： javascript 开发语言

本文链接：https://blog.youkuaiyun.com/yunbabac/article/details/138488388

版权

文章介绍了如何在Vue应用中使用THREE.js库进行3D模型的渲染，并实现了一个split函数，用于在点击按钮时切换模型的分解与组合状态，展示了如何操作3D对象的位置和变换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

主要是split函数

<template>
  <div class="app">
    <div class="btns">
      <button @click="split">{
   {
    isSplit ? "组合" : "分解" }}</button>
    </div>
    <div ref="canvesRef" class="canvas-wrap"></div>
  </div>
</template>

<script setup>
import {
    ref, onMounted } from "vue";
import * as THREE from "three";
import TWEEN from "@tweenjs/tween.js";

import {
    OrbitControls } from "three/addons/controls/OrbitControls.js";
import {
    GLTFLoader } from "three/addons/loaders/GLTFLoader.js";
const canvesRef = ref(null);
const canvasWidth = window.innerWidth;
const canvasHeight = window.innerHeight;
let scene;
let camera;
let renderer;
let axesHelper;
let cameraControls;
let model;
let isSplit = ref(false);
init(