Question

我将gltf模型加载到a-frame，我希望将其移动y轴20.我使用此代码：

问题出现在一帧场景中，实际上物体向上移动（检查阴影和场景检查器在＆＃34;＆＃34;图像后），但它仍然显示在它的前一个位置。看来场景需要某种刷新。

问题是，如何使用three.js代码正确移动它？
之前： BEFORE1 BEFORE2

代码：

<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>

使用three.js改变一帧场景中gltf模型的位置

0 个答案: