Paso 5: Three.js: introducción
Esto es solo un gif. Haga clic para el JSFiddle completo!
Three.js puede ser desafiante al paso en por primera vez. Para mí, la confusión fue averiguar todas las piezas que necesitaba para montar por la más básico "Hola, mundo" clase de ejemplo. Pude encontrar algunos buenos tutoriales que me daría el código para poner un cubo en la pantalla, rotación, pero no pude averiguar de lo que estaban haciendo todas las piezas. Cambiar algo y rompe el lío todo.
Espero que el diagrama anterior resuelve esto para algunos de mis lectores. Para empezar con threejs necesita cada pieza en la figura, y usted a ensamblarlos como se ha descrito incluso por el más mínimo ejemplo. No hay ninguna tal cosa como una línea "dibujar un cubo". Paso a través de él; Si usted necesita más ayuda, empiezo con el tutorial de Aerotwist, el mejor de los que he encontrado. También es muy útil, la página "crear una escena" en la documentación de ThreeJS.
El tutorial de ThreeJS mencionado arriba va, a mí, en un orden extraño. Aunque ciertamente más débil código a alguien que ya lo entiende, sería anotar el ejemplo "cubo de la animación" como este (el código es el mismo que el doc ThreeJS, repetido con una explicación diferente):
Crear un cubo:
Crea una escena:
Agregar el cubo a la escena:
Crear un motor de render:
Añadir una cámara y hacer:
Paso atrás para un segundo. ¿Funciona? OK, ahora a animarlo.
Añadir un bucle de procesamiento, reemplace renderer.render() con:
... y vaya feliz a casa!
requestAnimationFrame(render) es una calza para el método nativo (aproximadamente) del mismo nombre que usted podría pensar en como similar a JavaScript setInterval(). Pero hay un montón de ventajas: requestAnimationFrame no disparar cuando la página no es visible, por ejemplo, para que no tenga que utilizar recursos para una animación que no se han consultado. Árbol en el bosque situación. También es un API que permite el navegador para volver a dibujar muchas cosas en una vez (de JS, CSS, WebGL, etc.), así a optimizar su ciclo de repintado. Leer más.
