Three.js Essentials


Three.js Essentials
eBook: $19.99
Formats: PDF, PacktLib, ePub and Mobi formats
$17.00
save 15%!
Print + free eBook + free PacktLib access to the book: $52.98    Print cover: $32.99
$49.99
save 6%!
Free Shipping!
UK, US, Europe and selected countries in Asia.
Also available on:
Overview
Table of Contents
Author
Support
Sample Chapters
  • Acquire thorough knowledge of the essential features of Three.js, explained using comprehensive examples
  • Animate HTML5 elements directly from Three.js using the CSS3 3D renderer
  • Visualize information such as sound and open data in beautiful 3D

Book Details

Language : English
Paperback : 198 pages [ 235mm x 191mm ]
Release Date : July 2014
ISBN : 1783980869
ISBN 13 : 9781783980864
Author(s) : Jos Dirksen
Topics and Technologies : All Books, Web Development, Open Source


Table of Contents

Preface
Chapter 1: Get Up and Running with Three.js
Chapter 2: Creating a 3D World Globe and Visualizing Open Data
Chapter 3: Navigate around a Randomly Generated Maze
Chapter 4: Visualizing Audio Data with a Particle System
Chapter 5: Programmatic Geometries
Chapter 6: Combining HTML and Three.js with CSS3DRenderer
Chapter 7: Loading and Animating External Models Using Blender
Index
  • Chapter 1: Get Up and Running with Three.js
    • Introducing Three.js
    • Looking at the requirements for Three.js
    • Setting up a local development environment
      • Getting the source code
      • Setting up a local web server
        • Using Python to run a web server
        • Using the npm command from Node.js to run a web server
        • Running a portable version of Mongoose
    • Creating a minimal Three.js web application
      • Creating a scene to contain all the objects
      • Adding a mesh created from geometry
        • What are vertices?
        • Combining vertices into faces
    • Enhancing the basic scene
      • Adding easy controls with the dat.GUI library
      • Add a statistics element to show the frame rate
    • Debugging the examples in this book
      • Using console logging for debugging
      • Looking at objects with breakpoints in Chrome
    • Summary
  • Chapter 2: Creating a 3D World Globe and Visualizing Open Data
    • Setting up the globe and camera controls
    • Adding basic textures to the globe
    • Adding directional and ambient lighting
    • Combining with a starry background
    • Improving the look with more advanced textures
      • Using a normal map to simulate elevations
      • Using a specular map to define the reflectivity of an area
    • Adding 2D information using HTML canvas as a texture
    • Summary
  • Chapter 3: Navigate around a Randomly Generated Maze
    • The result we're aiming for in this chapter
    • Creating the maze
      • Generating a maze layout
      • Converting the layout to a 3D set of objects
    • Animating the cube
      • The standard Three.js rotation behavior
      • Creating an edge rotation using matrix-based transformation
      • Using Tween.js to add an animation
    • Setting up collision detection
      • Selecting objects
      • Detecting collisions
    • Adding textures and improving the lighting
      • Adding a repeating texture
      • Setting up the light sources
    • Adding trackball and keyboard controls
      • Adding trackball controls to the camera
      • Configuring keyboard controls
    • Summary
  • Chapter 4: Visualizing Audio Data with a Particle System
    • Visualizing the audio volume
      • Setting up the HTML5 Web Audio API
      • Creating a particle system
      • Playing a sound and animating the particle system
    • Creating a particle system by hand
      • Web Audio's configuration and the render loop
      • Creating waves with a custom geometry
    • Customizing colors of individual particles
      • Coloring individual particles
      • Coloring the particles based on the amplitude
    • Combining dynamic colors to create advanced visualizations
      • Setting up the initial particle system
      • Calculating volumes for each range
      • Determining particles that need to be updated and setting the height and color of an individual particle
    • Summary
  • Chapter 5: Programmatic Geometries
    • Creating a 3D terrain from scratch
      • Generating a terrain with Math.random()
      • Generating a terrain with a Perlin noise
      • Adding a texture
      • Creating a JavaScript object with a constructor
    • Creating a city from scratch
    • Creating parametric trees
    • Summary
  • Chapter 6: Combining HTML and Three.js with CSS3DRenderer
    • Setting up a CSS3DRenderer skeleton
    • Creating an interactive 3D Google Maps cube
      • Displaying a part of Google Maps using HTML
      • Positioning and rotating the element
    • Animating HTML elements with TweenJS
      • Using images as the input
      • Setting up the animations
        • Determining the target position and rotation
        • Configuring TweenJS to run the animation
    • Creating a parametric terrain using CSS sprites
      • Creating a 3D terrain using sprites
      • Animating the terrain with TweenJS
    • Summary
  • Chapter 7: Loading and Animating External Models Using Blender
    • Installing Blender and the Three.js plugin
      • Downloading and installing Blender
      • Installing the Three.js plugin
      • Enabling the Three.js plugin
    • Exporting a model from Blender and showing it in Three.js
      • Exporting the model
      • Loading the model and showing it in Three.js
    • Using Blender's predefined materials in Three.js
      • Setting up a Blender material
      • Setting up UV mapping in Blender
      • Exporting and rendering in Three.js
    • Working with skeletal-based animations in Three.js
      • Exploring the model and exporting it to Three.js
      • Loading and animating the model in Three.js
    • Working with morph-based animations in Three.js
      • Exploring the model and exporting it to Three.js
      • Loading and animating the model in Three.js
    • Summary

Jos Dirksen

Jos Dirksen has worked as a software developer and architect for more than a decade. He has quite a lot of experience in a large range of technologies that range from backend technologies, such as Java and Scala, to frontend development using HTML5, CSS, and JavaScript. Besides working with these technologies, he also regularly speaks at conferences and likes to write about new and interesting technologies on his blog. He also likes to experiment with new technologies and see how they can be best used to create beautiful data visualizations, the results of which you can see on his blog at http://www.smartjava.org/.

Jos currently works as an enterprise architect for Malmberg, a large Dutch publisher of educational material. He helps to create a new digital platform for the creation and publication of educational content for primary, secondary, and vocational education. Previously, he worked in many different roles in the private and public sectors, ranging from private companies such as Philips and ASML to organizations in the public sector, such as the Department of Defense.

Jos has already written a book on Three.js named Learning Three.js: The JavaScript 3D Library for WebGL,Packt Publishing, which is an in-depth description of all the features Three.js provides. Besides his interest in frontend JavaScript and HTML5 technologies, he is also interested in backend service development using REST and traditional web service technologies. He has already written two books on this subject. He is the co-author along with Tijs Rademakers of Open-Source ESBs in Action, Manning Publications, an action book that was published in 2008. In 2012, he published a book on how to apply SOA Governance in a practical manner, titled SOA Governance in Action, Manning Publications.

Sorry, we don't have any reviews for this title yet.

Code Downloads

Download the code and support files for this book.


Submit Errata

Please let us know if you have found any errors not listed on this list by completing our errata submission form. Our editors will check them and add them to this list. Thank you.

Sample chapters

You can view our sample chapters and prefaces of this title on PacktLib or download sample chapters in PDF format.

Frequently bought together

Three.js Essentials +    NetBeans Platform 6.9 Developer's Guide =
50% Off
the second eBook
Price for both: $30.40

Buy both these recommended eBooks together and get 50% off the cheapest eBook.

What you will learn from this book

  • Create standard skeletons and animation loops for Three.js projects that support WebGL and CSS3 3D
  • Use textures and materials to their fullest to enhance rendering of an object
  • Apply different types of lighting using the different light sources available
  • Animate geometries, particle systems, and HTML5 elements with Three.js and Tween.js
  • Create procedural and random geometries from scratch
  • Load geometries from external sources and work with Blender as a 3D modeling tool
  • Work with particle systems for advanced visualizations

In Detail

Create beautiful visualizations and 3D scenes using Three.js with this practical, example-rich book. Learn all the core concepts of Three.js, and whether you are targeting mobile devices or desktop browsers, you will gain the necessary skills to build a 3D application and improve web performance.

From setting up a development environment and creating your first Three.js scene, you will quickly dive into more complex scene-making. Discover a variety of possible scenes from how to make a rotating planet with data overlay to mini games. Through these examples, you will be shown an array of skills from using materials, controls, and lighting to creating particle systems and geometries from scratch.

By the end of this book, you'll be able to effectively and confidently create 3D scenes using different lights and materials, create visualizations using particle systems, animate web pages, and incorporate Blender in your 3D workflow.

Approach

This book is an easy-to-follow guide that shows the essential parts of Three.js through a set of extensive examples. Through the explanation of these examples, you’ll learn everything you need to know about Three.js.

Who this book is for

If you already know JavaScript and want to quickly learn the essentials of Three.js, this book is for you. No prior knowledge of Three.js, WebGL, 3D modeling, or Math is required.

Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software