A框架如何在场景内使用OBJ/MTL文件旋转和缩小和缩小

发布于 2025-01-18 02:19:28 字数 2913 浏览 6 评论 0原文

我一直在寻找做三件特别的事情一段时间.. 1-围绕 obj 顺利旋转，dis 的最佳实践是什么 2- 放大和缩小 a 场景中加载的 obj/mtl 3-如何仅在检测到地板或表面或除相机之外的任何物体时才显示 obj/mtl 文件！

我试过什么？ 1- StackOverFlow 和 A-frame 文档上的所有链接和问题 2-这个缩放 3-这个滚轮

我想要实现的目标.. 1- 通过点击或触摸在网络和移动设备上放大 2-以正确的方式旋转物体这是我的代码`

 <script>
AFRAME.registerComponent('rotation-reader', {
  tick: (function () {
    var position = new THREE.Vector3();
    var quaternion = new THREE.Quaternion();

    return function () {
      this.el.object3D.getWorldPosition(position);
      this.el.object3D.getWorldQuaternion(quaternion);
    };
  })()
});

<script>
  AFRAME.registerComponent('zoom-controls', {
    schema: {
      min: {
        type: "number",
        default: 5
       },
     max: {
        type: "number",
        default: 120
       }
       },
       init: function () {
          let self = this;
    let sceneEl = document.querySelector("a-scene");
    self.camera = sceneEl.querySelector("#camera");
    console.log('min: ', self.data.min);
    console.log('max: ', self.data.max);
    window.addEventListener("click", event => {
      let amount = Math.sign(event.deltaY) * 5;
      let fov = Number(self.camera.getAttribute('camera').fov);
      let adjust = amount + fov;
      if (adjust < self.data.min) {
        adjust = self.data.min;
      }
      if (adjust > self.data.max) {
        adjust = self.data.max;
      }
      console.log('zoom: ', adjust);
      self.camera.setAttribute('camera', 'fov', adjust);
    });
  }
});

 <body style='margin : 0px; overflow: hidden;'>
<a-scene embedded arjs>
<!-- obj file  -->
<a-assets>
  <a-asset-item id="obj-Model" src="models/printing-press.obj"></a-asset-item>
  <a-asset-item id="obj-mtl" src="models/printing-press.mtl"></a-asset-item>
</a-assets>

<!-- <a-animation attribute='scale' dur='500' direction='alternate' from='1 1 1' to='3 3 3' begin='click' repeat='1'>
   </a-animation> -->
    <a-entity id="camera" wasd-controls rotation-reader camera 
       look-controls="pointerLockEnabled: true;"
       obj-model="obj: #obj-Model; mtl: #obj-mtl" zoom- 
      controls="min:5; max:140" fov="100" position="0 0 0"
      scale="0.01 0.01 0.01" rotation="0 0 0" 
      animation="property: 
      camera.zoom; dur=500; direction=alternate; from=1; to=2; 
      begin=click; repeat=1;
      easing:easeInOutQuad; loop: true; dir: alternate;">
</a-entity>

   <a-entity id="rig" position="0 0 11">
      <a-camera id="camera" look-controls="enabled:false"></a-camera>
      </a-entity>
   </a-scene>
 </body>

原文

i 've been searching for a while to do 3 particular things ..
1- do rotation around the obj smoothly and what is the best practice for dis
2- zoom in and zoom out on the obj/mtl loaded inside the a-scene
3- how to display the obj/mtl file only when it detects a floor or surface or anything but not camera!

what i've tried?
1- all links and problems here on StackOverFlow and A-frame documentation as well
2- this zoom
3- this wheel

what i want to achieve ..
1- zoom in out on web and mobile by clicking or touching
2- do the right way to rotate an object
this is my code `

 <script>
AFRAME.registerComponent('rotation-reader', {
  tick: (function () {
    var position = new THREE.Vector3();
    var quaternion = new THREE.Quaternion();

    return function () {
      this.el.object3D.getWorldPosition(position);
      this.el.object3D.getWorldQuaternion(quaternion);
    };
  })()
});

<script>
  AFRAME.registerComponent('zoom-controls', {
    schema: {
      min: {
        type: "number",
        default: 5
       },
     max: {
        type: "number",
        default: 120
       }
       },
       init: function () {
          let self = this;
    let sceneEl = document.querySelector("a-scene");
    self.camera = sceneEl.querySelector("#camera");
    console.log('min: ', self.data.min);
    console.log('max: ', self.data.max);
    window.addEventListener("click", event => {
      let amount = Math.sign(event.deltaY) * 5;
      let fov = Number(self.camera.getAttribute('camera').fov);
      let adjust = amount + fov;
      if (adjust < self.data.min) {
        adjust = self.data.min;
      }
      if (adjust > self.data.max) {
        adjust = self.data.max;
      }
      console.log('zoom: ', adjust);
      self.camera.setAttribute('camera', 'fov', adjust);
    });
  }
});

 <body style='margin : 0px; overflow: hidden;'>
<a-scene embedded arjs>
<!-- obj file  -->
<a-assets>
  <a-asset-item id="obj-Model" src="models/printing-press.obj"></a-asset-item>
  <a-asset-item id="obj-mtl" src="models/printing-press.mtl"></a-asset-item>
</a-assets>

<!-- <a-animation attribute='scale' dur='500' direction='alternate' from='1 1 1' to='3 3 3' begin='click' repeat='1'>
   </a-animation> -->
    <a-entity id="camera" wasd-controls rotation-reader camera 
       look-controls="pointerLockEnabled: true;"
       obj-model="obj: #obj-Model; mtl: #obj-mtl" zoom- 
      controls="min:5; max:140" fov="100" position="0 0 0"
      scale="0.01 0.01 0.01" rotation="0 0 0" 
      animation="property: 
      camera.zoom; dur=500; direction=alternate; from=1; to=2; 
      begin=click; repeat=1;
      easing:easeInOutQuad; loop: true; dir: alternate;">
</a-entity>

   <a-entity id="rig" position="0 0 11">
      <a-camera id="camera" look-controls="enabled:false"></a-camera>
      </a-entity>
   </a-scene>
 </body>

分享到QQ

分享到微博