Práctica 5: Agregar plano, luces ambientales y órbita

Vamos a copiar la práctica 4 y renombarla a práctica 5.

Ahora tenemos que entrar a nuestra carpeta librerias y buscar dentro de la siguiente direccion el archivo OrbitControls.js: three.js-master\examples\jsm\controls.

Lo siguiente es copiarlo y pegarlo en nuestra carpeta js e importalo en el index:

Lo siguiente es ir a nuestro archivo script.js. Una vez en el archivo vamos a comentar la linea "scene.add(punto)", despues vamos a pegar el siguiente código debajo de la parte de "Crear el render y fijar el tamaño":

El código se divide en 3 partes:

-parte de "agregar controles de órbita": en esta parte vamos a crear un objeto para la órbita que nos servirá para mover la cámara por el plano.

-parte de "agregar luz ambiental": en esta parte nos permite agregar, como su nombre lo dice, luz para el espacio en el que estamos.

-parte de "agregar una spotlight": esta parte nos permite crear una luz y un degradado con respecto al alcance de la luz, ya que conforme sea menos el alcance se verá una deficiencia del brillo y también agregamos su posición, en pocas palabras será un objeto que emitirá este brillo y finalmente la agregamos al escenario.

Ahora tenemos que agregar lo siguiente arriba de la parte "posicion de la cámara":

Para crear un plano tenemos que crear un objeto de tipo "PlaneGeometry" y definir sus características como: largo y ancho, etc. Lo siguiente es crear un objeto de tipo "MeshLamberMaterial" y definir un color para finalmente crear un objeto de tipo "Mesh" y pasar como parámetros "planeGeometry" y "planeMaterial" para crear el plano. La 2da parte es para rotarlo un poco y a su vez establecer su posición y agregar a la escena.

Ahora vamos a agregar las 2 siguientes partes de código:

La parte de código "orbita.update();" es para actualizar el movimiento de la órbita y de la cámara. La siguiente parte es "Función de resize" y es para poder hacer zoom con la cámara y poder alejarnos.

Finalmente obtenemos esto: