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

Book Description

Create and animate stunning 3D graphics using the open source Three.js JavaScript library Overview

• Create and animate beautiful 3D graphics directly in the browser using JavaScript without the need to learn WebGL
• Learn how to enhance your 3D graphics with light sources, shadows, and advanced materials and textures
• Each subject is explained using extensive examples that you can directly use and adapt for your own purposes

In Detail 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. What you will learn from this book

• Create standard HTML skeleton and render loops for your Three.js projects
• Learn how to use the different geometries that are provided by Three.js
• Apply realistic lighting and shadows to the 3D objects you have created
• Learn how the different types of materials in Three.js work and how they interact with your 3D objects and the rest of the environment
• Use the different camera controls provided by Three.js to effortlessly navigate around your 3D scene
• Work with a particle system to create snow, rain, and galaxy-like effects
• Import and animate models from external formats such as OBJ, STL, Collada, and much more
• Create and run animations using either morph targets or bones animations
• Use advanced textures on materials to create realistic looking 3D objects using bump maps, normal maps, specular maps, and light maps
• Change the output of Three.js rendered using one of its post processing options
• Interact directly with WebGL by creating custom vertex and fragment shaders
• Apply physics to your 3D objects using the Physijs JavaScript library

Table of Contents

Chapter 1: Creating Your First 3D Scene with Three.js
Chapter 2: Working with the Basic Components That Make Up a Three.js Scene
Chapter 3: Working with the Different Light Sources Available in Three.js
Chapter 4: Working with the Three.js Materials
Chapter 5: Learning to Work with Geometries
Chapter 6: Using Advanced Geometries and Binary Operations
Chapter 7: Particles and the Particle System
Chapter 8: Creating and Loading Advanced Meshes and Geometries
Chapter 9: Animations and Moving the Camera
Chapter 10: Loading and Working with Textures
Chapter 11: Custom Shaders and Render Post Processing
Chapter 12: Adding Physics to Your Scene with Physijs

中文：

书名：Learning Three.js：WebGL的JavaScript 3D库

使用开源的Three.js脚本库创建和制作令人惊叹的3D图形 概述

• 无需学习WebGL即可直接在浏览器中使用JavaScript创建漂亮的3D图形并设置动画效果
• 了解如何使用光源、阴影以及高级材质和纹理增强3D图形
• 每个主题都使用大量的示例进行说明，您可以直接使用这些示例，并根据自己的目的进行调整

In Detail Three.js是一个JAVASCRIPT 3D库，它提供了一系列功能，可以在Web浏览器上直观地创建和显示令人惊叹的3D计算机图形，而不必处理WebGL低级API的复杂性。尽管WebGL使得在浏览器中创建3D图形成为可能，而不必使用插件，但是编程WebGL是困难和复杂的。这本书向你展示了Three.js如何让你独立于浏览器插件。如果你是一位经验丰富的网页设计师，想要在你的应用程序中为身临其境的设计环境定下基调，那么这本书是为你而写的。《学习Three.js：The JavaScript 3D Library for WebGL&#8221；》是一本实用的、示例丰富的书，它将帮助您掌握Three.js的所有功能。通过这本书，你将学习如何利用WebGL和现代浏览器的全部潜力，直接在你的浏览器中创建和制作华丽的3D场景，而不必学习WebGL。&#8220；学习Three.js：WebGL&#8221；的JavaScript 3D库首先回顾了Three.js中使用的基本概念和构建块。从那时起，它将使用大量的示例和代码样例对这些主题进行扩展。这将允许您以一种简单和交互的方式学习关于Three.js所需了解的一切。除了基本的概念，这本书将向你展示如何使用材质和纹理创建逼真的3D对象，以及如何从外部创建的模型加载它们。您将学习如何使用Three.js内置的相机控件轻松控制相机，以便您可以在已创建的3D场景中飞行或漫步。您还将学习如何使用变形和基于骨骼的动画以及如何将物理效果添加到场景中。 What you will learn from this book

• Create standard HTML skeleton and render loops for your Three.js projects
• 了解如何使用Three.js提供的不同几何
• 将逼真的照明和阴影应用于已创建的3D对象
• 了解Three.js中不同类型的材质如何工作，以及它们如何与3D对象和环境的其余部分交互
• 使用Three.js提供的不同相机控件轻松地在3D场景中导航
• Work with a particle system to create snow, rain, and galaxy-like effects
• 从OBJ、STL、COLLADA等外部格式导入模型并为其制作动画
• 使用变形目标或骨骼动画创建和运行动画
• 在材质上使用高级纹理，以使用凹凸贴图、法线贴图、镜面反射贴图和光照贴图创建外观逼真的3D对象
• 使用其后处理选项之一更改呈现的Three.js的输出
• Interact directly with WebGL by creating custom vertex and fragment shaders
• 使用Physijs JavaScript库将物理学应用于3D对象

Table of Contents

Chapter 1: Creating Your First 3D Scene with Three.js
Chapter 2: Working with the Basic Components That Make Up a Three.js Scene
Chapter 3: Working with the Different Light Sources Available in Three.js
Chapter 4: Working with the Three.js Materials
Chapter 5: Learning to Work with Geometries
Chapter 6: Using Advanced Geometries and Binary Operations
Chapter 7: Particles and the Particle System
第8章：创建和加载高级网格和几何图形
Chapter 9: Animations and Moving the Camera
Chapter 10: Loading and Working with Textures
Chapter 11: Custom Shaders and Render Post Processing
Chapter 12: Adding Physics to Your Scene with Physijs