Crear un plano en Three.js

- Andrés Cruz

In english
Crear un plano en Three.js

Al igual que la esfera en Three.js que generamos anteriormente, lo importante es notar que solamente cambia el nombre de la figura geométrica; en este caso, la del plano que viene siendo la de PlaneGeometry que recibe como parámetro el ancho y largo del plano

const geometryPlane= new THREE.PlaneGeometry(14, 5)

Por lo demás, hay que definir el material y a agregarlo a la escena:

// plano
const geometryPlane= new THREE.PlaneGeometry(14, 5)
const materialPlane= new THREE.MeshBasicMaterial({ color: 0xFF0000, wireframe: false })
const plane= new THREE.Mesh( geometryPlane, materialPlane)
scene.add(plane)

Ya con el plano agregado, puedes variar sus transformaciones geométricas, por ejemplo:

//*** POSICIONES
cube.position.x = -5
cube.rotation.x = Math.PI * .5
plane.rotation.x = Math.PI * -0.5
plane.position.set(0,-2,1)

Recuerda que cuento con un curso introductorio a Three.js para dar los primeros pasos.

Andrés Cruz

Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz en Udemy

Acepto recibir anuncios de interes sobre este Blog.