Learn Three.js: Programming 3D animations and visualizations for the web with HTML5 and WebGL, 3/e

Jos Dirksen

買這商品的人也買了...

商品描述

Create and animate stunning 3D browser based graphics with Three.js JavaScript library

Key Features

  • Enhance your 3D graphics with light sources, shadows, advanced materials, and textures
  • Load models from external sources, and visualize and animate them directly from JavaScript
  • Create your own custom WebGL shader and explore the postprocessing feature of Three.js

Book Description

WebGL makes it possible to create 3D graphics in the browser without having to use plugins such as Flash and Java. Programming WebGL, however, is difficult and complex. With Three.js, it is possible to create stunning 3D graphics in an intuitive manner using JavaScript, without having to learn WebGL. With this book, you'll learn how to create and animate beautiful looking 3D scenes directly in your browser-utilizing the full potential of WebGL and modern browsers. It starts with 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. You will learn to create, or load, from externally created models, realistic looking 3D objects using materials and textures. You'll find out how to easily control the camera using the Three.js built-in in camera controls, which will enable you to fly or walk around the 3D scene you created. You will then use the HTML5 video and canvas elements as a material for your 3D objects and to animate your models. Finally, you will learn to use morph and skeleton-based animation, and even how to add physics, such as gravity and collision detection, to your scene. After reading this book, you'll know everything that is required to create 3D animated graphics using Three.js.

What you will learn

  • Work with the different types of materials in Three.js and see how they interact with your 3D objects and the rest of the environment
  • Implement the different camera controls provided by Three.js to effortlessly navigate around your 3D scene
  • Work with vertices directly to create snow, rain, and galaxy-like effects
  • Import and animate models from external formats, such as OBJ, STL, and COLLADA
  • Create and run animations using morph targets and bones animations
  • Explore advanced textures on materials to create realistic looking 3D objects by using bump maps, normal maps, specular maps, and light maps
  • Interact directly with WebGL by creating custom vertex and fragment shaders

Who this book is for

The ideal target audience for this book would be JavaScript developers who who want to learn how to use the Three.js library

Table of Contents

  1. Creating Your First 3D Scene with Three.js
  2. Basic Components That Make Up a Three.js Scene
  3. Working with the Different Light Sources Available in Three.js
  4. Working with Three.js Materials
  5. Learning to Work with Geometries
  6. Advanced Geometries and Binary Operations
  7. Particles, Sprites, and the Point Cloud
  8. Creating and Loading Advanced Meshes and Geometries
  9. Animation and moving the camera
  10. Loading and Working with Textures
  11. Custom Shaders, Render Postprocessing and Raycaster
  12. Physics, Sounds for Your Scene

商品描述(中文翻譯)

使用Three.js JavaScript库创建和动画浏览器中令人惊叹的3D图形

主要特点

- 使用光源、阴影、高级材质和纹理增强您的3D图形
- 从外部源加载模型,并直接从JavaScript可视化和动画化它们
- 创建自定义的WebGL着色器,并探索Three.js的后处理功能

书籍描述

WebGL使得在浏览器中创建3D图形成为可能,而无需使用Flash和Java等插件。然而,编程WebGL是困难且复杂的。使用Three.js,您可以使用直观的方式使用JavaScript创建令人惊叹的3D图形,而无需学习WebGL。通过本书,您将学习如何在现代浏览器中直接创建和动画化美丽的3D场景,充分利用WebGL和现代浏览器的潜力。它从Three.js中使用的基本概念和构建块开始。从那里开始,它将通过广泛的示例和代码示例扩展这些主题。您将学习如何使用材质和纹理创建或加载来自外部创建的逼真的3D对象。您将了解如何使用Three.js内置的相机控制轻松控制相机,从而能够在您创建的3D场景中飞行或行走。然后,您将使用HTML5视频和画布元素作为您的3D对象的材质,并为您的模型添加动画。最后,您将学习如何使用变形和基于骨骼的动画,甚至如何向场景中添加物理效果,如重力和碰撞检测。阅读本书后,您将了解使用Three.js创建3D动画图形所需的一切。

您将学到什么

- 使用Three.js中的不同类型材质,并了解它们如何与您的3D对象和环境的其他部分交互
- 实现Three.js提供的不同相机控制,轻松导航您的3D场景
- 直接使用顶点创建雪、雨和星系等效果
- 从OBJ、STL和COLLADA等外部格式导入和动画化模型
- 使用变形目标和骨骼动画创建和运行动画
- 使用凹凸贴图、法线贴图、高光贴图和光照贴图在材质上创建逼真的3D对象
- 通过创建自定义顶点和片段着色器直接与WebGL交互
- 使用物理效果和声音为您的场景增添乐趣

本书适合对象

本书的理想目标读者是希望学习如何使用Three.js库的JavaScript开发人员

目录

1. 使用Three.js创建您的第一个3D场景
2. 构成Three.js场景的基本组件
3. 使用Three.js中可用的不同光源
4. 使用Three.js材质
5. 学习使用几何体
6. 高级几何体和二进制操作
7. 粒子、精灵和点云
8. 创建和加载高级网格和几何体
9. 动画和相机移动
10. 加载和使用纹理
11. 自定义着色器、渲染后处理和射线投射
12. 物理效果和场景声音