2017-08-16 5 views
0

J'essaye d'ajuster seulement la coordonnée Y d'un objet, tout en gardant les mêmes coordonnées X et Z. La seule méthode que je travaille est d'aller chercher la position de l'objet et de composer une nouvelle position partiellement modifiée. Ce n'est pas joli, et il semble que ce pourrait être inefficace. On dirait que cela peut être dû au fait que position is a single-property component, alors peut-être que ce n'est pas possible.Comment définir certaines coordonnées d'un objet sans réinitialiser les autres?

Voilà ma solution actuelle:

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} 

Répondre

1

Vous pouvez soit:

  • Définir une variable position temporaire et changer seulement la partie souhaitée:
    let pos = this.el.getAttribute('position'); pos.x += velocity; this.el.setAttribute('position',pos);
  • utilisation idée de Rainer Witmann de couper les temporaires en utilisant Object.Assign(): this.el.setAttribute('position', Object.assign({}, this.el.getAttribute('position'), {x: newX}));
    Semble plus courte, mais j'aime avoir l'ensemble position en tant que variable temporaire: vivre ici: https://jsfiddle.net/gftruj/dqyszzz5/4/

  • Mess avec le composant position directement, en changeant Ceci est amusant, mais je pense que c'est une idée terrible lors de la création d'un projet commercial/proffesional, comme le serait toute ingeration de l'infrastructure.

  • utiliser les propriétés threejs Object3D:
    this.el.object3D.position.x += velocity;
    Check it out dans mon violon: https://jsfiddle.net/gftruj/dqyszzz5/1/
    S'il vous plaît noter que plus tard Vous ne serez pas en mesure d'appeler getAttribute(), en tant que composant de position ne change pas.

dans votre pépin Vous utilisez la première option, mais vous n'avez pas besoin d'utiliser l'objet de la position des attributs séparément: setAttribute('position',{x:pos.x,y:pos.y,z:pos.Z});, vous pouvez simplement utiliser l'ensemble de l'objet: setAttribute('position',pos);

+0

Ne changera-t-il pas la position sous-jacente de Three.js par la suite? Si je fais 'getAttribute ('position')' sur la boîte, ne sera-ce pas l'ancienne position? Et la deuxième solution est ce que je suis en train de faire, qui semble être le seul moyen. – boxtrain

+0

@jbjw yup, comme je l'ai écrit, j'utilise généralement l'option 'variable temporaire' pour garder les choses en place, j'ai mis à jour mon anwser pour éviter toute confusion, si vous cherchez un propre un revêtement, utilisez l'idée de Rainers, souhaite toujours avoir l'objet de position dans son ensemble dans une référence. –

1

Vous pouvez également utiliser Object.assign. Quelque chose comme ceci:

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

Cela écrase toujours la position entière, mais il semble que c'est la seule façon et 'Object.assigner est beaucoup plus jolie que ma solution décomposer-recomposer. Merci! – boxtrain