Construye una escena en 3D para explorar con Three.js

1. Introducción: Yo he corrido. Bienvenido a la construcción Explora Rol tres D Escena con tres Jazz Tengo un nuevo vienen delante de desarrollador, pero me encanta tocar alrededor de tres D, y este es un proyecto que combina los dos. Entonces estoy muy emocionado por ello, y hoy me he unido a nosotros. Te estaré guiando por cómo acercar HTML, CSS, JavaScript y tres modelos D juntos. ¿ Simplemente Lionel interactúa hasta que da consejos en un navegador Web? Esto podría usarse para presumir el sitio web de productos y permitir a los usuarios explorarlos en una materia altamente visual de la industria. Empezaremos por aprender a agregar una escena mafia, iluminada y luego darle a los usuarios la capacidad de explorarla girando. Y esta noche en ella finalmente agregará Call SNC, que, al hacer clic, traeremos más información que sea relevante para ese modelo de área. Al final de este tutorial, tienes una comprensión de trabajo de usar tres Js, que es una biblioteca que podría ser usada para agregar e interactivo tres D y navegador Web. No se requiere parte del conocimiento de tres D, aunque sí te recomiendo que tengas alguna experiencia en JavaScript. Acompáñame en marcador. Suponiendo un agradable cuando 2. Una descripción de 3D en la web: por lo que tres D en la Web se hace usando algo llamado Web GL, que significa Web Graphics Library. Se trata de un FBI de JavaScript por renderización interactiva de dos gráficos D y tres D. Y lo que nos permite hacer en realidad es poner tres D en un navegador Web de una manera que sea realmente rápida y eficiente y que realmente no empantanen sus máquinas. Y podría mostrarse en cosas como los teléfonos inteligentes podrían hacerse en computadoras de escritorio. No hay pierna, hay mucha interactividad en ella. Y así nos permite hacer cosas como este camión animado en la parte superior del sitio de transmisión, que es sólo un modelo tres D de su logotipo. Ya sabes, puedo arrastrar esto. Puedo moverlo por ahí. También tenemos algo como este Mars Rover, que es de la Biblioteca de Propulsión Jet de la NASA. Podría conducir esto por ahí usando mis llaves arriba, abajo izquierda, abajo izquierda, derecha, viene un tren. Es un modelo bastante complicado, pero viste lo rápido que cargaba. Tenemos este fósil de National Geographic y usando buggy l y algunos de los tres modelos D podemos exportar de una manera realmente interesante, interactiva. Entonces como estoy desplazando tu respuesta a mi ratón encendido y gasta el modelo como diferentes llamadas a ella resalta áreas de importancia. Entonces es un dispositivo realmente bueno para contar historias aquí, y también tenemos esto de Mercedes Benz. Así que baja Explorer. ¿ Qué es esto? Cargas. En realidad se puede ver el auto como un modelo de tres D que se puede. Se puede mirar a su alrededor si se quiere ver lo que fue segundo diferentes configuraciones y decir diferentes colores de pintura. Puedes hacer click en esos, ver qué se ve con diferentes ruedas. Entonces qué cárcel podría usarse para agregar mucho detalle interesante. O por adelantado es como un centro de mesa, o tal vez como un poco de florecimiento a cualquier sitio web. Y se hace de manera justa. Simplemente, igual que los navegadores son capaces de manejar esto y una materia realmente rápida y eficiente. Entonces empezaste Teoh volverse un poco más y más popular ahora, así que exploraremos cómo hacerlo en el siguiente video 3. Introducción a la three.js: para poder meter todos esos tres d en un navegador Web, necesitamos decirle cosas como cómo se configura la geometría, cómo los materiales manejan cosas como la reflexión de la luz o el color de dichos materiales. Cómo funciona la cámara, cuál es la profundidad del enfoque cosas así. Entonces si estamos mirando hacia fuera, por ejemplo, cómo cubos en escena, estamos viendo eso en Strange. Es mucho detalle. De lo que estamos explicando dónde en la escena, cada punto en cada triángulo en cada cara que compone el Cubo vive. Entonces, como ves, aquí hay mucho detalle, y hay un poco de probabilidad de error si sabes que te pierdes algo como poner absolutamente un positivo en lugar de negativo o perder una coma, o posiblemente poner las cosas en el orden equivocado. Entonces lo que vamos a estar usando aquí es biblioteca llamada tres Js. Entonces si vas ahí su página principal, la oral es de tres tomas sin trabajo. Se pueden ver algunos de los ejemplos aquí, y algunos de los que acabamos de ver. Aquí está Aquí está el camión Tú transmites. Cavaremos un poco de la documentación. Entonces aquí hay un básico de tres Yacine, y van a añadir un cubo a la escena. Entonces si miras el país han destacado aquí, Esto es todo el dato de consumo de cocaína a ah 23 Js dos fuera de Cuba a la escena pasando por línea por línea. Dice la primera línea, aquí está la geometría. Se trata de una caja que es de una unidad de ancho, una unidad de profundidad y una de Utah. Todo el material en sí es verde. Vamos a sumar estos dos juntos y lo vamos a sumar a la escena. Entonces eso son cuatro líneas de código en una caja a una escena de tres rápidos a diferencia de todo este código , que es sólo un poco pesado y a veces se vuelve repetitivo. Y eso mismo, tal vez la facilidad de uso podría utilizarse para la iluminación. Entonces, por ejemplo, si miramos el dedo del pie, si quieres ver cómo tener una luz a un tres Js visto defines la luz, le dices el color y solo agregarlo. Y así hay un montón de impagos aquí, ya sabes, por ejemplo, por defecto, no cobra sombras. Es una luz ambiental, lo que significa una especie de esparce uniformemente. Y entonces eso es realmente algo. Agrega, a diferencia de ti, por ejemplo, iluminación con JavaScript simplemente recto. Entonces lo genial de tres jazz es que realmente te permite llegar a lo único de la escena, y voy a tener que preocuparme demasiado por los aspectos repetitivos del mismo o las cosas que estás comin tenemos que hacer. Y vamos a cavar en cómo ver y tener que realmente configurar tu computadora para manejar tres Js en el siguiente video, así que veremos entonces. 4. Cómo configurar un entorno local: Entonces empecemos a configurar ver en tres Js y vamos a configurar nuestro entorno local aquí. Tan solo tienes que instalar todo el software y todo lo que necesitamos para trabajar en él localmente. Y cuando digo que vamos a estar trabajando en ello localmente, eso significa, a diferencia de hacer un cambio, subirlo Teoh un servidor Web y previsualizarlo, lo cual puede llevar un poco de tiempo. Es duro, tipo de transferido de ida y vuelta. Simplemente lo vamos a editar en nuestras propias computadoras. Las cosas que habíamos salvado. Podemos previsualizar cómo se ve. ¿ Sabes qué navegador? Si empiezo, voy a ir a los tres sitios web de Js e ir a la documentación. Vamos a ejecutar las cosas localmente, y hay algunas maneras en que podemos hacerlo debido a la configuración de seguridad y los navegadores Web, o bien necesitarías anular esos t previsualizar algunos de estos algunos de estos archivos o necesitarías ejecutar un local Servidor web, y le recomiendo encarecidamente que no anule ninguna configuración de seguridad o predeterminada en su navegador Web . Entonces vamos a ver cómo se ejecuta un servidor poco cool? Y en este caso vamos a estar usando? No, Js y yo lo prefaciaremos diciendo que estoy usando un Mac aquí. Si estás usando cualquier otra plataforma como Windows o el software Lennox podría ser diferente, pero los principios de la misma. Entonces si copio esto en una terminal, quiero decir, todo es nota. Genial. Entonces eso no está instalado en mi computadora y en realidad poner algo en marcha. Voy a crear una carpeta nueva. Voy a llamarlo demo Cuidado en mi computadora, Ok. Y luego voy a CD en ese directorio. Por lo que CD Demo Grant. Y ahora voy a correr este pedacito de esta línea para empezar de nuevo mis notas. Entonces lo que acabamos de hacer es instalar un servidor. Empezamos a ejecutarlo. Si copio uno de estos en un navegador Web, me va a mostrar lo que sea que haya en esa carpeta. Entonces eso en realidad es mostrarnos el contenido de demo. Entonces para demostrarlo, solo abriremos el código de la FIA. Crearemos cualquier archivo hola mundos y lo guardaremos, como en la explicación y en cada uno a su Ok. Entonces ahora si volvemos a un navegador y no se puede refrescar, deberíamos ver el contenido de ese archivo. Entonces así es como correr localmente. Ahora empecemos realmente a añadir tres cárceles a la escena tan bien aquí. Y si buscas en el archivo de descarga, solo empezaremos a descargar todos los activos que necesitamos para esto. Y caminaremos por cómo agregar realmente archivos y cómo conseguir un canto básico en funcionamiento en el siguiente video así que nos vemos entonces. 5. Cómo configurar un escena de three.js: Ahora que tenemos nuestro servicio configurado, podemos empezar a construir nuestra escena tres D. Y si vuelves a la página web de tres Js, haremos clic en el enlace de descarga para empezar a descargar biblioteca la cual ya salió adelante y lo hizo Bueno, solo descomprimir eso. Entonces si vuelvo a mis descargas, agarraré esos archivos. Y lo que quiero hacer es empezar a agregar estómago la biblioteca al servidor que voy a estar corriendo, corriendo, visto apagado, corriendo visto apagado, así que vuelve a tres Js no master build y agarró tres Duckman dot Js que son los hombres versión ificada de la biblioteca. Simplemente voy a mover eso al servidor. Todo creó una carpeta llamada Js uh, ritmo que en y volver a mi editor de código. Por lo que fuera de raspaduras, un parado realmente rápido huelo crear una escena aquí. Qué creativo. Básicamente archivo html que solo carga ese JavaScript y porque se está ejecutando fuera del lienzo en lugar de solo como agregarlo directamente al html bueno, básicamente, básicamente, solo tienes un lienzo llene toda la pantalla, Así que tipo de estilo cerrar texto punto CS nos uh html margen de cuerpo. Zero uh, lienzo y todo Web GL corre fuera de lienzo, así que estaremos agregando un lienzo de la escena. Entonces hablando esto y luego seguir adelante y crear un básico visto en tres Js. Entonces vuelve a nuestro comprometido ahí y todo lo que enseñamos aquí todo lo que estamos aprendiendo aquí. Esto es directamente de las tres documentación en la TV zona de inicio tan bien, archivo de crédito por sostener nuestro código personalizado. Entonces, uh, el cuerpo y entonces simplemente lo crearemos aquí. ¿ Has visto a un médico? Sí. Y primero empezaremos creando una instancia de tres de las tres escenas de jazz hasta el momento, cantando igual a nueva escena de tres puntos y añadiremos una cámara. Entonces para esto, vamos a estar agregando una cámara de perspectiva. Hay algunos tipos diferentes de cámaras que puedes usar, pero este tipo de coincide con más cámaras del mundo real con cosas como profundidad de enfoque y perspectiva. Por lo que de nuestra cámara equivale a nueva cámara de perspectiva de tres puntos y le damos el campo de U. S. A. 75. ¿ Cuál sería el tipo de ángulo que la cámara puede ver? Por lo que 75 la relación de aspecto será punto de ventana inter con dividida por punto de ventana En sus Alturas. Ah, lo más cercano puede ver la cámara es 0.1, y la segunda vista más larga es 1000 en tres DS. No hay unidades. Entonces si vienes de algo como CSS estaban usando píxeles o Ari EMS, Así que todo es tipo de relativo a sí mismo. Estamos fuera en la cámara. Bueno, mueve la cámara un poco atrás desde el centro de la pantalla, lo que la cámara de oposición punto dicho equivale a cinco por defecto. Cualquier cosa que sólo seremos. Cuando se agrega, se agrega a la mitad de la escena, que tiene una ex esposa dijo de 000 Así que para esto vamos a mover un poco la cámara hacia atrás . Entonces cuando colocamos cosas en pantalla, es mirar esos objetos. De acuerdo, entonces ahora es una rendición, Así que renderers es igual a nuevo $3 Web GL runner y renderers dot set size cuando, sin duda inter width y window dot en su altura. ¿ Y cuál es el cuerpo? Entonces cuerpo del documento ¿Un niño de la pluma renderiza su elemento dom dot? Viene, Entonces si vuelves atrás, este es el básico visto. Ahí no hay nada. ¿ Qué hay en Cem Gentry? Hasta el momento, la geometría es igual a la nueva geometría de caja de tres puntos. Entonces este lote de cubo y va a tener un con una más alta en una profundidad de uno creará material para eso. Por lo que el material es igual a nuevo. Tres sí concuerdan con el material básico, por lo que esto sólo será un material. No tiene la iluminación afectada por defecto, que vamos a ir más adelante, pero sólo le daremos un color verde. Lo agregaremos todo junto en una malla de nuestro Q B igual y te re dot mesh material de geometría ums visto dot ad Cube. De acuerdo, uh, hemos añadido a la escena. Vamos a renderizarlo en la pantalla. Entonces vamos a animar igual función para que realmente renderizaremos la escena en la cámara. Si volvemos, hay un cubo y digamos que queremos rotarlo así que tendremos que llamar anima cada fotograma por lo que solicita anima fotograma de animación, así que eso lo llamará en cada fotograma y en cada fotograma. En realidad lo rotemos tan cubed up rotación dot x plus yAsí que para cubrir esto, cuando la escena arranca por primera vez, llamará a esta función animate, y la función animate aumentará la rotación en el eje X por una unidad de 0.1 lo hará . Perdón, Pasa algo mal. Orden. Renderizará esa escena y luego se volverá a llamar. Por lo que cada 60 fotogramas por segundo, aumentará la rotación de ese cubo y leerá o a la escena. Entonces si volvemos, es correcto, agregando. Entonces lo que queremos hacer a continuación es en alguna iluminación a esto, y vamos a entrar en eso en la siguiente lección. 6. Agrega luces: Por lo que hemos agregado un cubo a la escena, y está girando. Pero realmente no está recogiendo de todos modos. Entonces no se ve demasiado realista. Y la razón por la que no está captando ninguna luz es ahora mismo. El modo en que lo tenemos configurado es usar un material llamado material básico de malla. Hay algunos tipos diferentes de material que puedes usar los tres Js, y todos responden a la luz de manera diferente o responden a otros objetos de manera diferente. Entonces para entrar en material base de malla, ya sabes, se puede ver que es en un simple flash se comió. Pero digamos que realmente queremos tener luz y que refleje y proyecte sombras. Entonces vamos a algo llamado el material de pavimento de malla. Y así hay todo tipo de cosas diferentes que podemos hacer con el de, ya sabes, puedes establecer la capacidad que puedes establecer lo brillante que es, Pero vamos a usar eso en un sentido básico. Por lo que agarrar malla de material largo y reemplazar el material del cubo con malla a lo largo tan bien. Diga eso y se refrescará. Ahí no hay nada, y la razón por la que no hay nada porque desorden mal sí reacciona a la luz. Tenemos que añadir luces la escena. Entonces vamos a agarrar. Digamos focos. También lo es un foco de tres y mira los ejemplos de código. Entonces aquí está creando un foco de atención. Está configurando el color de la luz, y está configurando la posición y puedes hacer otras cosas como esa, dijo Cast Shadow. O podrías fijar la mitad de tu distancia. El foco brilla, Pero vamos a agarrar esto. Lo vamos a agregar o visto y, bueno, tal vez lo mueva un poco más cerca del al Cubo. Tan bien, lo dijo. Dada Expedición Cero una posición Y de 10. Y es que posición pueblo e ir a ver. Añada foco y lo que tal vez solo agregue unos cuantos más, solo para que podamos captar luz desde unos ángulos diferentes. Entonces tendremos otra que esté directamente arriba del Cubo. Entonces esa es esta exposición única de posición Y cero de decenas. Deposición de Cero, y tendremos uno que en realidad está detrás del Cubo, que vienen bien después. Entonces, ¿qué es eso? Eso y ahora si golpeó, refrescante, se ven, se puede ver que está recogiendo la luz un poco más con mayor precisión. De acuerdo, entonces en la siguiente lección, aprenderemos a movernos alrededor de este objeto en lugar de tener una rotación sobre el sonido. Entonces nos vemos entonces. 7. Explorar una escena 3D: Por lo que ahora tenemos el Cubo girando por su cuenta y recogiendo luces. Pero queremos que los usuarios sean capaces de manejar el movimiento de la escena ellos mismos. Y para ello, vamos a despegar la rotación automática y vamos a tener algo llamado cuatro Controles B y o controles es parte de tres Js que viene con él, y permite a los usuarios hacer clic en la ventana y pueden arrastrar escena alrededor. Dos escribieron. Gira, y también pueden usar la rueda del ratón para acercarla y alejarla. Entonces vamos a empezar por entrar en las descargas desde antes y vamos a ir a ejemplos controles Js o porque roles y vamos a añadir ese proyecto de licenciatura. Así que entra en la carpeta Js con todos nuestros otros JavaScript en volver al archivo de índice principal . Y ahora que son así la documentación para o controles se pueden encontrar en los tres principales muelles de gas por lo que copiaremos el código Atlanta, llamaremos a controles, lo agregaremos a la escena, le diremos que controle la cámara y los renderizadores de ojivas anteriores en. Entonces también despegaremos la rotación por defecto para el Cubo. Así que vuelve atrás. Yo sólo estoy controlando el faro. He hecho clic en la escena y la estoy arrastrando por ahí. Si uso mi rueda de desplazamiento, también puedo acercarla y alejarla, y eso es genial. Por lo que hemos agregado un cubo a la escena. Lo hemos dejado, y ahora estamos conectando controlando con su boca, así que hay un poco más de interactividad en ella. Entonces eso es bueno con Cube. Pero digamos que queremos hacer alguna otra geometría y hablaremos de eso en el próximo video , que te verá entonces. 8. Importación de modelos: Entonces ahora queremos agregar alguna geometría que sea más compleja que solo un cubo, y podemos hacerlo creando múltiples cubos y múltiples cilindros y juntándolos hasta que se asemejen a algo que nos gusta. O también podríamos importarlos de fuentes externas. Y tres, Vamos a importar archivos llamados GLT F y G L T F. Son modelos. Tienen texturas e iluminación horneadas en ellos, pero podrían crearse en algo como Maya o licuadora e importarse fácilmente a Web GL Y hay unos cuantos sitios diferentes por ahí de los que puedes descargarlos. . Descarga las existentes de yo personalmente me gusta Sketch Fab. Y así el euro es boceto. Tener dot com. Si te inscribes para cuenta gratuita, puedes buscar, Digamos, bueno, en autos. Tú. Hay diferentes modelos de autos. Algunos de ellos son pagados, algunos de ellos son gratuitos. Pero para la persona de esto, digamos que queremos que se vean fuera del bajo. Entonces, solo hagamos una búsqueda de Rickenbacker. De acuerdo en, y haremos click descargable. Entonces hay algunos gratis aquí, así que se escogió este, y así esto te va a mostrar una vista previa de modelo. Y esto está abajo con esto. Y antes de descargar cualquier cosa que sí necesites para crear cuenta, vas a iniciar sesión en ella. Pero la cuenta es gratuita, y algunos de los modelos son gratuitos. Entonces cerraremos esto. Esto lo mostraremos en nuestro buscador, y luego lo pegaremos en nuestro proyecto. Por lo que a esto se le llama este modelo. ¿ De acuerdo? Y luego si vas a tres, podemos cargarlo por necesitamos tener algún JavaScript adicional al proyecto. Tendrá que acudir a nuestro odontológico. Es carpeta volverá a entrar en tres, entrará en ejemplos cargadores Js y luego agarrar la letra G l t f Tom y luego dar un paso adelante refrendando. Ahora tenemos que referirlo. Entonces tendremos esa historia siguiente archivo. G l t f cargador Doctor. Sí, es un poco. Um así que vamos a quitar nuestro cubo aquí. Y, uh, cargador de barras es igual a nuevos tres g l t f cargador No cargar, y entonces llamaremos en la escena. Por lo que carta es modelo slash parece no G. Lt f una vez que está cargado. Bueno, en realidad, carga en la escena. Eso es correcto. Tenemos que pasar en GLT. De acuerdo, esto va a cargar el goc fr que acabamos de descargar. Una vez descargado, pasaremos ese objeto a la escena y luego lo volveremos a agregar y golpear. Refrescar Sobre esto. Ya no deberíamos ver el Cubo. Deberíamos ver el bajo. Entonces usando los controles, acabamos de agregar, Podemos rotar alrededor de ella, ver la luz y atraparla, y ahí está. Entonces ahora que tenemos la geometría añadida a la escena, cambiemos algunas cosas más. Como vemos no está realmente mirando a la cámara, y es difícil ver contra el fondo. Entonces vamos a entrar ella misma cambiando la rotación. Y una vez que estamos agregando escena, vamos a añadir, uh, g L T f no veo punto Rotación se puso. Por lo que la rotación exterior trabaja en cualquier tres geometría DS o luces o cámaras. Por lo que solo estableceremos esto para que esté en el eje X. Italia cero grados sobre el por qué y establecer el acceso. Serán 270 grados, por lo que en cualquier momento que establezcas la rotación fuera, va en el orden de X Y Z. Cuando haces alguna rotación en tres, sí requiere estar en resplandor, con lo que no estoy súper falla. Por lo que sólo usaremos un poco construido en tres matemáticas para convertir grados Radiance. Por lo que tres puntos perro matemático Doc, Comercio 270. Eso está en los ejes Y, y lo haremos en los ejes establecidos. De acuerdo, entonces ahora está mirando a la cámara, y es difícil de ver ahora mismo porque está sobre un fondo negro, pero podemos cambiar eso. Entonces si subes a rentar por, podríamos ir renderizadores establecer color claro. Lo que significa que si aquí no aparece nada, es como el color de reserva predeterminado, y lo pasaremos. Uh, digamos Blanco. Así son tus tiempos, F f f f f f f eso y refresca, y está apareciendo sobre un fondo blanco, pero está un poco lejos. Entonces movamos la cámara. Y también y esto puede ser sólo cambios para ver cómo se ve. Ella es buena, y tal vez hagamos un poco la iluminación porque probablemente esté un poco demasiado lejos. Entonces si cambiamos la línea de frente para digamos, estar adelante por lo que X será cero salvajemente cero y estos ed serán, digamos, tres y la que es la luz superior para estar directamente por encima de ella por unidad de tres. Y cambiaremos la luz de fondo para estar directamente detrás de ella por unidad de 30 para que lo estuvieras importando. Es frente y centro. Está enfrentando al usuario cuando se carga por primera vez, y podemos parecer en ello. Pero la órbita controla. Acabamos de tenerlo. Por lo que ahora es el momento de agregarle alguna universidad para que los usuarios puedan hacer clic en áreas específicas de la misma y ver detalles específicos sobre esas áreas. Y vamos a estar haciendo eso en la siguiente lección, así que nos vemos entonces. 9. Agrega marcadores: Entonces ahora sigamos adelante y agregamos consejos de herramientas a la escena. Entonces vamos a volver a nuestra base de código. Simplemente crearemos comentarios cosom aquí, uh, otros. Tan bueno, creando un rayo que va a almacenar todos los marcadores que te volverán más tarde, y vamos a crear otra matriz, que almacena todos los datos. Apuesta esos. Entonces va a contener todo lo que necesitas para cada marcador específico, y eso va a cosas como la posición y la descripción que tipo de brota 17 clics en ella. Tan bueno, gran vista Array lo llamará posición de datos de mercado almacenará esto como X Y lo dijo. 0.2. Vamos a cambiar esto más tarde. Entonces esto es sólo una especie de marcador de posición. Y ésa fue otra que, para fines de manifestación, se posicionará a la izquierda. De acuerdo, entonces ahora veamos esto. Entonces si vamos a objeto de claves datos de marcador para cada marcador es igual a más clave de datos. Por lo que el registro de consola de esto va a vivir a través de todos los marcadores y pasó a lo largo del índice , por lo que los grupos frescos algo aquí. De acuerdo, ya ves, es una especie de cerrar la sesión de los datos de la derecha anterior. Por lo que ahora queremos crear alguna geometría asociada a Parker y fue buena para nuestra geometría . Uh, hagamos un turista. Por lo que un turista será esencialmente el trazo de la punta de la herramienta. Tan nuevo liberado para nosotros, John Abogado, y le daremos al radio un 0.6. Nos lo daremos con de 0.1, y le daremos 100 segmentos y material en sí mismo, uh, nuevo material uh, básico de malla de tres puntos. Y vamos a usar materiales básicos de desorden que no queremos desafectados por la iluminación. Siempre queríamos ser una garganta de color consistente. Haremos ese color tan gris. Está bien. Y turistas lejanos iguala nueva geometría y material de malla de tres puntos. Y también queremos sumar esto a un objeto tres D. Entonces un objeto tres D básicamente va a ser un contenedor al que vamos a añadir objetos. Y podemos cuando movemos ese objeto. Cuando mueves los tres contenedores, movemos todos los objetos dentro de él. Entonces vamos a crear más por contenedor, nuevos tres objetos Dr tres en y vamos a sumar a los turistas a ese contenedor marcador. De acuerdo, uh, vamos a hacer algo similar, pero vamos a tener un círculo dentro de eso. Entonces tenemos el derrame cerebral. Y vamos a hacer sólo llenar esa punta de herramienta. La geometría lejana es nueva geometría de círculo de tres puntos, y le daremos un radio de 0.5 on y 32 segundos, y le daremos un Phil blanco, excepto que éste va a tener algo de transparencia a porque queríamos ser trato semi real trato. Ver thrips. Por lo que establece el color blanco conjunto transparente. Cierto. Y luego estableceremos la capacidad en 0.5. Y luego de nuevo, copiaremos el marcador. Viene malla y también vamos a fijar la posición. Ahora que hemos agregado a los turistas y el círculo al contenedor marcador, coloquemos el contenedor marcador en la pantalla. Por lo que marcador contenedor posición conjuntos de puntos. Y como estamos mirando el marcador, nos ocuparemos de las posiciones. Entonces para cada marcador, ya sabes, queremos que el 1er 1 sea 0002 y el 2do 1 sea 0.20 no. Por lo que vamos a capturar este marcador de set El cero de oposición duele, molesto buscado en sesión de mercado arriba también, y vamos a sumar que el mercado entra en escena. Así visto dot ad Marco container. Entonces ahora si retrocedemos y revertimos la escena deberíamos ver son dos marcadores. Uno tendrá nuestro invitado ambos tendrán un contorno gris que el interior será semitransparente con 50% de opacidad y blanco, y cada uno estará en la posición única que instalamos aquí. Ahora, si haces eso, sí, podemos ver que tenemos el círculo de tenemos el que está un poco atrás sólo porque realmente no lo movíamos al frente. Entonces si tomamos el 2do 1 y cambiamos el valor a 0.2, en realidad lo verás. Verlo moviéndose hasta el frente. Entonces ahí estabas en las posiciones y a continuación vas a tener alguna interactividad con ellos. Entonces nos vemos en la siguiente lección. 10. Colocación de marcadores: Por lo que ahora que tenemos los 20 pasos añadidos a la pantalla, necesitamos moverlos a la posición de retrato. Y podemos hacer esto por un poco de conjeturas cheque. O también podemos usar algo llamado dudo dot gov. Y lo que ese doctor que hace es que nos permita actualizar y previsualizar valores en tiempo real. Entonces, por ejemplo, si voy a su página web, es esta cosa arriba, ¿ verdad? Y puedo modificar algunos de los valores de la derecha y verlos reflejados en el JavaScript la izquierda. Lo que vamos a hacer es que vamos a agregar esto a la escena sólo para especie de ayudarnos a conseguir algunos valores preliminares con qué tipo de copiar y pegar. Por lo que iré a descargar dot, dot gooey. Voy a decir esto a mi proyecto. Vuelve a mi archivo de índice agregado a la escena, ve dabs hombres booey ver sí, y vuelve a la escena y luego le permitió un poco de espacio y decir ayudante, Así que esto sólo va a capturar algunos datos de prueba. No vamos a mantener esto a tiempo completo. Esto es solo por conseguir algunos valores iniciales y colocarlos en el laboratorio real. Por lo que solo crearé una función llamada al ayudante. Llámalo, ayudante , y voy a añadir un poco como un círculo de marcador de posición. En lo que va para la geometría equivale a noticias. Tres puntos temidos hacen el radio de 0.5 y van a hacerlo rojo. Sólo para que realmente se destaca contra el fondo y vamos a Así que marcador Apolinar es igual a nuevo material de geometría de malla de tres puntos. Esa es la escena. Es y posicionarse justo frente a la base. Entonces x valor de cero valores cero ese valor de 0.1 Es ahora si previsualizo Crips, acabas de establecer esta oposición de mercado que set. De acuerdo, entonces es ese pequeño punto rojo de ahí, y voy a mover eso por ahí con duda punto gov Así que un montón de discutiblemente te iguala punto de nuestro acuerdo. Fue sin duda no gooey. Y luego todos van booey dot marcador de anuncios ayudante, oposición X. Está bien. Entonces lo que esto está haciendo es esto es agregar una instancia de papá dot gov a la escena y decir queremos manipular marcador, su posición de ayudante y el valor exacto que queremos manipular es X, y queremos que haya un mínimo de uno y un máximo de uno. Entonces ahora si una vista previa esto debería verlo en la parte superior, ¿ verdad? Y tiene este pequeño slider. Pero lo voy a hacer es una vez que como que meto esto en un rango que yo quería ser. Simplemente voy a copiar ese valor X. Pero como puedes ver, solo es una especie de ir entre los negativos tu uno. Y eso se debe a que por defecto sólo hará números enteros. Tan bueno, dile que sea un poco más para tener, como, como, miembros más finos. Entonces tenemos que pisar. A mí me pisaron. Lo dejaré ir en incrementos de 0.1 y lo haré por el por qué valor y estos ese valor . Entonces digamos que quiero tener un sistema justo encima del puente, así que nos llevaré hasta allí. A lo mejor quería destacar un poco más. Entonces dijo Thies, dijo Teoh. Mayor número. Y digamos que quiero una posición arriba. Oh, agarra eso. Son así que esas son las posiciones X Y Zed que quiero mi eventual abuso de mercado todo solo tipo de copia eso más. Ahora si toco Refrescar. Mi marcador es la posición en la que dat dot gov nos dijo que estaba el marcador inicial para que yo pudiera hacer lo mismo con la cabeza, y eso podría hacer con otros marcadores adelante. Hay otra cosa es que si lo roto. En realidad, los marcadores no están girando junto con él, por lo que siempre están mirando a los frentes, y queremos cuando el usuario haga una panorámica alrededor de eso queremos que esos marcadores como que siempre se enfrenten a la cámara. Hagamos algo para capturar siempre la rotación de controles para unos dos controles. Encuentra mi declaración inicial y sólo iré a ti. Limita cómo pueden girar los controles por lo que sólo queremos rotar en el eje Y para que vaya controles. Se pueden configurar los hombres Max ángulos tan controlados hasta hombres ángulo polar. ¿ Eso significa que el ángulo polar es igual a controles? Ahora estoy en tiempos completos o angulares, pastel pensado dividido por dos, así que eso significaría que sólo gira en el eje y. No se puede mover en dicho o o s bien, así que no puedo conducirnos en otro avión ahora quiero. A medida que se actualizan los controles, quiero escuchar y mover los marcadores apropiadamente. Entonces ve a los controles. Salió de ese oyente cambiado en la actualización de la cámara. Por lo que esto llamaría a una función llamada en la actualización de la cámara, la cual encontrará aquí función en la fecha de la cámara y lo que quiero que eso haga es pasar por todos los marcadores y girarlos junto con el ángulo que rotaron las cámaras. Por lo que vuelve a subir en el marcador que creamos antes. Voy a añadir algo. Teoh. Agrega todos los mercados a una habitación individual. 02 marcadores puntos push marcador contenedor. Por lo que estos están moviendo todos los marcadores en array llamado marcadores. Actualizaciones de cámara. Voy a decir, Que ángulo de la cámara controles iguales no se pone como un ángulo hermoso. Y luego marcadores puntan para cada mercado de rotación que establecen cero. Este ángulo de cámara. Cero. Disculpa, ¿ has cambiado esta variable a ángulo de cámara? Cuando alguien gira los controles, va Teoh a su vez, Obtiene el ángulo de los controles y pasa por cada marcador y gira el marcador. Coincide con ese ángulo de control para que siempre se vaya a enfrentar en la cámara. Frutas y me perdí algo aquí, Es hit. Refrescar. Ah, está bien. Entonces ya ves, como lo estaban girando en los marcadores iniciales girando junto con las cámaras por lo que siempre están mirando hacia la cámara. Y lo siguiente que vamos a hacer es agregar la capacidad de realmente hacer clic en los datos de marca con seriedad. Entonces lo haremos en el siguiente video. 11. Detección de los clics: Entonces ahora que hemos agregado los consejos de herramientas, hagámoslos clicables. Y vamos a hacer algo llamado Ray Casting. Por lo que Ray ayunando se acostumbra a especie de ver lo que un ratón ha terminado. Entonces supongo que en este caso, queríamos a alguien. Alguien hace clic en el lienzo, disparamos array desde el ratón hasta la escena y vemos qué intersex sin línea. Entonces si fuera a flotar sobre este casting de rayos nos diría que los ratones sobre un círculo turistas y tú guitarra, vamos a seguir adelante y añadir Gran casting la escena y volveremos aquí y G o r Un pastor iguala una nueva tarifa de $3, Casper Y también necesitamos hacer un seguimiento del ratón. De momento, ratón es igual y tú tres defector de puntos a y volvamos a las tres acciones de jazz y copiar esto directamente desde ahí. Entonces eso va a hacer un seguimiento del posicionamiento del ratón. Volver los de este paso adelante, Pero copia el oyente de eventos. Entonces en cualquier momento que el usuario se mueva sus bocas iban a saber dónde está eso en pantalla . Está bien. Y ahora configuremos a la condesa para que reciba clics para que nuestro lienzo sea igual a documentos. Dardos se ponen en mi nombre de etiqueta consiguió el primer sondeo y ese oyente de eventos. Entonces cuando alguien haga clic, llamará a una función para que pueda comenzar agregado y oyente. Haga clic en velas. Haga clic. Desgarra función en el campus. De acuerdo, montaremos el Ray Kaster y agarraremos más esto Así que rompa casa para set desde cámara. Usaremos el ratón, y la cámara obtendrá una lista de cualquier cosa que esté debajo del ratón cuando hagan clic en eso, y lo único que queremos agregar a esto es que queremos que esto sea recursivo, así que queremos que sea. Si alguien hace clic, no sólo agarra el artículo superior. Es tipo de hojas a través de cada hijo individual de aquello que es útil para usar un objeto. Tres. Por lo que Ray Kaster se cruza con objetos, visto Niños Verdaderos. Entonces eso va a tu Carson. Almacenaremos algunos datos sobre lo que realmente hicieron clic, y vamos a configurar esto. Hasta el momento, Marker es igual a no para un marcador. Los datos para nombre de mercado son iguales a no. Y ahora diremos cuando alguien haga clic en eso si longitud intersexual, si han hecho clic en algo y es ha interactuado, vamos a cerrar sesión lo que ellos lo que recogen. De acuerdo, ahora, si vuelvo aquí en un click en uno de estos ítems Lo sentimos. Encontramos error. Tengo un error tipográfico si hago clic en esto y eso nos dice que hemos hecho clic en algunos ítems aquí y sólo vamos a volver a subir a nuestros marcadores originales y vamos a añadir algunos datos en cuanto a ayudarnos a capturar realmente lo que han recolectado. Um, lo que tenemos son marcadores Refrigerador en un círculo de datos de usuario punto nombre de mercado, Clave de la gente. Está bien, tan caliente de vuelta aquí. Si intersex, queremos ir al objeto superior y queremos radicar en el objeto y en los datos del usuario y el nombre del mercado. Volvamos a esto en la ventana. Por lo que de forma predeterminada, esto devolverá una lista de todos los objetos en los que se ha hecho clic. Y están un poco ordenados ya que te dará primero la más cercana. Y queremos arraigar en los datos detrás de eso. Entonces ve a agarrar. El objeto superior entrará en la raíz, entraremos en el objeto del mismo, y vamos a entrar en los datos del usuario y buscar más su nombre Así que si estamos viendo los nombres de marcador establecidos, eso significa entonces en realidad han hecho clic en un marcador. Si solo hiciéramos clic en el bajo, no habría set de marketing. Entonces y vamos a ir en un solo agarrar esto. Entonces vamos a volver a atar esto al objeto desde arriba, lo que significa que si han cobrado esto agarrará la llave para eso. Y la clave que estamos usando es la misma que la clave de nuestros datos de mercado. Por lo que si hicieras clic en el primer marcador, devolvería cero. Si hiciéramos clic en el segundo marcador, devolvería uno. Y así una vez que nos volteamos, podemos algo así como agarrar al papá real asociado con él. Entonces si haces clic en el 1er 1 regresará posición, titular y descripción sobre Let's quizá cambie a algo un poco más de detalle. Entonces iremos Tail piece y Rick. Entonces ahora si probé largo esto fuera, debería ver si hago clic en este retorno. De acuerdo, así que hemos recolectado esta pieza de cola en particular o haz clic en este marcador en particular que tiene esta posición o tiene esta descripción y titular. Y en el siguiente video, vamos a mostrar cómo posicionar eso en primavera. Ahora que sabemos exactamente lo que han cobrado y nos vemos entonces 12. Muestra de consejos de herramientas: Entonces ahora vamos a aparecer algo de información. Una vez que el usuario realmente haga clic en un marcador y volveremos a nuestra base. Andi estaba fuera. Marcador de posición llamado esta división es igual a punta de herramienta. Y lo que sucede es cuando alguien hace clic en un marcador aparecerá esta punta de herramienta y poblada con información sobre ese marcador en particular. Por lo que la posición de punta de herramienta será absoluta. Um, lo mantendremos fuera de lona o fuera de cámara, supongo, por defecto. Entonces agrupa mallas y solo lo lograremos. Cuando alguien haga clic en él, será visible sobre más allá de Con esfuerzo. Así que pásalo E uno y también incluso una masa con de 300 pixels y desarrollo de auto. De acuerdo, vamos a volver base de código de puerta trasera y posicionarlo. Tenemos este código. Sabemos que alguien recolecta un marcador, y sabemos qué es el mercado específico. Ahora iremos a Jewell tip container dot interno html gente. Gana ir fuerte datos de mercado. Su nombre punto titular. De acuerdo, entonces lo que va a pasar es que alguien haga clic en él y va a obtener los datos del mercado y tirar esa información desde arriba. Por lo que poblará el titular. Rellenará la descripción en algún HTML y dejará caer ese html en la punta de la herramienta. Y supongo que lo último que tenemos que hacer es realmente decirle a esa punta de herramienta dónde estar en pantalla, porque tiene que estar justo encima del marcador. Entonces iremos si Marker name. Por lo que establecemos aquí el nombre del marcador, que es por defecto ahora. Entonces queremos decir, si alguien realmente hizo clic en un marcador, entonces el marcador activo será ese contenedor de punta de herramienta dot add class o dot close list. No agregar es visible. De lo contrario, ¿marcadores activos? No y hasta listas de clase punta quitar. ¿ Está tan descolorido? Si alguien ha recogido la pantalla y no hay Marconi eso y necesitamos hablar para posicionar ese marcador. Entonces ve a lo que podría una función para agarrar los valores ex esposas del ratón Haga clic y posicionar el mercado ahí. Entonces función Karina para ese marcador de posición de función, y solo agarraremos. Dejar posición igual a la posición de pantalla cámara marcador activa, y vamos a crear una función llamada a la pantalla consejos de posición. Entonces eso nos dirá específicamente dónde hemos recaudado cuál es ese valor X Y. En lo que va de momento. Factor igual a nuevo. Nos va a decir básicamente, como la pantalla está girando como lo que es La posición X Y de un objeto en la escena tres D . Y supongo que en lugar de simplemente capturar el valor estático cuando alguien hace clic en él, um, queremos poder saber siempre, como si el marcador se moviera, si alguien rotara la pantalla, Uh, donde esa punta de herramienta está en la pantalla. Por lo que los datos de la punta de la herramienta rotarán con la duda del marcador en sí. Por lo que vector es igual a nuevo factor de tres puntos tres. Y solo voy a agarrar esta base de código, que es algo que robé para otro lugar pero que esencialmente devolverá el valor X Y de cualquier objeto de la escena. Entonces ahora si son para cerrar la sesión de esto, me diría si recojo este grupo tool tip container. Ah, y en realidad está encontrar esa punta de herramienta. Entonces, ¿las herramientas tienen contenedor igual documento? Obtengo elemento por d nunca hacer clic en esto, nos diría que la exposición es 700. El puesto blanco es a 41 estos en posición es cero. Y como se puede ver como giró a especie de conseguir un sabor que así Ahora que tengo esos datos quiero ir. Si la Posición X es menor que cero al estilo de punto contenedor izquierdo es igual a cero. Lo que significa que si esa punta de herramienta está esencialmente fuera de pantalla, no mueva la punta de la herramienta fuera de la pantalla y manténgala cero si posiciona punto x más contenedor de punta de herramienta No todo configurado con su ventana de lección punto Interior con. Entonces lo contrario sería si ese marcador está realmente fuera de pantalla a la derecha. No posicione más que la punta de la herramienta. Me gusta no posicionar los datos fuera de pantalla posición sido es que el valor predeterminado es posicionar esa ventana de información justo en la parte superior del marcador si es básicamente dentro de la pantalla, bien. Y así eso es establecer la exposición y establecerá la posición y para que sea cualquiera que sea el valor predeterminado . Por lo que ahora cuando hacemos clic en esto, debería poblar la punta de la herramienta y establecer la posición del accidente para que esté donde esté el marcador . Y está haciendo eso excepto que no ponemos un color de fondo. Entonces, uh, bueno, establece el fondo de la punta de la herramienta. Por lo que el color de fondo es de orden blanco. El color es negro y mucho tener que. Es un 10 pixels y se enteró familias Ariel. Entonces ahí lo tienes. Hacemos clic en esto. En realidad tenemos la punta de la herramienta flotando sobre ella y eso bordea y apareciendo. Entonces hagamos esto un poco más grueso, ¿de acuerdo? Pero verás que en realidad no se está moviendo cuando gire el modelo, así que también vamos a querer hacer eso. Volveremos atrás. Entonces ahora lo que también queremos hacer es volver a la actualización de la cámara donde estábamos revisando rotación y decir cuando la cámara actualiza marcador de posición. Entonces esa es la misma función que solo estábamos usando para soltar el marcador encima de su área apropiada . Entonces a medida que la cámara gira en la actualización de la cámara, si hay un marcador activo, colóquelo . Entonces ahora, medida que giro que se puede ver la herramienta Tip está girando junto con ella y tal vez solo limpie un poco el relleno aquí porque eso es un poco demasiado, y eso es una paz final. Simplemente vamos a quitar nuestra herramienta para ayudarla. Y ahora que hemos aprendido como que los marcadores de posición de Teoh los habían agregado, podemos sacar eso un poco más. Entonces ahora vas a tener sentido de cómo agregar marcadores el cuerpo, y lo veremos en el siguiente video 13. Conclusión: y ese es el final del curso. Hemos repasado los conceptos básicos de crear una escena, importar modelos externos, iluminarla, iluminarla, permitiendo que solo dos explorados con o se vuelvan tontos y usar casting de violación. Usando el método, nos pasamos a conseguir coordenadas. He agregado algunos familiares más a la modelo, y aquí están los resultados finales. Desde aquí podríamos hacer cosas como en un pre cargador, o rotar el objeto para caber a los usuarios importación libre promovida. Por lo que me encantaría ver a dónde llevas este conocimiento a continuación. Entonces definitivamente si tienes algo que te gusta compartir conmigo amor echarle un vistazo . Me encanta hablar de estas cosas, así que siéntete libre de llegar a mí. Y aparte de eso, gracias por mirar y nos vemos la próxima vez.