Learning Three.js: The JavaScript 3D Library for WebGL

Learning Three.js: The JavaScript 3D Library for WebGL

By : Jos Dirksen

Buy this Book

Learning Three.js: The JavaScript 3D Library for WebGL

By: Jos Dirksen

Buy this Book

Overview of this book

Three.js is a JavaScript 3D library that offers a wide range of features for creating and displaying stunning 3D computer graphics on a web browser in an intuitive manner using JavaScript without having to deal with the complexity of a WebGL low-level API. Even though WebGL makes it possible to create 3D graphics in the browser without having to use plugins, programming WebGL, however, is hard and complex. This book shows you how Three.js allows you to be independent of browser plugins. If you are an experienced web designer who wants to set the tone for an immersive design environment in your applications then this book is for you. "Learning Three.js: The JavaScript 3D Library for WebGL" is a practical, example-rich book that will help you to master all the features of Three.js. With this book, you’ll learn how to create and animate gorgeous looking 3D scenes directly in your browser utilizing the full potential of WebGL and modern browsers without having to learn WebGL. "Learning Three.js: The JavaScript 3D Library for WebGL" starts by going over the basic concepts and building blocks used in Three.js. From there on, it will expand on these subjects using extensive examples and code samples. This will allow you to learn everything you need to know about Three.js in an easy and interactive manner. Besides the basic concepts, this book will show you how you can create realistic looking 3D objects using materials and textures as well as how to load them from externally created models. You’ll learn how to easily control the camera using the Three.js build-in camera controls so you can fly or walk around the 3D scene you have created. You will also learn how to use morph and bones-based animation and how to add physics to your scene. After reading Learning Three.js: The JavaScript 3D Library for WebGL and playing around with the extensive set of examples, you’ll know everything that is required to create 3D animating graphics using Three.js that run in any browser.

Learning Three.js: The JavaScript 3D Library for WebGL

Credits

About the Author

Acknowledgement

About the Reviewers

www.PacktPub.com

Preface

Free Chapter

Creating Your First 3D Scene with Three.js

Requirements for using Three.js

Getting the source code

Creating an HTML skeleton page

Rendering and viewing a 3D object

Adding materials, lights, and shadows

Expanding your first scene with animations

Using the dat.GUI library to make experimenting easier

Using the ASCII effect

Summary

Working with the Basic Components That Make Up a Three.js Scene

Creating a scene

Working with the Geometry and Mesh objects

Using the available cameras for different uses

Summary

Working with the Different Light Sources Available in Three.js

Exploring the lights provided by Three.js

Learning about the basic lights

Summary

Working with the Three.js Materials

Understanding the common material properties

Starting with the simple Mesh materials (basic, depth, and face)

Learning about the advanced materials

Using the materials for a line geometry

Summary

Learning to Work with Geometries

The basic geometries provided by Three.js

Summary

Using Advanced Geometries and Binary Operations

ConvexGeometry

LatheGeometry

Create a geometry by extruding

Creating 3D text

Using binary operations to combine meshes

Summary

Particles and the Particle System

Understanding particles

Particles, the particle system, and the BasicParticleMaterial

Styling particles with the HTML5 canvas

Using textures to style particles

Creating a particle system from an advanced geometry

Summary

Creating and Loading Advanced Meshes and Geometries

Geometry grouping and merging

Summary

Animations and Moving the Camera

Basic animations

Working with the camera

Morphing and skeletal animation

Creating animations using external models

Summary

Loading and Working with Textures

Using textures in materials

Advanced usage of textures

Summary

Custom Shaders and Render Post Processing

Setting up the post processing

Post processing passes

Creating custom post processing shaders

Summary

Adding Physics to Your Scene with Physijs

Creating a basic Three.js scene ready for Physijs

Material properties

Basic supported shapes

Using constraints to limit movement of objects

Summary

Index

Customer Reviews

5 star

4 star

3 star

2 star

1 star

About the Reviewers

Andrea Barisone works for a leading Italian IT company and has over 13 years of experience in Information Technology, working on corporate projects as a Developer using different technologies. He has also strong experience in the ECM Systems, and several J2EE certifications. He has great ability to acquire new technologies and to exploit the knowledge acquired while working with different environments and technologies.

Andrea is a Technical Reviewer for Agile Web Development with Rails 4 by Pragmatic Bookshelf, and also for BPEL and Java Cookbook by Packt Publishing (work in progress.)

Will Crichton has been a Web Developer for many years. He is currently studying Computer Science at the Carnegie Mellon University. Previously, he has worked with a web design company, Webspec Design, and a biotechnology company, Pioneer Hi-Bred. Beyond just work, Will loves creating web applications—many merely adopted JavaScript, but he was born to it. He has created several frameworks and applications by using HTML5 technologies and continues to do more every day.

Yi-Fan Liao is a Frontend Developer who is enthusiastic about exploring the possibilities of the web. He started programming with .NET for building an online medicine tutoring application in 2004 and is proficient in web application design, architecture design, and performance tuning. He has expertise in HTML5 multiplayer game development and extensive experience in JavaScript canvas animation. Yi-Fan loves widget-making and knowledge-sharing. He was a speaker for Begin Three.js at JSDC 2013 and is located in Taipei, Taiwan.

Sebastian Poreba is a JavaScript Developer with a game development background. At work, he uses the Google Closure tool chain for data analysis application. After hours, he plays with WebGL and physics, and blogs at www.smashinglabs.pl

I. Abiyasa Suhardi is an Indonesian guy living a double life in Berlin, Germany. His day job is as a Frontend Developer doing Flash/Flex, HTML5, and JavaScript programming. His passion is working on indie game projects in the evenings, weekends, or whenever he has free time. He is sort of like Batman, but instead of saving the city himself, he made his game characters the heroes.

He has a Bachelor's Degree in Informatics Engineering, a Master's Degree in Digital Media, and 9 years of experience working in the IT world, ranging from C/C++ for an intranet portal, teaching Macromedia Director, founding a J2ME game company, RIA Development using Flash/Flex, and mobile development with Android and Adobe AIR, to JavaScript development for backend and frontend.

Currently, he is working in a startup company, while backing up his partner-in-crime, his wife, in building their own startup.

You can follow his work at http://www.abiyasa.com and connect with him on Twitter (@abiyasasuhardi).

Learning Three.js: The JavaScript 3D Library for WebGL

By : Jos Dirksen

Learning Three.js: The JavaScript 3D Library for WebGL

By: Jos Dirksen

Overview of this book

Related Content you might be interested in

Current Title:

Learning Three.js: The JavaScript 3D Library for WebGL

About the Reviewers