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

Develop with Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz In Udemy

I agree to receive announcements of interest about this Blog.

!Courses from!

10$

On Udemy

There are 4d 03:01!


Udemy

!Courses from!

4$

In Academy

View courses

!Books from!

1$

See the books
¡Become an affiliate on Gumroad!