chatgpt辅助修改Three.js电器柜拆分代码

于 2024-04-16 23:02:34 发布
阅读量915 收藏 31
点赞数 34
文章标签： javascript 开发语言 ecmascript chatgpt 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44111751/article/details/137844104
版权

chatgpt辅助修改Three.js电器柜拆分代码

记录一次chatgpt辅助修改代码的经历

简单讲解一下我的需求，我在建模软件blender之中给我的电器柜做了一个拆分动画，将电器柜里面的零件拆出，分布在空间之中，用于可视化查询一些零件信息，但是该电器柜模型中的每一个零件都有独立动画，而我的原始代码只能播放其中的一个零件的动画。

简单来说，我需要让我原来只能播放一个零件动画的代码，变成能播放全部零件动画的代码

这是我原来的代码，由于用于demo演示，所以写的很屎。

<template>
  <div id="container">
    <div>
      <button class="btn" @click="split">拆分</button>
    </div>
    <div>
      <button class="btn" @click="combine">复原</button>
    </div>
  </div>
</template>

<script>
/* eslint-disable */
import * as THREE from 'three'
import {OrbitControls} from 'three/addons/controls/OrbitControls.js'
import {GLTFLoader} from 'three/addons/loaders/GLTFLoader.js'

let mixer
let clock
let ani
let lock = 0
export default {
  name: 'App',
  methods:{
    split(){
      if(lock==1){
        return
      }
      let action = mixer.clipAction(ani)
      action.timeScale = 1;
      action.paused=false;
      action.play()
      lock=1
      setTimeout(function() {
        // 暂停动画
        action.paused = true;
        lock=0
      }, 4000); // 等待1000毫秒（1秒）
    },
    combine(){
      if(lock==1){
        return
      }
      let action = mixer.clipAction(ani)
      action.timeScale = -1;
      action.paused=false;
      action.play()
      lock=1
      setTimeout(function() {
        // 暂停动画
        action.paused = true;
        lock=0
      }, 3990); // 等待1000毫秒（1秒）
    },
    init(){
      // 创建时钟
      clock = new THREE.Clock()
      // 创建场景
      const scene = new THREE.Scene();
      
      const url = '电器柜拆分.glb';

      // 创建相机
      const camera = new THREE.PerspectiveCamera();
      camera.position.set(-26,30,50)
    

      // 添加环境光
      const ambientLight = new THREE.AmbientLight(0xffffff, 1);
      const pointLight1 = new THREE.PointLight(0xffffff,1000,0);
      const pointLight2 = new THREE.PointLight(0xffffff,1000,0);
      const pointLight3 = new THREE.PointLight(0xffffff,1000,0);
      const pointLight4 = new THREE.PointLight(0xffffff,1000,0);
      const pointLight5 = new THREE.PointLight(0xffffff,2000,40);

      pointLight1.position.set(-25,5,25)
      pointLight2.position.set(-25,5,-25)
      pointLight3.position.set(25,5,25)
      pointLight4.position.set(25,5,-25)
      pointLight5.position.set(0,20,20)
      scene.add(pointLight1);
      scene.add(pointLight2);
      scene.add(pointLight3);
      scene.add(pointLight4);
      scene.add(pointLight5);
      scene.add(ambientLight);

      var gridHelper = new THREE.GridHelper(200, 100, 0x888888, 0x888888);
      gridHelper.position.x=0;
      gridHelper.position.z=-10;
      scene.add(gridHelper);

      // 创建渲染器
      const renderer = new THREE.WebGLRenderer({
          alpha: true, // 开启透明度
          antialias: true // 抗锯齿
      });
      var container = document.getElementById('container');
      container.appendChild(renderer.domElement);
      renderer.setSize(container.clientWidth,container.clientHeight)

      // 加载 glb 格式的 3D 模型
      const loader = new GLTFLoader();
      loader.load(
      url,
      (gltf) => {
          gltf.scene.scale.set(0.2, 0.33, 0.2); // 缩小模型
          gltf.scene.position.set(5,3,0); // 将模型位置移到原点处
          mixer = new THREE.AnimationMixer(gltf.scene)
          ani = gltf.animations[0]
          //mixer.clipAction(gltf.animations[0]).play()
          scene.add(gltf.scene);
      },
      (xhr) => {
          // 加载过程中的回调函数
          console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
      },
      (error) => {
          // 加载失败的回调函数
          console.error("Failed to load model", error);
      }
      );

      const controls = new OrbitControls(camera,renderer.domElement)
      controls.target = new THREE.Vector3(0, 10, 0)
      // 渲染场景
      const animate = () => {
      controls.update();
          requestAnimationFrame(animate);
          if (mixer) mixer.update(clock.getDelta())
          renderer.render(scene, camera);
      };

      animate();
    }
  },
  mounted(){
    this.init();
  }
}
</script>

<style>
#container{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.btn{
  width: 100px;
  height: 50px;
  margin-bottom: 20px;
}
</style>

该代码运行效果如下

在这里插入图片描述

随后我利用chatgpt修改我的代码

我先把我的代码告诉他让他记住

在这里插入图片描述

为了让他记得深刻一点，并看看他理解的对不对，我让他讲解一下

在这里插入图片描述

随后我将我的需求告诉他

在这里插入图片描述

随后chatgpt为我生成修改后的代码

<template>
  <div id="container">
    <div>
      <button class="btn" @click="split">拆分</button>
    </div>
    <div>
      <button class="btn" @click="combine">复原</button>
    </div>
  </div>
</template>

<script>
import * as THREE from 'three'
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'

let mixer
let clock
let animations = []
let lock = 0

export default {
  name: 'App',
  methods: {
    split() {
      if (lock == 1) {
        return
      }
      lock = 1
      animations.forEach((ani) => {
        let action = mixer.clipAction(ani)
        action.timeScale = 1
        action.paused = false
        action.play()
      })
      setTimeout(function () {
        animations.forEach((ani) => {
          let action = mixer.clipAction(ani)
          action.paused = true
        })
        lock = 0
      }, 4000)
    },
    combine() {
      if (lock == 1) {
        return
      }
      lock = 1
      animations.forEach((ani) => {
        let action = mixer.clipAction(ani)
        action.timeScale = -1
        action.paused = false
        action.play()
      })
      setTimeout(function () {
        animations.forEach((ani) => {
          let action = mixer.clipAction(ani)
          action.paused = true
        })
        lock = 0
      }, 3990)
    },
    init() {
      clock = new THREE.Clock()
      const scene = new THREE.Scene()
      const camera = new THREE.PerspectiveCamera()
      camera.position.set(-26, 30, 50)

      const ambientLight = new THREE.AmbientLight(0xffffff, 1)
      const pointLight1 = new THREE.PointLight(0xffffff, 1000, 0)
      const pointLight2 = new THREE.PointLight(0xffffff, 1000, 0)
      const pointLight3 = new THREE.PointLight(0xffffff, 1000, 0)
      const pointLight4 = new THREE.PointLight(0xffffff, 1000, 0)
      const pointLight5 = new THREE.PointLight(0xffffff, 2000, 40)

      pointLight1.position.set(-25, 5, 25)
      pointLight2.position.set(-25, 5, -25)
      pointLight3.position.set(25, 5, 25)
      pointLight4.position.set(25, 5, -25)
      pointLight5.position.set(0, 20, 20)
      scene.add(pointLight1)
      scene.add(pointLight2)
      scene.add(pointLight3)
      scene.add(pointLight4)
      scene.add(pointLight5)
      scene.add(ambientLight)

      var gridHelper = new THREE.GridHelper(200, 100, 0x888888, 0x888888)
      gridHelper.position.x = 0
      gridHelper.position.z = -10
      scene.add(gridHelper)

      const renderer = new THREE.WebGLRenderer({
        alpha: true,
        antialias: true
      })
      var container = document.getElementById('container')
      container.appendChild(renderer.domElement)
      renderer.setSize(container.clientWidth, container.clientHeight)

      const loader = new GLTFLoader()
      loader.load(
        '电器柜拆分.glb',
        (gltf) => {
          gltf.scene.scale.set(0.2, 0.33, 0.2)
          gltf.scene.position.set(5, 3, 0)
          mixer = new THREE.AnimationMixer(gltf.scene)
          gltf.animations.forEach((ani) => {
            animations.push(ani)
          })
          scene.add(gltf.scene)
        },
        (xhr) => {
          console.log((xhr.loaded / xhr.total) * 100 + '% loaded')
        },
        (error) => {
          console.error('Failed to load model', error)
        }
      )

      const controls = new OrbitControls(camera, renderer.domElement)
      controls.target = new THREE.Vector3(0, 10, 0)

      const animate = () => {
        controls.update()
        requestAnimationFrame(animate)
        if (mixer) mixer.update(clock.getDelta())
        renderer.render(scene, camera)
      }

      animate()
    }
  },
  mounted() {
    this.init()
  }
}
</script>

<style>
#container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.btn {
  width: 100px;
  height: 50px;
  margin-bottom: 20px;
}
</style>

直接将代码粘贴进去源文件中运行

Boom！！直接就完成了，还帮我解决了我头疼的一些小bug！！太爽！~~

下面是修改完的效果

在这里插入图片描述

Killua4396
关注
  • 34
    点赞
  • 踩
  • 31
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
THREEJS实现动态可分割的圆环体
u011575498的博客
01-04 1860
最近接触了下threeJs， 记录下学习总结，以便后期查看，也希望能和更多的小伙伴多多交流. 因为没有深入研究，写作过程中，难免会有错误的地方，如果错误还请各位路过的大佬及时指点。 实现的效果 （三个圆环体的大小会随着数据的变化而变化） 代码详解 ...
three.js 利用uv和ThreeBSP制作一个快递柜功能
10-14
在本教程中，我们将探讨如何使用three.js库结合uv映射和ThreeBSP技术来创建一个功能性的快递柜。Three.js是一个流行的JavaScript库，用于在Web浏览器中进行3D图形编程。UV映射是3D建模中的一种技术，用于将2D纹理...
3D模型爆炸分解及动画实现【Three.js】
新缸中之脑
09-14 1150
你是否曾想展示一些很酷的发动机的 3D 模型？这是一种可行的方法，使用一些非常基本的数学：一个简单的分解视图💣为此，我们将使用 React-Three-Fiber，但它可以与原生 Three.js 配合使用（它与 r3f 生态系统没有深度绑定，只是对我来说迭代速度更快）。推荐：用快速搭建可编程3D场景。
grunt-splitthreejsmodel:一个 grunt 插件，用于将 Threejs json 模型文件拆分为几何文件和对象 json 文件的层次结构
06-02
grunt-splitthreejsmodel 一个 grunt 插件，用于将 Threejs json 模型文件拆分为几何文件和对象 json 文件的层次结构。 与结合使用。 用法 入门 这个插件需要 Grunt ~0.4.5 如果您以前没有使用过 ，请务必查看指南，因为它解释了如何创建以及安装和使用 Grunt 插件。 熟悉该过程后，您可以使用以下命令安装此插件： npm install bunnybones1/grunt-splitthreejsmodeljs --save-dev 安装插件后，可以使用以下 JavaScript 代码在 Gruntfile 中启用它： grunt . loadNpmTasks ( 'grunt-splitthreejsmodel' ) ; “splitthreejsmodel”任务 概述 在项目的 Gruntfile 中，将名为split
Three.js 实现模型材质分解，拆分，拆解效果
ZHANG_666
08-21 1443
three.js 实现模型拆解，拆分，分解效果的具体实现方法 three.js 修改材质位置不生效问题解决
【愚公系列】2023年08月 Three.js专题-粒子特效案例
热门推荐
时光隧道
08-13 1万+
粒子特效是一种视觉效果，可以模拟出许多粒子在空间中的运动和变化，形成各种美丽的图案和动态效果。常见的粒子特效包括烟雾、火焰、水流、星空、气泡等，可以在电影、电视、游戏等领域中得到广泛应用。实现粒子特效，需要使用计算机图形学技术，如粒子系统、计算流体力学等。粒子平面是指在计算机图形学中，用于呈现粒子特效的平面。粒子特效是通过模拟大量的粒子运动和变化来实现的，而为了在视觉上呈现这些粒子，需要将它们以一定的规律排列在一个平面上，使得观众可以看到这些粒子的动态变化。因此，粒子平面常常被用作粒子特效的载体，通过对平面
基于three.js + canvas实现爱心代码+播放器效果.zip
最新发布
03-18
基于three.js + canvas实现爱心代码+播放器效果.zip 基于three.js + canvas实现爱心代码+播放器效果.zip 基于three.js + canvas实现爱心代码+播放器效果.zip 基于three.js + canvas实现爱心代码+播放器效果.zip 基于...
Three.js-webgl物联网粮仓3D可视化
03-12
本项目名为"Three.js-webgl物联网粮仓3D可视化"，是基于WebGL技术的3D可视化管理系统，利用了Three.js库以及Vue.js框架，旨在实现对粮仓的高效管理和监控。通过JavaScript语言进行编程，结合物联网技术，该系统能够...
基于vue3，three.js,3D智慧园区
11-09
**Three.js**: Three.js是一个强大的JavaScript库，用于在Web浏览器中创建和展示3D对象。它简化了WebGL的使用，提供了一个面向对象的接口，用于创建场景、几何体、材质、光源等。在“3D智慧园区”项目中，Three.js被...
three.js 可视化大屏 3D场馆模型Demo
02-26
在本项目中，"three.js 可视化大屏 3D场馆模型Demo"是一个基于最新前端技术栈的实现，旨在帮助新手学习如何利用three.js创建3D场馆模型，并将其应用于大屏幕展示。这个项目结合了Vue3、Vite和TypeScript等现代Web...
three.js 切割模型动画，并且播放
AlZhuo的博客
12-07 3093
因为公司没有人会用blender，所以动画都是用max做的，动画师一般都是会把多个动画做在一个模型上，然后程序中需要使用的话，调用指定的帧数。unity可以把动画切割成animationclip。最近公司使用了需要在three.js中添加一个模型，模型带了一段长动画，所以我这边就是需要把模型的指定帧数之间的动画切割出来。 接下来演示部分： 1.准备素材一段带动画的素材 初始化，加入相机，灯光模型等元素 function init() { var canHeight = window.
webgl+three.js，学习笔记，画一个立方体+解析
u013035708的博客
08-28 381
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>物体</title> <script src="js/Three.js"></script> <style type="text/css"> div#canvas-frame {
vue+three.js 地球入场动画 楼层拆分
qq_37887139的博客
11-01 1043
开场添加星空，地球在星空中入场然后切换到楼宇 可点击实现楼层拆分 报警精灵闪烁。
three.js 生成3D圆环（可分割）
qq_43156537的博客
08-27 1443
2.分段宽度通过resData中的百分比值决定。生成个类似这样的圆盘，高度可调整，可以分段。思路：先生成2D圆环，通过拉伸生成3D圆环。1.图形高度通过拉伸时Depth决定。
Threejs3D模型爆炸效果
qq_40147088的博客
03-28 4311
先看下效果 一、原理说明 让各个子mesh沿着一个固定的方向移动，这个方向就是该子mesh的包围盒中心与爆炸中心（模型整体的包围盒中心）的连线。移动轨迹如下图 二、代码如下 import{ Vector3, Box3, Mesh, LineBasicMaterial, Geometry, Line } from 'three' /** * 使用方法： * 1、调用setSplitModel函数将要拆分的模型传入预处理 * 然后两种控制爆炸方式 *
Threejs学习：裁剪( clip编 )
太古时代的专栏
05-23 4353
参考：webgl_clipping_intersection.html // 裁剪点 var clipPlanes = [ new THREE.Plane( new THREE.Vector3( 1, 0.5, 0 ), 0 ), new THREE.Plane( new THREE.Vector3( 0, - 1, 0 ), 0 ), new THREE.Plane( new THR...
Three.js实战项目 模型拆解项目
qq_39503511的博客
04-11 6314
Three.js 模型拆解项目概述初始化场景，相机，灯光，天空盒拆解模型原理拆解模型合并模型模型文本鼠标移动时更新文本 概述 写一个Three.js 模型拆解项目，先看视频效果 three.js 模型拆解项目 初始化场景，相机，灯光，天空盒 此部分代码可在博客中的智慧城市项目中搜索到，就不在重复粘贴了，都是一样的，天空盒的素材是在three的demo素材里面，随便用一个就好了，这个无关紧
THREE.JS 根据起始帧将一个AnimationClip对象分割成多个AnimationClip
qq_21222737的博客
11-01 2825
THREE.JS 根据起始帧将一个AnimationClip对象分割成多个AnimationClip 因为从3dsMax里面导出的模型只支持一个动画，如果需要对多个动画进行单独控制的话就必须将其切割成多个AnimationClip对象，其实原理跟数组截取是一样的。 /** *根据起始帧将当前动画切割成多段动画 * @param clips 起始帧数组[[起始帧，结束帧],[起始帧，结束帧]....
精通Three.js：WebGL的JavaScript 3D库实战指南
"Learning Three.js the JavaScript 3D Library for WebGL" 本书《Learning Three.js - the JavaScript 3D Library for WebGL》是Three.js开发指南的第二版，由Jos Dirksen撰写，旨在帮助读者在浏览器中创建令人...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值