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.
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter