Three.js开发指南:基于WebGL和HTML5在网页上渲染3D图形和动画(原书第3版)

2024/10/04 posted in  读书笔记
Tags: 

  •  Three.js开发指南:基于WebGL和HTML5在网页上渲染3D图形和动画(原书第3版)|200
    Three.js开发指南:基于WebGL和HTML5在网页上渲染3D图形和动画(原书第3版)|200
  • 书名: Three.js开发指南:基于WebGL和HTML5在网页上渲染3D图形和动画(原书第3版)
  • 作者: (美)乔斯·德克森(Jos Dirksen)
  • 简介:
  • 出版时间
  • ISBN:
  • 分类:
  • 出版社: 机械工业出版社

高亮划线

前言

  • 📌 使用Three.js的基本步骤。阅读完本章就能立刻创建你的第一个Three.js场景,也能直接在浏 ^CB-4qe6mO6j3G3e6bK6cM-4-908-957
    • ⏱ 2022-09-15 07:39:06

第1章 使用Three.js创建你的第一个三维场景

  • 📌 不同的材质对光源的反应是不一样的 ^CB-4qe6mO6j3G3e6bK6cM-5-18613-18629

    • ⏱ 2023-03-17 18:55:59
  • 📌 基本材质(THREE.MeshBasicMaterial)不会对光源有任何反应,基本材质只会使用指定的颜色来渲染物体 ^CB-4qe6mO6j3G3e6bK6cM-5-18635-18693

    • ⏱ 2023-03-17 18:56:23

第2章 构建Three.js应用的基本组件

  • 📌 在Three.js中几何体基本上是三维空间中的点集(也被称作顶点)和将这些点连接起来的面 ^CB-4qe6mO6j3G3e6bK6cM-6-11380-11424

    • ⏱ 2023-03-20 08:44:36
  • 📌 顶点顺序决定了某个面是面向摄像机还是背向摄像机的 ^CB-4qe6mO6j3G3e6bK6cM-6-12220-12244

    • ⏱ 2023-03-20 08:45:51
  • 📌 如果你想创建面向摄像机的面,那么顶点的顺序是顺时针的,反之顶点的顺序是逆时针的。 ^CB-4qe6mO6j3G3e6bK6cM-6-12245-12285

    • ⏱ 2023-03-20 08:47:35
  • 📌 computeFaceNormals()方法,当该方法执行时,Three.js会决定每个面的法向量,法向量用于决定不同光源下的颜色 ^CB-4qe6mO6j3G3e6bK6cM-6-12785-12850

    • ⏱ 2023-03-20 08:54:09
  • 📌 verticesNeedUpdate ^CB-4qe6mO6j3G3e6bK6cM-6-13847-13865

    • ⏱ 2023-03-23 08:33:39
  • 📌 computeFaceNormals ^CB-4qe6mO6j3G3e6bK6cM-6-13888-13906

    • ⏱ 2023-03-23 08:34:09
  • 📌 SceneUtils.createMulti-MaterialObject() ^CB-4qe6mO6j3G3e6bK6cM-6-14954-14993

    • ⏱ 2023-03-23 08:36:01
  • 📌 这里我们复制立方体的第一个子对象。请记住,mesh变量包含两个THREE.Mesh子对象:基于两个不同材质创建的。通过这个复制的几何体我们创建了一个新的网格,并命名为mesh2。使用translate()方法移动这个新创建的网格,删除之前的副本(如果存在)并把这个副本添加到场景中。[插图]在前面的章节中,我们使用THREE.SceneUtils对象的createMultiMaterialObject()方法为几何体添加了线框。在Three.js中还可以使用THREE.WireframeGeometry来添加线框。假设有一个几何体对象名为geom,可以通过下面代码基于geom创建一个线框对象:[插图]然后,基于新建的线框对象创建一个Three.LineSegments对象并将它添加到场景中: ^CB-4qe6mO6j3G3e6bK6cM-6-16019

    • ⏱ 2023-03-23 08:41:44
  • 📌 对象的位置是相对于它的父对象来说的 ^CB-4qe6mO6j3G3e6bK6cM-6-18372-18389

    • ⏱ 2023-03-23 08:43:03
  • 📌 摄像机的fov属性决定了横向视场。基于aspect属性,纵向视场也就相应地确定了。near属性决定了近面距离,far属性决定了远面距离。近面距离和远面距离之间的区域将会被渲染。 ^CB-4qe6mO6j3G3e6bK6cM-6-25338-25426

    • ⏱ 2023-03-27 08:08:41

第3章 学习使用Three.js中的光源

  • 📌 WebGL本身并不支持光源 ^CB-4qe6mO6j3G3e6bK6cM-7-802-815

    • ⏱ 2023-03-27 08:13:13
  • 📌 3.1 Three.js中不同种类的光源Three.js中有许多不同种类的光源,每种光源都有特别的行为和用法。在本章中,将讨论表3.1中所列光源。表 3.1[插图]本章主要分为两部分内容。首先,我们先看一下基础光源:THREE.AmbientLight、THREE.PointLight、THREE.SpotLight和THREE.DirectionalLight。所有这些光源都是基于THREE.Light对象扩展的,这个对象提供公用的功能。以上提到的光源都是简单光源,只需一些简单的配置即可,而且可用于创建大多数场景的光源。 ^CB-4qe6mO6j3G3e6bK6cM-7-1350

    • ⏱ 2023-03-27 08:13:34
  • 📌 THREE.AmbientLight不会生成阴影 ^CB-4qe6mO6j3G3e6bK6cM-7-2261-2285

    • ⏱ 2023-03-27 08:17:27

第4章 使用Three.js的材质

  • 📌 本章将深入探讨Three.js库提供的所有材质,你也将会从中学到如何运用这些材质创建漂亮的三维对象。本章将要探讨的材质如表4.1所示。表 4.1[插图][插图]如果浏览Three.js库的源代码,你可能看到过THREE.RawShaderMaterial。这是一种特殊的材质,只能和THREE.BufferedGeometry一起使用。 ^CB-4qe6mO6j3G3e6bK6cM-8-595

    • ⏱ 2023-03-29 08:32:58
  • 📌 THREE.MeshDepthMaterial ^CB-4qe6mO6j3G3e6bK6cM-8-7507-7530

    • ⏱ 2023-03-30 08:29:19
  • 📌 由物体到摄像机的距离决定的 ^CB-4qe6mO6j3G3e6bK6cM-8-7562-7575

    • ⏱ 2023-03-30 08:29:31
  • 📌 gl_Position变量是一个特殊变量,用来返回最终的位置 ^CB-4qe6mO6j3G3e6bK6cM-8-25196-25226

    • ⏱ 2023-03-31 08:40:32

第5章 学习使用几何体

  • 📌 fromBufferGeometry方法,可以接收基于THREE.BufferGeometry的对象,并将其数据导入到THREE.Geometry对象中 ^CB-4qe6mO6j3G3e6bK6cM-9-3099-3175

    • ⏱ 2023-04-03 08:10:53
  • 📌 fromGeometry ^CB-4qe6mO6j3G3e6bK6cM-9-3204-3216

    • ⏱ 2023-04-03 08:11:02

第6章 高级几何体和二元操作

  • 📌 通过THREE.ConvexGeometry,我们可以围绕一组点创建一个凸包。所谓凸包就是包围这组点的最小图形 ^CB-4qe6mO6j3G3e6bK6cM-10-1138-1193

    • ⏱ 2023-04-25 14:19:13
  • 📌 通过THREE.ExtrudeGeometry,你可以从一个二维图形创建出一个三维图形。 ^CB-4qe6mO6j3G3e6bK6cM-10-5169-5213

    • ⏱ 2023-05-04 08:31:01

读书笔记

本书评论

« Vue.js设计与实现 (霍春阳) 眼界决定你的高度:任正非给创业者的人生智慧课 »