Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Free Learning
Arrow right icon
Arrow up icon
GO TO TOP
Game Development with Three.js

You're reading from   Game Development with Three.js With Three.js you can create sophisticated 3D games that run in the web browser. This book is aimed at both the professional game designer and the enthusiast with a step by step approach including lots of tips and examples.

Arrow left icon
Product type Paperback
Published in Oct 2013
Publisher Packt
ISBN-13 9781782168539
Length 118 pages
Edition 1st Edition
Languages
Arrow right icon
Author (1):
Arrow left icon
Isaac Sukin Isaac Sukin
Author Profile Icon Isaac Sukin
Isaac Sukin
Arrow right icon
View More author details
Toc

Index

A

  • about$flags page / Choosing your environment
  • acceleration vector / Updating the player's movement and rotation
  • addGeometryHandler() method / Loaders
  • addVoxel() method / Designing a map
  • ambient light / Lighting
  • Ammo.js
    • about / Player collision
    • URL / Player collision
  • asset
    • managing / Asset management
  • asset management
    • loaders / Loaders
    • models, exporting to Three.js / Exporting to Three.js
    • entity, exporting from Three.js / Exporting from Three.js
    • loaders, managing / Managing loaders
    • mesh animation / Mesh animation, Morph animation, Skeletal animation
  • AudioObject / Sound

B

  • bandwidth constraints
    • combating / Bandwidth/network constraints
  • bots
    • adding / Bots
  • Bullet class / Bullets
  • bullets
    • adding / Bullets

C

  • <canvas> element / Been there, scene that
  • callbackProgress handler / Managing loaders
  • callbackProgress property / Managing loaders
  • camera object / Been there, scene that
  • camera parameter / Keyboard movement and mouse looking
  • camera projections
    • figure / Been there, scene that
  • Canary / Choosing your environment
  • Cannon.js
    • about / Player collision
    • URL / Player collision
  • Canvas inspection
    • URL / Choosing your environment
  • CanvasRenderer() method / Been there, scene that, Renderers, Particles and Sprites
  • castShadow property / Shadows
  • children array / Loaders
  • Circle
    • about / 2D primitives
  • city scene project
    • working / A city scene
    • updating, lighting used / Lighting
  • clicking
    • about / Clicking
  • client-server prediction model
    • working, steps / Networking and multiplayer
  • clock variable / Keyboard movement and mouse looking
  • clone() method / A city scene
  • ColladaLoader() method / Loaders
  • collideFloor() method / Voxel collision
  • color option / Materials
  • composer.render() method / Renderer effects and postprocessing
  • controller
    • FirstPersonControls / Keyboard movement and mouse looking
    • OculusControls / Keyboard movement and mouse looking
    • OrbitControls / Keyboard movement and mouse looking
    • PathControls / Keyboard movement and mouse looking
    • TrackballControls / Keyboard movement and mouse looking
    • TransformControls / Keyboard movement and mouse looking
  • controls variable / Keyboard movement and mouse looking
  • CTF
    • setting up / Setting up CTF
    • team, characteristics / Setting up CTF
    • maps modifying / Setting up CTF
    • particle system, creating / Particle systems
    • sound effect, creating / Sound
    • renderer effects, creating / Renderer effects and postprocessing
    • postprocessing effects, creating / Renderer effects and postprocessing
    • Renderer effects, creating / Renderer effects and postprocessing
  • Cube
    • about / 3D primitives
  • Culling
    • about / Rendering optimizations
    • view frustum culling / Rendering optimizations
    • backface culling / Rendering optimizations
    • occlusion culling / Rendering optimizations
  • custom geometries
    • about / Custom geometries
    • THREE.LatheGeometry / Custom geometries
    • THREE.PolyhedronGeometry / Custom geometries
    • THREE.ExtrudeGeometry / Custom geometries
    • THREE.ShapeGeometry / Custom geometries
    • THREE.TubeGeometry / Custom geometries
    • THREE.ParametricGeometry / Custom geometries
    • use cases / Custom geometries
  • Cylinder
    • about / 3D primitives

D

  • 2D primitives
    • Plane / 2D primitives
    • Circle / 2D primitives
    • Ring / 2D primitives
  • 3D primitives
    • about / 3D primitives
    • Cube / 3D primitives
    • Sphere / 3D primitives
    • Polyhydra / 3D primitives
    • Cylinder / 3D primitives
    • Torus / 3D primitives
    • TorusKnot / 3D primitives
  • 3D text
    • screenshot / Text
  • Date.now() method / JavaScript best practices
  • depth testing
    • about / Rendering optimizations
  • detail parameter / 3D primitives
  • Detector.addGetWebGLMessage() method / Renderers
  • development processes
    • JavaScript best practices / JavaScript best practices
    • workflow, changing / Existing workflows and level development
    • level development / Existing workflows and level development
  • directional light / Lighting
  • DirectionalLight object / Shadows
  • direction vector / Bullets
  • distance property / Clicking
  • DOF (depth-of-field) effect / Renderer effects and postprocessing
  • Download button / Been there, scene that

E

  • EdgeShader / Renderer effects and postprocessing
  • EffectComposer / Renderer effects and postprocessing
  • Euler integration / Physical movement
  • event.movementX property / Constructing a player
  • event.movementY property / Constructing a player
  • ExtrudeGeometry parameter / Custom geometries

F

  • face property / Clicking
  • faces property / Geometries
  • FileSystem API
    • URL / Bandwidth/network constraints
  • first-person shooter project
    • about / First-person shooter project
    • features / First-person shooter project
    • map, designing / Designing a map
    • player, constructing / Constructing a player
    • player movement / Player movement, Physical movement, Updating the player's movement and rotation
    • player collision / Player collision, Voxel collision
    • bots / Bots
    • bullets / Bullets
    • game loop, updating / Updating the game loop
  • FirstPersonControls controller / Keyboard movement and mouse looking, Designing a map
  • flag
    • capturing / Capturing the flag
  • fog types
    • FoxExp2 / Lighting
    • THREE.Fog / Lighting
  • frameDelta / Timing

G

  • game
    • designing, for Web / Game design for the Web
    • networking / Networking and multiplayer
    • networking, lock-step approach / Networking and multiplayer
    • networking, client-server prediction model / Networking and multiplayer
  • game loop
    • updating / Updating the game loop
  • game networking
    • about / Networking and multiplayer
    • approaches / Networking and multiplayer
    • approaches, lock-step / Networking and multiplayer
    • approaches, client-server prediction model / Networking and multiplayer
    • technologies / Technologies
  • geometries
    • about / Geometries
    • 3D primitives / 3D primitives
    • 2D primitives / 2D primitives
    • custom geometries / Custom geometries
    • text / Text
  • geometry.colors array / Particle systems
  • GeometryUtils.merge() method / A city scene
  • getDelta() method / Keyboard movement and mouse looking
  • GL
    • about / The wonderful world of Three.js
  • GLSL (open Graphics Library Shading Language) / Materials
  • Google’s Web Tracing Framework
    • URL / Performance-measuring tools
  • Grunt
    • URL / JavaScript best practices
    • about / JavaScript best practices

H

  • halfAccel vector / Updating the player's movement and rotation
  • height attribute / Been there, scene that, Rendering optimizations
  • heightSegments parameter / 3D primitives
  • helper object / Updating the player's movement and rotation
  • hemisphere light / Lighting
  • HORIZONTAL_UNIT variable / Designing a map
  • HTML5 Canvas API
    • about / The wonderful world of Three.js
  • HUD (heads-up display) / First-person shooter project

I

  • IcosahedronGeometry / Been there, scene that
  • IcosahedronGeometry constructor / 3D primitives
  • ImageUtils.loadTexture() function / Materials
  • intersectObjects() method / Clicking, Player collision
  • intersects array / Clicking
  • isometric / Been there, scene that

J

  • JSDuck
    • URL / JavaScript best practices

K

  • keyboard
    • movements / Keyboard movement and mouse looking
    • controllers / Keyboard movement and mouse looking
  • KeyboardControls class / Keyboard movement and mouse looking
  • keydown event / Keyboard movement and mouse looking
  • keydown listener / Updating the player's movement and rotation
  • keyframe / Morph animation
  • keyup event / Keyboard movement and mouse looking
  • keyup listener / Updating the player's movement and rotation

L

  • lights
    • about / Lighting
    • types / Lighting
    • types, ambient / Lighting
    • types, directional / Lighting
    • types, hemisphere / Lighting
    • types, point / Lighting
    • types, spot / Lighting
    • used, for city scene updating / Lighting
    • screenshot / Lighting
  • LightTable
    • URL / Choosing your environment
  • LiveReload
    • URL / Choosing your environment
  • load() method / Loaders
  • loadedModels property / Managing loaders
  • loadedTextures property / Managing loaders
  • loaders
    • about / Loaders
    • managing / Managing loaders
  • loading managers / Managing loaders
  • lock-step approach
    • about / Networking and multiplayer
  • LOD
    • about / Level of detail
  • LOD object / Level of detail
  • lookAt() method / A city scene

M

  • map
    • designing / Designing a map
  • mapCellFromPosition() method / Voxel collision
  • map property / Materials, Battery life and GPU memory
  • material constructors
    • MeshBasicMaterial / Materials
    • MeshNormalMaterial / Materials
    • MeshDepthMaterial / Materials
    • MeshLambertMaterial / Materials
    • MeshPhongMaterial / Materials
    • MeshFaceMaterial / Materials
    • ShaderMaterial / Materials
  • materials
    • about / Materials
    • constructors / Materials
    • properties / Materials
  • mesh.position.clone() method / Clicking
  • mesh animation
    • about / Mesh animation
    • types, morph animation / Morph animation
    • types, skeletal animation / Skeletal animation
  • MeshBasicMaterial / Been there, scene that
  • MeshBasicMaterial constructor / Materials
  • Mesh constructor / Constructing a player
  • MeshDepthMaterial constructor / Materials
  • MeshFaceMaterial constructor / Materials
  • MeshFaceMaterial container / Loaders
  • MeshLambertMaterial constructor / Materials
  • MeshNormalMaterial constructor / Materials
  • mesh object / Been there, scene that
  • MeshPhongMaterial constructor / Materials
  • MeshPhongMaterial documentation
    • URL / Materials
  • Midpoint integration / Physical movement
  • morph animation
    • about / Morph animation
  • MorphAnimMesh animation / Morph animation
  • morphNormal property / Morph animation
  • morphs array / Morph animation
  • morphTargetInfluences array / Skeletal animation
  • morphTargets property / Morph animation
  • mouse
    • controls / Keyboard movement and mouse looking
  • mousedown event / Clicking
  • mousemove event / Constructing a player
  • moveOutside() method / Voxel collision
  • multiplayer games
    • about / Networking and multiplayer
    • anticheating methods / Anticheating

N

  • network constraints
    • combating / Bandwidth/network constraints

O

  • object property / Clicking
  • OBJECTS array / Clicking
  • Octree / Player collision
  • OculusControls controller / Keyboard movement and mouse looking
  • onLoad parameter / Managing loaders
  • opacity option / Materials
  • openEnded parameter / 3D primitives
  • OpenGL
    • about / The wonderful world of Three.js
  • OrbitControls controller / Keyboard movement and mouse looking
  • origin / Been there, scene that
  • OrthographicCamera class / Clicking
  • OrthographicCamera object / Been there, scene that, Shadows
  • overdraw option / Materials

P

  • particle systems
    • about / Particle systems, Particles and Sprites
    • flag, capturing / Capturing the flag
    • sprites / Particles and Sprites
    • using / Particle systems
  • PathControls controller / Keyboard movement and mouse looking
  • performance considerations
    • for 3D games / Performance
    • bandwidth constraints / Bandwidth/network constraints
    • network constraints / Bandwidth/network constraints
    • LOD / Level of detail
    • optimizations, rendering / Rendering optimizations
    • battery life / Battery life and GPU memory
    • GPU memory / Battery life and GPU memory
    • performance-measuring tools / Performance-measuring tools
  • PerspectiveCamera class / Clicking
  • PerspectiveCamera object / Been there, scene that, Shadows
  • Physi.js
    • about / Player collision
    • URL / Player collision
  • physics updates
    • about / Timing
  • pitch / Constructing a player
  • Plane
    • about / 2D primitives
  • PlaneGeometry() method / A city scene
  • player
    • constructing / Constructing a player
  • Player class / Constructing a player, Bullets
  • player collision
    • detecting / Player collision
  • player collision detection
    • voxels, using / Player collision
    • rays, using / Player collision
    • intersection, using / Player collision
    • libraries, using / Player collision
    • voxel collision / Voxel collision
  • Player constructor / Constructing a player
  • player movement
    • physical movement / Physical movement
    • updating / Updating the player's movement and rotation
  • player object / Constructing a player, Loaders
  • player rotation
    • updating / Updating the player's movement and rotation
  • PointerLock.js
    • URL / Constructing a player
  • PointerLockControls controller / Keyboard movement and mouse looking
  • point light / Lighting
  • PointLight object / Shadows
  • point property / Clicking
  • Polyhedra
    • about / 3D primitives
  • position vector / Been there, scene that, A city scene, Particles and Sprites
  • postprocessing effect
    • creating, Three.js used / Renderer effects and postprocessing
    • shader effect, screenshot / Renderer effects and postprocessing
    • shader effect / Renderer effects and postprocessing
  • progress object / Managing loaders
  • progress parameter / Managing loaders

R

  • radiusSegments parameter / 3D primitives
  • Raycaster class / Player collision
  • receiveShadow property / Shadows
  • renderer effect
    • creating, Three.js used / Renderer effects and postprocessing
  • renderers
    • about / Been there, scene that, Renderers
  • render loop
    • constructing / Been there, scene that
  • RenderStats library
    • URL / Performance-measuring tools
  • requestAnimationFrame() method / Been there, scene that
  • resize function / Rendering optimizations
  • result parameter / Managing loaders
  • Ring
    • about / 2D primitives
  • RK4
    • about / Physical movement
  • roll / Constructing a player
  • rotate() method / Constructing a player
  • rotation vector / Been there, scene that

S

  • Scalable Vector Graphics
    • about / The wonderful world of Three.js
  • scale parameter / Rendering optimizations
  • scale vector / Particles and Sprites
  • Scene class / Been there, scene that
  • SceneExporter tool / Exporting from Three.js
  • SceneLoader / Loaders, Exporting from Three.js, Managing loaders
  • segments parameter / 3D primitives, 2D primitives
  • setSize() method / Been there, scene that
  • setup() function / Keyboard movement and mouse looking
  • setupThreeJS() method / Keyboard movement and mouse looking
  • ShaderMaterial constructor / Materials
  • shaders
    • about / Renderer effects and postprocessing
  • shading option / Materials
  • shadow camera / Shadows
  • shadowCameraFar distance / Shadows
  • shadowCameraNear distance / Shadows
  • shadowMapHeight property / Shadows
  • shadowMapWidth property / Shadows
  • shadows
    • about / Shadows
    • working / Shadows
  • shoot function / Bullets
  • skeletal animation
    • about / Skeletal animation
  • skinning
    • about / Skeletal animation
  • sortParticles property / Particle systems
  • sound effect
    • creating, Three.js used / Sound
  • Sources tab / Choosing your environment
  • Sparks / Particle systems
  • spatial coordinate system / Been there, scene that
  • speed scalar / Bullets
  • Sphere
    • about / 3D primitives
  • spot light / Lighting
  • sprites
    • about / Particles and Sprites
    • using / Particles and Sprites
  • StackOverflow / The wonderful world of Three.js
  • Stats.js
    • URL / Performance-measuring tools
  • supported blending modes
    • screenshot / Particles and Sprites

T

  • TCP / Technologies
  • Team class / Setting up CTF
  • text
    • about / Text
    • using / Text
  • The IndexedDB API
    • URL / Bandwidth/network constraints
  • THREE.AnimationHandler utility / Skeletal animation
  • THREE.AudioObject class / Sound
  • THREE.BufferGeometry class / Custom geometries
  • THREE.CSS3DRenderer / Renderers
  • THREE.ExtrudeGeometry / Custom geometries
  • THREE.Geometry class / Geometries, Custom geometries
  • THREE.Geometry object / Loaders
  • Three.js
    • about / The wonderful world of Three.js
    • URL / The wonderful world of Three.js
    • examples, URL / The wonderful world of Three.js
    • project, building / Let's code!
    • project, working / Been there, scene that
    • objects, displaying / Been there, scene that
    • scene, displaying / Been there, scene that
    • environment, choosing / Choosing your environment
    • documentation, URL / 3D primitives
    • models, exporting to / Exporting to Three.js
    • entity, exporting from / Exporting from Three.js
  • Three.js editor
    • screenshot / Choosing your environment
  • Three.js environment
    • choosing / Choosing your environment
  • THREE.JSONLoader / Loaders
  • Three.js scene
    • creating / Been there, scene that
    • geometries / Geometries, 3D primitives, 2D primitives, Custom geometries, Text
    • materials / Materials
    • city scene / A city scene
    • lighting / Lighting, Shadows
    • renderers / Renderers
  • THREE.LatheGeometry / Custom geometries
  • THREE.LOD object / Level of detail
  • THREE.Mesh class / Constructing a player
  • THREE.Mesh constructor / Been there, scene that
  • THREE.Mesh object / Asset management
  • THREE.MorphAnimMesh class / Morph animation
  • THREE.ParametricGeometry / Custom geometries
  • THREE.PolyhedronGeometry / Custom geometries
  • THREE.SceneLoader / Loaders
  • THREE.ShapeGeometry / Custom geometries
  • THREE.SkinnedMesh class / Skeletal animation
  • THREE.SkinnedMesh utility / Skeletal animation
  • THREE.SVGRenderer / Renderers
  • THREE.TextGeometry constructor / Text
  • THREE variable / Been there, scene that
  • THREEx
    • URL / Existing workflows and level development
  • timing
    • about / Timing
  • Tin.cr
    • URL / Choosing your environment
  • Torus
    • about / 3D primitives
  • TorusKnot
    • about / 3D primitives
  • totalModels property / Managing loaders
  • totalTextures property / Managing loaders
  • tQuery
    • URL / Existing workflows and level development
  • TrackballControls controller / Keyboard movement and mouse looking
  • TransformControls controller / Keyboard movement and mouse looking
  • transparency option / Materials
  • traverse() method / Capturing the flag

U

  • UDP / Technologies
  • unlit / Materials
  • update() method / Keyboard movement and mouse looking, Updating the player's movement and rotation, Bullets
  • updateAnimation() method / Morph animation
  • update function / Timing

V

  • Vector3 instance / Clicking
  • VERTICAL_UNIT variable / Designing a map
  • vertices property / Geometries
  • visible property / Capturing the flag
  • Voxel.js
    • URL / Existing workflows and level development
  • voxel collision
    • about / Voxel collision

W

  • Web
    • game, designing for / Game design for the Web
  • WebGL
    • about / The wonderful world of Three.js
  • WebGLRenderer() method / Renderers, Particles and Sprites
  • Web Performance Optimization (WPO) / Bandwidth/network constraints
  • Web Sockets API
    • URL / Technologies
  • width attribute / Been there, scene that, Rendering optimizations
  • wireframeLinewidth option / Materials
  • wireframe option / Materials

X

  • x property / Been there, scene that

Y

  • yaw / Constructing a player
  • y property / Been there, scene that

Z

  • z property / Been there, scene that
lock icon The rest of the chapter is locked
arrow left Previous Section
Register for a free Packt account to unlock a world of extra content!
A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.
Unlock this book and the full library FREE for 7 days
Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of
Renews at $19.99/month. Cancel anytime
Banner background image