Create a plane in Three.js

- Andrés Cruz

En español
Create a plane in Three.js

Like the sphere in Three.js that we generated earlier, the important thing to note is that only the name of the geometric shape changes; in this case, the one of the plane that has been the one of PlaneGeometry that receives as a parameter the width and length of the plane

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

For the rest, you have to define the material and add it to the scene:

// plane
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)

Now with the plane added, you can vary its geometric transformations, for example:

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

Remember that I have a 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.