03.Escena básica escena básica
introducir
En nuestra primera lección, haremos que Three.jsfuncione de la manera más sencilla posible: sin empaquetadores, sin dependencias, sin módulos, solo HTMLun archivo JavaScript.
documento basico
Primero, crea un index.htmlarchivo normal:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>03 - Basic Scene</title>
</head>
<body>
<script src="./script.js"></script>
</body>
</html>
y un archivo simple script.js:
console.log('Hello Three.js')
Ahora abra las herramientas de desarrollador.
Luego navegue a las pestañas en Developer Toolsla parte superior . Siempre debe mantener la consola abierta para ver posibles errores y advertencias.Console
Cómo cargar Three.js
Ahora necesitamos cargar Three.jsla biblioteca. Hay muchas maneras de hacer esto. Ahora, simplemente descargaremos la biblioteca y la usaremos.
Vaya a https://threejs.org/ haga clic en el botón de descarga para descargar el archivo zip y descomprimirlo. Los archivos son enormes, pero no te preocupes, solo necesitamos uno de ellos.
Debería terminar con una carpeta que se ve así:
vaya a build/la carpeta y three.min.jscopie el archivo a su proyecto.
Debería obtener algo como esto:
ahora podemos cargar Three.jsla biblioteca al final:
<script src="./three.min.js"></script>
<script src="./script.js"></script>
Asegúrese de cargarlo three.min.jsantes script.js; de lo contrario, script.jsla secuencia de comandos del archivo se ejecutará primero y three.min.jsno se conocerá el contenido del archivo.
Cómo usar Three.js
En nuestro script.jsarchivo, tenemos acceso a una THREEvariable llamada . Tenga en cuenta que debe escribirse en mayúsculas.
Si observa console.log()esta variable, encontrará que tiene muchas propiedades:
console.log(THREE)
Esta THREEvariable contiene Three.jsla mayoría de las clases y propiedades que pueden ser necesarias en un proyecto de desarrollo. Desafortunadamente, no todas las clases están en esta variable, pero le enseñaremos cómo acceder y usarlas más adelante.
Para usar una de estas clases, debe crear una instancia. Por ejemplo, si quisieras crear una escena, escribirías const scene = new THREE.Scene()Si quisieras crear una geometría de esfera, escribirías const sphereGeometry = new THREE.SphereGeometry(1.5, 32, 32): profundizaremos en esto más adelante.
primer acto
Es hora de crear nuestra escena y hacer algo en la pantalla.
Necesitamos 4 elementos para empezar:
- escena que contiene objetos
- algunos objetos modelo
- cámara
- renderizador
EscenaEscena _
Una escena es como un contenedor. Pones objetos, modelos, partículas, luces, etc., y en algún momento pides Three.jsque se renderice la escena.
Para crear una escena, use la clase Escena :
// Scene
const scene = new THREE.Scene()
Malla de objetos
Los objetos pueden ser muchas cosas. Incluye geometría original, modelos importados, partículas, luces y más.
Comenzaremos el diseño con un simple cubo rojo.
Para crear el cubo rojo, necesitamos crear un tipo de objeto llamado Malla . Una malla es una combinación de geometría (forma) y material ( apariencia).
Hay muchos tipos de geometría y materiales, pero por ahora simplemente crearemos un BoxGeometry y un MeshBasicMaterial .
Para crear la geometría, usamos la clase BoxGeometry , cuyos primeros 3 parámetros corresponden al tamaño de la caja.
// Object
const geometry = new THREE.BoxGeometry(1, 1, 1)
Para crear un material, necesitamos usar la clase MeshBasicMaterial con un parámetro : un {}*objeto que contiene todas las opciones. Podemos especificar sus colorpropiedades primero. Hay varias formas de especificar colores en
. Three.jsPuede ingresarlo como un JS hexadecimal 0xff0000, puede ingresarlo como una cadena hexadecimal '#ff0000', o puede usar un nombre de color, como ingresar Color 'red' ; más sobre eso más adelante.
// Object
const geometry = new THREE.BoxGeometry(1, 1, 1)
const material = new THREE.MeshBasicMaterial({
color: 0xff0000 })
Para crear la malla final, usamos la clase Mesh y escribimos los parámetros **geometry**y **material**.
// Object
const geometry = new THREE.BoxGeometry(1, 1, 1)
const material = new THREE.MeshBasicMaterial({
color: 0xff0000 })
const mesh = new THREE.Mesh(geometry, material)
Ahora se pueden add(...)agregar mallas a la escena usando:
scene.add(mesh)
Si no agrega un objeto de malla a la escena de la escena, este objeto no se puede renderizar.
CámaraCámara
La cámara no se ve. Esto es más un punto de vista teórico. Cuando rendericemos la escena, se renderizará desde la perspectiva de esta cámara .
Puede abstraerlo como una cámara en una escena de película, por lo que three.jspuede tener varias cámaras y puede cambiar entre estas cámaras según sea necesario . Por lo general, solo usamos una cámara.
Hay diferentes tipos de cámaras y las discutiremos en una lección posterior. Ahora, solo necesitamos una cámara que maneje la perspectiva (haciendo que los objetos cercanos se vean más prominentes que los distantes).
Para crear una cámara, usamos la clase PerspectiveCamera.
Necesitamos proporcionar dos parámetros básicos a esta clase.
Parámetro 1: Campo de visión El campo de visión
es qué tan grande es su ángulo de visión. Si usa ángulos muy grandes, podrá ver todas las direcciones al mismo tiempo, pero se distorsionará porque el resultado se dibujará en un pequeño rectángulo. Si usa ángulos pequeños, las cosas se verán magnificadas. El campo de visión (o fov ) se expresa en grados y corresponde al ángulo de visión vertical. Para este ejercicio, usaremos un ángulo de 75 .
Parámetro dos: relación de aspecto
En la mayoría de los casos, la relación de aspecto es el ancho del lienzo dividido por su altura . Todavía no hemos especificado ningún ancho o alto, pero lo necesitaremos más adelante. Al mismo tiempo, crearemos un objeto con un valor temporal que se puede reutilizar.
No olvides agregar la cámara a la escena . En caso de que se olvide agregar la cámara a la escena, puede causar un error más adelante:
// Sizes
const sizes = {
width: 800,
height: 600
}
// Camera
const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height)
scene.add(camera)
Renderizador WebGLRenderer
El trabajo del renderizador es renderizar .
Simplemente le pediremos al renderizador que renderice nuestra escena desde el punto de vista de la cámara , y el resultado se dibujará en el lienzo . Puede crear el lienzo usted mismo o dejar que el renderizador lo genere y lo agregue a su página . Para este ejercicio, agregaremos el lienzo htmly JavaScriptlo vincularemos al renderizador obteniendo el nodo del elemento. Crea el elemento antes de
cargar el script y dale un :<canvas>class
<canvas class="webgl"></canvas>
Para crear el renderizador, usamos la clase WebGLRenderer con un parámetro : un {}objeto que contiene todas las opciones. Necesitamos especificar canvasvariables que correspondan a nuestras <canvas>etiquetas.
Cree una variable canvas, luego tome la etiqueta creada usando document.querySelector(...)y guárdela en ella. Es mejor asignar el lienzo a una variable, ya que usaremos esta variable para manipular elementos en la próxima lección . Método: también necesitamos actualizar el tamaño del renderizador usando el método del objeto creado anteriormente . El método nos redimensionará automáticamente en consecuencia :HTML<canvas>DOM
setSize(...)sizessetSize(...)<canvas>
// Canvas
const canvas = document.querySelector('canvas.webgl')
// ...
// Renderer
const renderer = new THREE.WebGLRenderer({
canvas: canvas
})
renderer.setSize(sizes.width, sizes.height)
En este momento, todavía no podemos ver nada, pero el lienzo está allí y se ha redimensionado en consecuencia. Puede utilizar las herramientas de desarrollo para comprobar <canvas>el tamaño.
renderizar primero
Es hora de comenzar nuestro primer render. render(...)Llame al método en el renderizador y envíele los parámetros sceney camera:
renderer.render(scene, camera)
¿Aún no? El problema es que no especificamos la posición del objeto, ni la posición de la cámara. Ambos están en la posición predeterminada, que es el centro de la escena, y no podemos ver la apariencia general del objeto desde el interior del objeto sólido (por defecto).
Necesitamos mover objetos.
Para ello, podemos acceder a múltiples propiedades de cada objeto, como position, rotationy scale. Ahora, use positionlas propiedades para mover la cámara hacia atrás.
La positionpropiedad es un objeto con tres propiedades relacionadas: x, yy z. zDe forma predeterminada, Three.js considera que el eje de avance/retroceso es
Para mover la cámara hacia atrás, debemos proporcionar un valor positivo para esta propiedad. Una vez que crea camerala variable, puede usarla en cualquier lugar, pero debe usarse antes de renderizar:
const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height)
camera.position.z = 3
scene.add(camera)
Felicitaciones, hemos visto el primer trabajo renderizado. Parece un cuadrado, y eso se debe a que la cámara está perfectamente alineada con el cubo y solo puedes ver un lado.
No se preocupe por el tamaño del renderizado; aprenderemos cómo ajustar el lienzo a la ventana gráfica más adelante.
En las próximas lecciones, aprenderá más sobre las propiedades position, rotationy , y cómo cambiarlas y animar la escena.scale