Three.js 大屏低代码

huangju1314

已于 2022-08-28 19:27:12 修改

阅读量448

点赞数

文章标签：编辑器前端

于 2022-08-28 19:25:08 首次发布

原文链接：https://www.huangxiaoju.com/index.php/2022/08/27/three-js-%e5%a4%a7%e5%b1%8f%e5%8f%af%e8%a7%86%e5%8c%96%e7%bc%96%e8%be%91%e4%b8%80/

版权

Todo

原文：
https://www.huangxiaoju.com/index.php/2022/08/27/three-js-%e5%a4%a7%e5%b1%8f%e5%8f%af%e8%a7%86%e5%8c%96%e7%bc%96%e8%be%91%e4%b8%80/

加载模型

模型点击高亮

模型点击拖拽位置

使用DragControls和TransformControls两个方法

  //园区模型
  let parkModel = new Promise((resolve) => {
    let myModel = []
    gltfLoader.load("./models/cg1-1.glb", (gltf) => {
      gltf.scene.traverse((child) => {
        if (child.userData.name && child.userData.name == 'Obj3d66-1464968-3108-357') {
          myModel.push(child)
        }
      });

      // gltf.scene
      arrModels.push(gltf.scene);
      let transformControls = new TransformControls(camera, renderer.domElement)
      let dragControls = new DragControls(myModel, camera, renderer.domElement)
      scene.add(transformControls)
	  
	  // 鼠标划过
      dragControls.addEventListener('hoveron', function (event) {
        transformControls.attach(event.object)
      })
	 
	 // 鼠标移开
      dragControls.addEventListener('hoveroff', function (event) {
        transformControls.detach()
      })


      dragControls.addEventListener('dragstart', function (event) {
        controls.enabled = false
      })

      dragControls.addEventListener('drag', function (event) {
        renderer.render(scene, camera)
      })

      dragControls.addEventListener('dragend', function (event) {
        controls.enabled = true
      })

      transformControls.addEventListener('mouseDown', (event) => {
        controls.enabled = false
      })

      transformControls.addEventListener('mouseUp', (event) => {
        controls.enabled = false
      })
      scene.add(gltf.scene)

    });
  });