使用three.js更改alt場景中gltf模型的位置

Question

我已將gltf-model加載到a框架，並且想將其沿y軸移動20。我使用以下代碼：

問題出現在一個框架的場景中，實際上該對象被向上移動（在“之后”的圖像中檢查陰影和場景檢查器），但是它仍顯示在其先前位置。 似乎場景需要某種刷新。

問題是，如何使用Three.js代碼正確移動它？
之前： BEFORE1 BEFORE2

后：后 1后

碼：

<html>

<a-scene>
  <a-sky color="#f9f2cf"></a-sky>

  <!-- LIGHT a-frame no need to export from blender -->
  <a-light color="#fff" position="-8 5 0" intensity="3.5" light="intensity:2"></a-light>
  <a-light color="#fff" position="0 5 -14.163" intensity="3.5" light="intensity:2"></a-light>
  <a-light color="#fff" position="0 5 14.192" intensity="3.5" light="intensity:2"></a-light>
  <a-light color="#fff" position="0 -9.574 -2.443" intensity="3.5" light="intensity:2"></a-light>
  <a-light color="#fff" position="8.5 5 0" intensity="3.5" light="intensity:2"></a-light>

  <!-- CAMERA with wasd controls and circle cursor -->
  <a-camera fly look-controls wasd-controls position="17.020 16.700 7.958" rotation="-34.149 89.382 0.000">  
    <a-entity 
      cursor="fuse: true; fuseTimeout: 500"
      position="0 0 -1"
      geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03"
      material="color: black; shader: flat">
    </a-entity>
  </a-camera>

  <a-assets>
    <!-- GLTF animation samples -->
    <a-asset-item id="afb_animation" src="models/afb_animation.gltf"></a-asset-item>
  </a-assets>

  <a-entity id="_afb_animation" position="0 0 0"  gltf-model="#afb_animation" ></a-entity>
</a-scene>

<!-- script change model position -->
<script>

  $( document ).ready(function() {

    var xAxis = new THREE.Vector3(1,0,0);

    setTimeout(function(){
      console.log("rotation: done");

      document.querySelector('#_afb_animation').sceneEl.object3D.translateY(20);

    }, 3000);

  });
</script>

Answer 1

解決問題的一種方法是在position組件上使用setAttribute方法（此處為官方Wiki）。

例如：

entity.setAttribute('position', { x: 1, y: 2, z: 3 });

其中，entity是任何A-Frame實體。

例子1

因此，在下面的代碼中，我注冊了一個名為move-my-model的A框架組件，該組件允許我移動實體（在我的情況下是<a-box>實體，但它也適用於您的模型），向其中添加10 setTimeout在3000ms之后的y位置（例如您的代碼示例）：

 <script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script> <script> AFRAME.registerComponent('move-my-model', { init: function () { setTimeout( () => { let position = this.el.getAttribute("position") position.y += 10 this.el.setAttribute("position", position) }, 3000) } }) </script> <a-scene> <a-sky color="#f9f2cf"></a-sky> <!-- LIGHT a-frame no need to export from blender --> <a-light color="#fff" position="-8 5 0" intensity="3.5" light="intensity:2"></a-light> <a-light color="#fff" position="0 5 -14.163" intensity="3.5" light="intensity:2"></a-light> <a-light color="#fff" position="0 5 14.192" intensity="3.5" light="intensity:2"></a-light> <a-light color="#fff" position="0 -9.574 -2.443" intensity="3.5" light="intensity:2"></a-light> <a-light color="#fff" position="8.5 5 0" intensity="3.5" light="intensity:2"></a-light> <!-- CAMERA with wasd controls and circle cursor --> <a-camera fly look-controls wasd-controls position="17.020 16.700 7.958" rotation="-34.149 89.382 0.000"> <a-entity cursor="fuse: true; fuseTimeout: 500" position="0 0 -1" geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03" material="color: black; shader: flat"> </a-entity> </a-camera> <a-box move-my-model position="5.020 8.500 7.958" rotation="0 0 0" color="#4CC3D9"></a-box> </a-scene>

例子2

相反，如果您需要更復雜的動畫，那么當我第一次在A-Frame框架上工作時，我自己編寫了一個名為animation-move的A-Frame組件，即：

 <script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script> <script> AFRAME.registerComponent('animation-move', { schema: { path: { default: [], parse: function (value) { return JSON.parse(value); } }, animationStepTime: { type: 'int', default: 0 } }, init: function(){ this.next = 0; let object = this.el; for (let prop in this.data.path[this.next]) { object.setAttribute( prop, this.data.path[this.next][prop] ); } }, tick: function (time, timeDelta) { let updated = false if ( this.next >= this.data.path.length ) { this.next = 0; } let delta = this.data.animationStepTime / (16.7 * ((this.data.animationStepTime+timeDelta)/this.data.animationStepTime)); let object = this.el; for (let prop in this.data.path[this.next]) { let attr = object.getAttribute(prop); let nextStep = this.data.path[this.next][prop]; let xDelta = Math.abs( (this.next-1 >= 0) ? nextStep.x - this.data.path[this.next-1][prop].x : nextStep.x - this.data.path[this.data.path.length-1][prop].x)/delta; let yDelta = Math.abs( (this.next-1 >= 0) ? nextStep.y - this.data.path[this.next-1][prop].y : nextStep.y - this.data.path[this.data.path.length-1][prop].y)/delta; let zDelta = Math.abs( (this.next-1 >= 0) ? nextStep.z - this.data.path[this.next-1][prop].z : nextStep.z - this.data.path[this.data.path.length-1][prop].z)/delta; if (attr.x != nextStep.x) { if ((this.next-1 >= 0 && nextStep.x < this.data.path[this.next-1][prop].x) || (this.next == 0 && nextStep.x < this.data.path[this.data.path.length-1][prop].x)) { if (attr.x-xDelta < nextStep.x) { attr.x = nextStep.x; } else { attr.x -= xDelta; updated = true; } } else if (this.next-1 >= 0 && nextStep.x > this.data.path[this.next-1][prop].x || (this.next == 0 && nextStep.x > this.data.path[this.data.path.length-1][prop].x)) { if (attr.x+xDelta > nextStep.x) { attr.x = nextStep.x; } else { attr.x += xDelta; updated = true; } } else { attr.x = nextStep.x; } } if (attr.y != nextStep.y) { if (this.next-1 >= 0 && nextStep.y < this.data.path[this.next-1][prop].y || (this.next == 0 && nextStep.y < this.data.path[this.data.path.length-1][prop].y)) { if (attr.y-yDelta < nextStep.y) { attr.y = nextStep.y; } else { attr.y -= yDelta; updated = true; } } else if (this.next-1 >= 0 && nextStep.y > this.data.path[this.next-1][prop].y || (this.next == 0 && nextStep.y > this.data.path[this.data.path.length-1][prop].y)) { if (attr.y+yDelta > nextStep.y) { attr.y = nextStep.y; } else { attr.y += yDelta; updated = true; } } else { attr.y = nextStep.y; } } if (attr.z != nextStep.z) { if (this.next-1 >= 0 && nextStep.z < this.data.path[this.next-1][prop].z || (this.next == 0 && nextStep.z < this.data.path[this.data.path.length-1][prop].z)) { if (attr.z-zDelta < nextStep.z) { attr.z = nextStep.z; } else { attr.z -= zDelta; updated = true; } } else if (this.next-1 >= 0 && nextStep.z > this.data.path[this.next-1][prop].z || (this.next == 0 && nextStep.z > this.data.path[this.data.path.length-1][prop].z)) { if (attr.z+zDelta > nextStep.z) { attr.z = nextStep.z; } else { attr.z += zDelta; updated = true; } } else { attr.z = nextStep.z; } } object.setAttribute( prop, attr.x+' '+attr.y+' '+attr.z ); } if (!updated) { this.next++; } } }); </script> <a-scene> <a-sky color="#f9f2cf"></a-sky> <!-- LIGHT a-frame no need to export from blender --> <a-light color="#fff" position="-8 5 0" intensity="3.5" light="intensity:2"></a-light> <a-light color="#fff" position="0 5 -14.163" intensity="3.5" light="intensity:2"></a-light> <a-light color="#fff" position="0 5 14.192" intensity="3.5" light="intensity:2"></a-light> <a-light color="#fff" position="0 -9.574 -2.443" intensity="3.5" light="intensity:2"></a-light> <a-light color="#fff" position="8.5 5 0" intensity="3.5" light="intensity:2"></a-light> <!-- CAMERA with wasd controls and circle cursor --> <a-camera fly look-controls wasd-controls position="17.020 16.700 7.958" rotation="-34.149 89.382 0.000"> <a-entity cursor="fuse: true; fuseTimeout: 500" position="0 0 -1" geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03" material="color: black; shader: flat"> </a-entity> </a-camera> <a-box animation-move='path: [ {"position": {"x": 15.020, "y": 15.500, "z": 7.958}}, {"position": {"x": 10, "y": 17.000, "z": 5}} ]; animationStepTime: 1500' rotation="0 0 0" color="#4CC3D9"></a-box> </a-scene>

更復雜的例子

在這里，您可以找到我的A框架示例以及其他一些A框架組件，例如最后一個！ 此示例顯示了拉奎拉（意大利）聖瑪格麗特教堂的重建外立面，並帶有一些燈光動畫和交互式面板。

使用three.js更改alt場景中gltf模型的位置

問題描述

1 個解決方案

解決方案1
1 已采納 2018-02-24 00:20:00

例子1

例子2

更復雜的例子

使用three.js更改alt場景中gltf模型的位置

問題描述

1 個解決方案

解決方案1 1 已采納 2018-02-24 00:20:00

例子1

例子2

更復雜的例子

解決方案1
1 已采納 2018-02-24 00:20:00