如何设置对象的某些坐标而不重置其他坐标？答案

【问题标题】：How do I set some of an object's coordinates without resetting the other ones?如何设置对象的某些坐标而不重置其他坐标？
【发布时间】：2017-08-16 11:37:14
【问题描述】：

我试图仅调整对象的 Y 坐标，同时保持 X 和 Z 坐标相同。我工作的唯一方法是获取对象的位置并组成一个新的部分修改的位置。它不漂亮，而且似乎效率低下。看起来这可能是因为position is a single-property component，所以这可能是不可能的。

这是我目前的解决方案：

https://glitch.com/edit/#!/aframe-position-example

index.html:

<html>
  <head>
    <script src="https://aframe.io/releases/0.6.0/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-camera id="camera"></a-camera>
    </a-scene>
    <script src="index.js"></script>
  </body>
</html>

index.js：

const camera = document.querySelector( '#camera' )

console.log( camera.getAttribute( 'position' ) )
// {x: 0, y: 1.6, z: 0}

// overwrites original position, as expected
camera.setAttribute( 'position', { x: 0, y: 0, z: 5 } )
console.log( camera.getAttribute( 'position' ) )
// {x: 0, y: 0, z: 5}

// overwrites original position (including z, defaults to 0), maybe not expected
camera.setAttribute( 'position', { x: 5, y: 5 } )
console.log( camera.getAttribute( 'position' ) )
// {x: 5, y: 5, z: 0}

// overwrites original position (x and z become 0), maybe not expected
camera.setAttribute( 'position', 'y', 10 )
console.log( camera.getAttribute( 'position' ) )
// {x: 0, y: 10, z: 0}

// how to change some position variables and keep the other ones the same
let oldPos = camera.getAttribute('position')
let newPos = { x: 4, y: oldPos.y, z: oldPos.z }
camera.setAttribute( 'position', newPos )
console.log( camera.getAttribute( 'position' ) )
// {x: 4, y: 10, z: 0}

【问题讨论】：

标签： javascript 3d aframe webvr

【解决方案1】：

你可以：

设置一个临时的position 变量，并且只更改所需的部分：
let pos = this.el.getAttribute('position'); pos.x += velocity; this.el.setAttribute('position',pos);
使用 Rainer Witmann 的想法，通过使用 Object.Assign() 来削减临时人员： this.el.setAttribute('position', Object.assign({}, this.el.getAttribute('position'), {x: newX}));
似乎更短，但我喜欢将整个位置作为临时变量：住在这里：https://jsfiddle.net/gftruj/dqyszzz5/4/
直接与position 组件混淆，通过更改数据并调用update() 函数：
this.el.components.position.data.z-=2; this.el.components.position.update();
这很有趣，但我认为在创建商业/专业项目时这是一个糟糕的主意，因为每个框架集成都会如此。
使用threejs object3D属性：
this.el.object3D.position.x += velocity;
在我的小提琴中检查一下：https://jsfiddle.net/gftruj/dqyszzz5/1/
请注意，稍后您将无法调用getAttribute()，因为位置组件不会改变。

在您的故障中您使用第一个选项，但您不需要单独使用位置对象属性：setAttribute('position',{x:pos.x,y:pos.y,z:pos.Z});，您可以简单地使用整个对象：setAttribute('position',pos);

【讨论】：

以后不会改变底层 Three.js 的位置吗？如果我在盒子上做getAttribute('position')，会不会是旧位置？第二个解决方案是我目前正在做的，看起来它可能是唯一的方法。
@jbjw 是的，正如我所写，我通常使用“临时变量”选项来保持原状，如果您正在寻找一个干净的答案，我已经更新了我的答案以避免混淆班轮，使用 Rainers 的想法，我仍然希望将位置对象作为一个整体放在参考中。

【解决方案2】：

您也可以使用Object.assign。像这样的：

camera.setAttribute('position', Object.assign({}, camera.getAttribute('position'), {x: 5})

【讨论】：

这仍然会覆盖整个位置，但看起来这是唯一的方法，Object.assign 比我的分解重组解决方案漂亮得多。谢谢！