Index

A

• advanced visualizations creation
  • dynamic colors, combining for / Combining dynamic colors to create advanced visualizations
  • initial particle system, setting up / Setting up the initial particle system
  • volumes, calculating for range / Calculating volumes for each range
  • particles, determining for update / Determining particles that need to be updated and setting the height and color of an individual particle
• ambient lighting
  • adding / Adding directional and ambient lighting
• animation
  • adding, Tween.js used / Using Tween.js to add an animation
• AudioContext function / Setting up the HTML5 Web Audio API
• audio volume
  • visualizing / Visualizing the audio volume
• audio volume, visualizing
  • HTML5 Web Audio API, setting up / Setting up the HTML5 Web Audio API
  • particle system, creating / Creating a particle system
  • sound, playing / Playing a sound and animating the particle system
  • particle system, animating / Playing a sound and animating the particle system

B

• background
  • setting up, in Three.js / Combining with a starry background
• basic scene
  • enhancing / Enhancing the basic scene
• basic scene, enhancing
  • easy controls, adding with dat.GUI library / Adding easy controls with the dat.GUI library
  • statistics element, adding for displaying frame rate / Add a statistics element to show the frame rate
• basic textures
  • adding, to globe / Adding basic textures to the globe
• Blender
  • URL, for downloading / Downloading and installing Blender
  • downloading / Downloading and installing Blender
  • installing / Downloading and installing Blender
  • URL, for portable version / Downloading and installing Blender
  • model, exporting from / Exporting the model
  • predefined materials, using / Using Blender's predefined materials in Three.js
  • predefined materials, setting up / Setting up a Blender material
  • UV mapping, setting up in / Setting up UV mapping in Blender
• Blender 2.70a / Installing Blender and the Three.js plugin
• bump map
  • about / Using a normal map to simulate elevations

C

• camera
  • trackball controls, adding to / Adding trackball controls to the camera
• camera controls
  • setting up / Setting up the globe and camera controls
• checkKey function
  • about / Configuring keyboard controls
• Chroma.js
  • URL, for downloading / Coloring the particles based on the amplitude
• Chrome
  • object with breakpoints, viewing / Looking at objects with breakpoints in Chrome
• Chrome debugger
  • working / Looking at objects with breakpoints in Chrome
• city
  • creating, from scratch / Creating a city from scratch
• collision detection
  • setting up / Setting up collision detection
  • objects, selecting / Selecting objects
• collisions
  • detecting / Detecting collisions
• color property
  • about / Generating a terrain with Math.random()
• colors
  • customizing, of individual particles / Customizing colors of individual particles
• configuration, keyboard controls / Configuring keyboard controls
• console logging
  • using, for debugging / Using console logging for debugging
• constructor
  • used, for creating JavaScript object / Creating a JavaScript object with a constructor
• create3DTerrain function
  • extending / Adding a texture
  • about / Creating a JavaScript object with a constructor
• createCSS3DObject function
  • about / Setting up a CSS3DRenderer skeleton
• createDiv function / Creating a 3D terrain using sprites
• CSS3DRenderer object
  • init() function, setting up / Setting up a CSS3DRenderer skeleton
• CSS3DRenderer skeleton
  • setting up / Setting up a CSS3DRenderer skeleton
• CSS sprites
  • used, for creating parametric terrain / Creating a parametric terrain using CSS sprites
  • used, for creating 3D terrain / Creating a 3D terrain using sprites
• cube
  • animating / Animating the cube
• cube animation
  • standard Three.js rotation behavior / The standard Three.js rotation behavior
  • edge rotation, creating with matrix-based transformation / Creating an edge rotation using matrix-based transformation
  • Tween.js, used for adding animation / Using Tween.js to add an animation
• cubeGeometry.applyMatrix function / Creating an edge rotation using matrix-based transformation
• custom geometry
  • waves, creating with / Creating waves with a custom geometry

D

• 2D information
  • adding, HTML canvas as texture used / Adding 2D information using HTML canvas as a texture
• 3D Google Maps cube
  • creating / Creating an interactive 3D Google Maps cube
  • displaying, HTML used / Displaying a part of Google Maps using HTML
  • positioning / Positioning and rotating the element
  • rotating / Positioning and rotating the element
• 3D set, of objects
  • maze layout, converting to / Converting the layout to a 3D set of objects
• 3D terrain
  • creating, from scratch / Creating a 3D terrain from scratch
  • generating, Math.random() used / Generating a terrain with Math.random()
  • generating, perlin noise used / Generating a terrain with a Perlin noise
  • texture, adding / Adding a texture
  • JavaScript object, creating with constructor / Creating a JavaScript object with a constructor
  • creating, CSS sprites used / Creating a 3D terrain using sprites
• dat.GUI library
  • used, for adding controls / Adding easy controls with the dat.GUI library
  • URL / Adding easy controls with the dat.GUI library
• debugging
  • console logging, using for / Using console logging for debugging
• depth argument
  • about / Generating a terrain with Math.random()
• directional light
  • adding / Adding directional and ambient lighting
• drawline function / Generating a maze layout, Converting the layout to a 3D set of objects
• dynamic colors
  • combining, for advanced visualizations creation / Combining dynamic colors to create advanced visualizations

E

• edge rotation
  • creating, matrix-based transformation used / Creating an edge rotation using matrix-based transformation
• elevations
  • simulating, normal maps used / Using a normal map to simulate elevations
• examples
  • debugging / Debugging the examples in this book

F

• faces
  • vertices, combining into / Combining vertices into faces
• faces property
  • about / Creating parametric trees
• facesTwig property
  • about / Creating parametric trees
• Fast Fourier Transform (FFT) / Setting up the HTML5 Web Audio API
• frames per second (FPS) / Add a statistics element to show the frame rate

G

• generateBuildingTexture() function
  • using / Creating a city from scratch
• getAverageVolume function
  • about / Playing a sound and animating the particle system
• getByteFrequencyData function
  • about / Playing a sound and animating the particle system
• getHighPoint function
  • about / Generating a terrain with Math.random()
• getPositionAndRotation function
  • implementing / Determining the target position and rotation
• Git, for various operating systems
  • URL, for installation manual / Getting the source code
• globe
  • setting up / Setting up the globe and camera controls
  • basic textures, adding to / Adding basic textures to the globe

H

• height argument
  • about / Generating a terrain with Math.random()
• HTML
  • used, for displaying Google Maps / Displaying a part of Google Maps using HTML
• HTML5 Web Audio
  • URL / Visualizing the audio volume
• HTML5 Web Audio API
  • setting up / Setting up the HTML5 Web Audio API
• HTML canvas, as texture
  • used, for adding 2D information / Adding 2D information using HTML canvas as a texture
• HTML elements
  • animating, with TweenJS / Animating HTML elements with TweenJS, Configuring TweenJS to run the animation
  • animating, with images as input / Using images as the input
• HTML elements animation
  • setting up / Setting up the animations
  • target position and rotation, determining / Determining the target position and rotation

I

• init() function / Creating a scene to contain all the objects, Using console logging for debugging
  • setting up, for CSS3DRenderer object / Setting up a CSS3DRenderer skeleton
• installation, Blender / Downloading and installing Blender
• installation, Three.js plugin / Installing the Three.js plugin

J

• JavaScript object
  • creating, constructor used / Creating a JavaScript object with a constructor

K

• keyboard controls
  • screenshot / The result we're aiming for in this chapter
  • configuring / Configuring keyboard controls

L

• lighting
  • improving / Adding textures and improving the lighting
• lights
  • ambient lighting / Adding directional and ambient lighting
  • point light / Adding directional and ambient lighting
  • spot light / Adding directional and ambient lighting
  • directional light / Adding directional and ambient lighting
• light sources
  • setting up / Setting up the light sources
• local development environment
  • setting up / Setting up a local development environment
  • source code, obtaining / Getting the source code
  • local web server, setting up / Setting up a local web server
• local web server
  • setting up / Setting up a local web server

M

• makeRotationX function / Creating an edge rotation using matrix-based transformation
• Math.random()
  • used, for generating 3D terrain / Generating a terrain with Math.random()
• matrix-based transformation
  • used, for creating edge rotation / Creating an edge rotation using matrix-based transformation
• maze
  • about / Creating the maze
  • creating / Creating the maze
• maze layout
  • generating / Generating a maze layout
  • converting, to 3D set of objects / Converting the layout to a 3D set of objects
• minimal Three.js web application
  • creating / Creating a minimal Three.js web application
  • scene, creating / Creating a scene to contain all the objects
  • mesh, adding / Adding a mesh created from geometry
• model
  • improving, advanced textures used / Improving the look with more advanced textures
  • displaying, in Three.js / Exporting a model from Blender and showing it in Three.js, Loading the model and showing it in Three.js
  • exporting, from Blender / Exporting the model
  • loading / Loading the model and showing it in Three.js
  • rendering, in Three.js / Exporting and rendering in Three.js
  • exporting, in Three.js / Exporting and rendering in Three.js
• modeled dinosaur
  • exporting, to Three.js / Exploring the model and exporting it to Three.js
  • animating, in Three.js / Loading and animating the model in Three.js
  • loading / Loading and animating the model in Three.js
• Mongoose
  • URL, for downloading / Running a portable version of Mongoose
• morph-based animations
  • working with / Working with morph-based animations in Three.js
  • model, exploring / Exploring the model and exporting it to Three.js
  • model, exporting to Three.js / Exploring the model and exporting it to Three.js
  • model, loading / Loading and animating the model in Three.js
  • model, animating / Loading and animating the model in Three.js

N

• normal map
  • used, for simulating elevations / Using a normal map to simulate elevations
  • about / Using a normal map to simulate elevations
• normals property
  • about / Creating parametric trees
• normalsTwig property
  • about / Creating parametric trees
• npm command, from Node.js
  • used, for running web server / Using the npm command from Node.js to run a web server

O

• objects, collision detection
  • selecting / Selecting objects
• objects, with breakpoints
  • viewing, in Chrome / Looking at objects with breakpoints in Chrome
• onEnd function / Using Tween.js to add an animation
• onkeydown event
  • about / Configuring keyboard controls
• onStart function / Using Tween.js to add an animation
• onUpdate function / Using Tween.js to add an animation

P

• parametric terrain
  • creating, CSS sprites used / Creating a parametric terrain using CSS sprites, Creating a 3D terrain using sprites
  • animating, TweenJS used / Animating the terrain with TweenJS
• parametric trees
  • creating / Creating parametric trees
• parseAnimations() function / Loading and animating the model in Three.js
• particles
  • colors, customizing of / Customizing colors of individual particles
  • individual particles, coloring / Coloring individual particles
  • coloring, based on amplitude / Coloring the particles based on the amplitude
• particle system
  • creating, manually / Creating a particle system by hand
  • Web Audio configuration, and render loop / Web Audio's configuration and the render loop
• particle system, audio volume
  • creating / Creating a particle system
  • animating / Playing a sound and animating the particle system
• particle system, creating
  • waves, creating with custom geometry / Creating waves with a custom geometry
• perlin noise
  • used, for generating 3D terrain / Generating a terrain with a Perlin noise
• playAnimation() function / Loading and animating the model in Three.js
• portable version, of Mongoose
  • running / Running a portable version of Mongoose
• pos property
  • using / Configuring TweenJS to run the animation
• predefined materials, Blender
  • using, in Three.js / Using Blender's predefined materials in Three.js
  • setting up / Setting up a Blender material
• procedural city generation
  • URL / Creating a city from scratch
• proctree.js library
  • used, for creating parametric trees / Creating parametric trees
  • URL / Creating parametric trees
• proctree.js library components
  • UV property / Creating parametric trees
  • faces property / Creating parametric trees
  • facesTwig property / Creating parametric trees
  • normal property / Creating parametric trees
  • root property / Creating parametric trees
  • uvsTwigs property / Creating parametric trees
  • verts property / Creating parametric trees
  • vertsTwig property / Creating parametric trees
• properties, AnalyserNode interface
  • smoothingTimeConstant / Setting up the HTML5 Web Audio API
  • fftSize / Setting up the HTML5 Web Audio API
• properties, for camera
  • left / Combining with a starry background
  • right / Combining with a starry background
  • top / Combining with a starry background
  • bottom / Combining with a starry background
  • near / Combining with a starry background
  • far / Combining with a starry background
• properties, THREE.Mesh object
  • position / The standard Three.js rotation behavior
  • rotation / The standard Three.js rotation behavior
  • scale / The standard Three.js rotation behavior
  • translateX(amount) / The standard Three.js rotation behavior
  • translateY(amount) / The standard Three.js rotation behavior
  • translateZ(amount) / The standard Three.js rotation behavior
• properties, THREE.ParticleSystemMaterial object
  • color / Creating a particle system
  • opacity / Creating a particle system
  • map / Creating a particle system
  • size / Creating a particle system
  • blending / Creating a particle system
  • vertexColors / Creating a particle system
  • transparent / Creating a particle system
• properties, THREE.SpotLight object
  • castShadow / Setting up the light sources
  • shadowCameraNear / Setting up the light sources
  • shadowCameraFar / Setting up the light sources
  • shadowCameraFov / Setting up the light sources
  • target / Setting up the light sources
  • shadowBias / Setting up the light sources
  • angle / Setting up the light sources
  • exponent / Setting up the light sources
  • onlyShadow / Setting up the light sources
  • shadowCameraVisible / Setting up the light sources
  • shadowDarkness / Setting up the light sources
  • shadowMapWidth / Setting up the light sources
  • shadowMapHeight / Setting up the light sources
• Python
  • used, for running web server / Using Python to run a web server

R

• random-maze-generator project
  • URL / Creating the maze
• raycaster.intersectObjects function
  • about / Selecting objects
• reflectivity, of area
  • defining, specular map used / Using a specular map to define the reflectivity of an area
• registerObject function / Creating a JavaScript object with a constructor
• repeating texture
  • adding / Adding a repeating texture
• requisites, Three.js / Looking at the requirements for Three.js
• root property
  • about / Creating parametric trees

S

• setupParticleSystem() function / Setting up the initial particle system
• skeletal-based animations
  • working with / Working with skeletal-based animations in Three.js
  • modeled dinosaur, exporting to Three.js / Exploring the model and exporting it to Three.js
  • modeled dinosaur, animating / Loading and animating the model in Three.js
  • modeled dinosaur, loading / Loading and animating the model in Three.js
• sound
  • playing / Playing a sound and animating the particle system
• source code, local development environment
  • obtaining / Getting the source code
• spacingX argument
  • about / Generating a terrain with Math.random()
• spacingY argument
  • about / Generating a terrain with Math.random()
• specular map
  • used, for defining reflectivity of area / Using a specular map to define the reflectivity of an area
• supported desktop browsers, Three.js
  • Internet Explorer / Looking at the requirements for Three.js
  • Mozilla Firefox / Looking at the requirements for Three.js
  • Google Chrome / Looking at the requirements for Three.js
  • Safari / Looking at the requirements for Three.js
  • Opera / Looking at the requirements for Three.js

T

• targetGeometry object / Animating the terrain with TweenJS
• target position
  • determining / Determining the target position and rotation
• target rotation
  • determining / Determining the target position and rotation
• textarea element
  • about / Setting up a CSS3DRenderer skeleton
• texture
  • adding, to 3D terrain / Adding a texture
• textures
  • adding / Adding textures and improving the lighting
  • repeating texture, adding / Adding a repeating texture
• THREE.CSS3DSprite object / Creating a parametric terrain using CSS sprites
• THREE.CubeGeometry object / Creating a city from scratch, Positioning and rotating the element
• THREE.Geometry object
  • about / Coloring individual particles
  • creating / Creating parametric trees
• Three.js
  • URL / Introducing Three.js
  • requisites / Looking at the requirements for Three.js
  • background, setting up in / Combining with a starry background
  • model, displaying in / Exporting a model from Blender and showing it in Three.js, Loading the model and showing it in Three.js
  • model, rendering in / Exporting and rendering in Three.js
  • model, exporting / Exporting and rendering in Three.js
• Three.js-based game, running on mobile browser
  • screenshot / Introducing Three.js
• Three.js plugin
  • installing / Installing the Three.js plugin
  • enabling / Enabling the Three.js plugin
• THREE.MeshNormalMaterial / Setting up the globe and camera controls
• THREE.Mesh object
  • properties / The standard Three.js rotation behavior
  • creating / Creating parametric trees
• THREE.ParticleSystemMaterial object
  • properties / Creating a particle system
• THREE.ParticleSystem object
  • creating / Creating a particle system
  • about / Creating a particle system, Generating a terrain with Math.random()
• THREE.Projecter object
  • about / Selecting objects
• THREE.Raycaster object
  • about / Setting up collision detection, Selecting objects
• THREE.SpotLight object
  • properties / Setting up the light sources
• THREE.TerrainGeometry object / Creating a JavaScript object with a constructor
• THREE.TrackballControls object / Adding trackball and keyboard controls
• THREE.Vector2 object
  • using / Adding a texture
• THREE.Vector3 object
  • using / Adding a texture
• trackball controls
  • adding, to camera / Adding trackball controls to the camera
• Tween.js
  • used, for adding animation / Using Tween.js to add an animation
• TweenJS
  • used, for animating HTML elements / Animating HTML elements with TweenJS, Configuring TweenJS to run the animation
  • used, for animating parametric terrain / Animating the terrain with TweenJS

U

• unprojectVector function
  • about / Selecting objects
• updateCubes function
  • about / Playing a sound and animating the particle system
• updateStructure() function / Setting up the animations
• updateWaves() function
  • about / Web Audio's configuration and the render loop
  / Creating waves with a custom geometry
• UV mapping
  • setting up, in Blender / Setting up UV mapping in Blender
• UV property
  • about / Creating parametric trees
• uvsTwigs property
  • about / Creating parametric trees

V

• vertices
  • about / What are vertices?
  • combining, into faces / Combining vertices into faces
• verts property
  • about / Creating parametric trees
• vertsTwig property
  • about / Creating parametric trees

W

• waves
  • creating, with custom geometry / Creating waves with a custom geometry
• WebGL
  • URL / Introducing Three.js
• web server
  • running, Python used / Using Python to run a web server
  • running, npm command from Node.js used / Using the npm command from Node.js to run a web server
• width argument
  • about / Generating a terrain with Math.random()
• World Port Index (WPI) / Adding 2D information using HTML canvas as a texture