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. You can get information in explicit detail in the three.js documentation, and the 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，因为它一定会帮助您。

Aframe 使用 three.js 更改对象位置

Aframe change object location with three.js

javascript

three.js

aframe