首页 > 其他分享 >three.js 使用 getWorldPosition 获取世界坐标

three.js 使用 getWorldPosition 获取世界坐标

时间:2023-03-31 11:34:42浏览次数:43  
标签:世界坐标 getWorldPosition ob three worldPosition nudoHistory 解组 children

记录一下项目中的需求,组合后旋转,解组后需要模型位置为旋转后位置

  disCombinationModel (ModelArry, type) {
    // 判断是否有选中
    if (ModelArry.length === 1) {
      const ob = ModelArry[0]
      // 判断是否是组合
      if (ob.typeName === 'combination') {
        const { position, rotation } = ob
        // 历史记录,用于上一步、下一步
        let nudoHistory = {
          operation: [],
          type: 'DisCombinationModel' // 解组动作
        }
        // 循环组合内的children
        while (ob.children.length > 0) {
          const children = ob.children[0]
          // 调用updateMatrixWorld()保证图形矩阵正确
          scene.scene.updateMatrixWorld(true)
          // 模型的.getWorldPosition()方法获得该模型在世界坐标下的三维坐标
          var worldPosition = new THREE.Vector3()
          children.getWorldPosition(worldPosition)
          // 设置children的坐标
          children.position.set(worldPosition.x, worldPosition.y, worldPosition.z)
          // 设置children旋转角为 组合旋转角
          children.rotateY(rotation.y)
          nudoHistory.operation.push(children)
          InitializeModel.geometryGropu.add(children)
          ob.remove(children)
        }
        if (type) {
          this.addHistory(nudoHistory)
        } else {
          this.addRedoHistory(nudoHistory)
        }
        InitializeModel.geometryGropu.remove(ob)
        this.removeAllHelperLine() // 移除组合的选中状态辅助线
        this.clearCheckEdModelArry() // 清除选中数组
      } else {
        this.$Msg('error', '只有组合才能进行解组!')
      }
    }
  },

  实现效果

旋转前

 

旋转后

解组后

 

标签:世界坐标,getWorldPosition,ob,three,worldPosition,nudoHistory,解组,children
From: https://www.cnblogs.com/fanjlqinl/p/17275754.html

相关文章

  • threejs中渲染html
    背景最近中看threejs的时候发现一个好玩的事情,可以在threejs中渲染普通的html。threejs本身可以做各种炫酷的界面,但是与用户交互的时候写起来没有用dom实现方便,但是如果可以将已有的dom渲染到threejs中,那么就可以实现非常炫酷的界面,也能提高用户的体验。依赖介绍这里使用react......
  • threejs-camera&controls&renderer(WebGLRenderer)
    ArrayCamera:一般用于,展示益、一个场景存在多个物体,每个物体各自拥有自己的视角的这种场景。CubeCamera:一次性创建六个方位的相机(类似于正方体六个面,立方全景图中所有方......
  • echarts export three types picture: png、html、svg
    import'./styles.css'importechartsfrom'echarts'import{saveAs}from'file-saver'importJSPDFfrom'jspdf'import{init}from'canvas-to-blob'init(......
  • ThreeSum
    packageAigorithmStudy.DoublePointer;importjava.util.ArrayList;importjava.util.Arrays;importjava.util.List;/***15.三数之和*给你一个整数数组num......
  • threejs加载带材质的fbx格式模型
    threejs加载带材质的fbx格式模型loadFBX(){letmanager=newLoadingManager();manager.addHandler(/\.tga$/i,newTGALoader());......
  • 记录--用three.js渲染真实的下雨效果
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助建模首先我们需要一些贴图素材贴图素材一般可以在3dtextures网站上找到,这里我找了2份,包含了墙的法线贴......
  • parcel工具搭建three.js开发环境及报错填坑
    parcel工具搭建three.js开发环境今天用parcel工具搭建了一个threejs开发环境,遇到了一点小坑,简单的做一个记录。首先贴出正确的操作姿势mkdirthreeJsDemocdthreeJsdem......
  • threejs之检测拖动模型和停止拖动模型以及鼠标缩放事件
       controls.value.addEventListener('start',startEvent) controls.value.addEventListener('end',endEvent); 这样子给轨道控制器绑定事件后即可。......
  • 记录--我在前端干工地(three.js)
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助前段时间接触了Three.js后,试着用他加载了一些模型three.js初体验简陋的了解了一下three.js的相关使用,并......
  • threejs点击事件(不同大小的画布)
     threejs点击事件(不同大小的画布) 一、直接是window宽高的画布,点击交互的方案onClick(event){event.preventDefault();this.mouse.x=(event.clie......