javascript - Aframe 使用 Three.js 更改对象位置

Question

我正在 A-frame 上开发一款游戏。在我的游戏中，我需要制作一个射击效果，我使用枪模型并将其放置在光标后面，对点击事件进行编码，以便对象将重新定位在枪前面并沿着光标的方向移动。

我正在使用setAttribute和 requestAnimationFrame :-

renderObj: function(obj){
        window.requestAnimationFrame(function() {
        renderObj(obj);
        });
    }

创建子弹沿特定方向移动的动画效果。

当函数再次调用自身时，我无法使用 setAttribute 检索对象的位置

var objWorldPos = new THREE.Vector3();
objWorldPos.setFromMatrixPosition(obj.object3D.matrixWorld);

每当我使用 setAttribute 更改位置时，我也会将项目符号标记中的属性更新为 obj.attributes.position="x y z";我知道这不是最佳实践，因为我应该能够恢复位置，所以有没有办法可以使用 Three.js 设置元素的位置并使用 THREE.Vector3()'s object3D.matrixWorld 检索它方法...

任何帮助将不胜感激!

Answer 1

就我个人而言，我不会混合在 Three.js 和 a-frame 中定位对象，当通过 object3D.position.set() 在 Three.js 中设置位置时，我无法检索它通过 getAttribute('position') 方法。
您可以通过设置来设置位置:

el.object3D.position.x = 5;
//OR
el.object3D.position.set(5,4,0);
//OR BY THE WORLD MATRIX AS 
var matrix = new THREE.Matrix4();
matrix.set(11,12,13,14,
           21,22,23,24,
           31,32,33,34,
           41,42,43,44);
el.object3D.applyMatrix(matrix);
//RETRIEVE THE LOCATION:
console.log(el.object3D.position.x);
console.log(el.object3D.position);
console.log(el.object3D.matrixWorld);

据我所知，在这种情况下，Matrix4 是 transformation matrix 。您可以在three.js documentation中获取明确的详细信息。 ，以及 a-frame documentation 。

---

ngoKevin 通过以下方式实现了您想要实现的目标:

1)通过matrixWorld获取枪的位置

var matrixWorld = gunEl.object3D.matrixWorld;
position.setFromMatrixPosition(matrixWorld);
bulletEl.setAttribute('position', position);

2)设置子弹旋转:

var rotation = gunEl.getAttribute('rotation');
bulletRotation = bulletEl.getComputedAttribute('rotation');
  bulletEl.setAttribute('rotation', {
    x: bulletRotation.x + rotation.x,
    y: bulletRotation.y + rotation.y,
    z: bulletRotation.z + rotation.z
  });
});

然后通过appendChild()添加项目符号并使其在tick()上移动

查看 project ，因为它肯定会对您有所帮助。