Se supone que debo crear tres geometrías planas para la escena (una perpendicular al eje x, una perpendicular al eje y y una perpendicular al eje z) que se verían así.
Entonces, aquí está mi código a continuación para lo mismo:
public showPlaneGeometry() { console.log(this.hScene) const geometryx = new th.PlaneGeometry(1, 1); const geometryy = new th.PlaneGeometry(1, 1); const geometryz = new th.PlaneGeometry(1, 1); const material = new th.MeshBasicMaterial({ color: 0xa6cfe2, side: th.DoubleSide, transparent: true, opacity: 0.5, depthWrite: false, }); const planex = new th.Mesh(geometryx, material); const planey = new th.Mesh(geometryy, material); const planez = new th.Mesh(geometryz, material); planex.position.set(1, 0, 0); planey.position.set(0, 1, 0) planez.position.set(0, 0, 1) material.transparent = true this.hScene.add(planex, planey, planez); } La salida para el mismo aparece de esta manera decepcionante:
Me preguntaba cómo hago para que se vea como la imagen que publiqué arriba. ¿Que se cruzan en el centro de esa manera y las mallas de superficie cuando se agregan a la escena aparecerían en el punto de intersección central? Muchas gracias por su ayuda de antemano.
No es necesario cambiar su posición, ya que todos deben pasar por 0, 0, 0 . Sin embargo, debe cambiar su rotación si desea que se alineen a lo largo de diferentes ejes.
const planeGeom = new THREE.PlaneGeometry(1, 1); const planeMat = new THREE.MeshBasicMaterial({ color: 0xa6cfe2, side: THREE.DoubleSide, transparent: true, opacity: 0.5, depthWrite: false, }); const planeXY = new THREE.Mesh(planeGeom, planeMat); const planeXZ = new THREE.Mesh(planeGeom, planeMat); const planeYZ = new THREE.Mesh(planeGeom, planeMat); // Default plane already occupies XY plane planeXY.rotation.set(0, 0, 0); // Rotate around x-axis to occupy XZ plane planeXZ.rotation.set(Math.PI / 2, 0, 0); // Rotate around y-axis to occupy YZ plane planeYZ.rotation.set(0, Math.PI / 2, 0);Tampoco es necesario crear 3 geometrías de plano diferentes. Puedes reutilizar el mismo 3 veces.