2024/10/04
posted in
读书笔记
2024/10/04
posted in
读书笔记
Three.js开发指南:基于WebGL和HTML5在网页上渲染3D图形和动画(原书第3版)|200 - 书名: Three.js开发指南:基于WebGL和HTML5在网页上渲染3D图形和动画(原书第3版)
- 作者: (美)乔斯·德克森(Jos Dirksen)
- 简介:
- 出版时间
- ISBN:
- 分类:
- 出版社: 机械工业出版社
📌 不同的材质对光源的反应是不一样的 ^CB-4qe6mO6j3G3e6bK6cM-5-18613-18629
📌 基本材质(THREE.MeshBasicMaterial)不会对光源有任何反应,基本材质只会使用指定的颜色来渲染物体 ^CB-4qe6mO6j3G3e6bK6cM-5-18635-18693
📌 在Three.js中几何体基本上是三维空间中的点集(也被称作顶点)和将这些点连接起来的面 ^CB-4qe6mO6j3G3e6bK6cM-6-11380-11424
📌 顶点顺序决定了某个面是面向摄像机还是背向摄像机的 ^CB-4qe6mO6j3G3e6bK6cM-6-12220-12244
📌 如果你想创建面向摄像机的面,那么顶点的顺序是顺时针的,反之顶点的顺序是逆时针的。 ^CB-4qe6mO6j3G3e6bK6cM-6-12245-12285
📌 computeFaceNormals()方法,当该方法执行时,Three.js会决定每个面的法向量,法向量用于决定不同光源下的颜色 ^CB-4qe6mO6j3G3e6bK6cM-6-12785-12850
📌 verticesNeedUpdate ^CB-4qe6mO6j3G3e6bK6cM-6-13847-13865
📌 computeFaceNormals ^CB-4qe6mO6j3G3e6bK6cM-6-13888-13906
📌 SceneUtils.createMulti-MaterialObject() ^CB-4qe6mO6j3G3e6bK6cM-6-14954-14993
📌 这里我们复制立方体的第一个子对象。请记住,mesh变量包含两个THREE.Mesh子对象:基于两个不同材质创建的。通过这个复制的几何体我们创建了一个新的网格,并命名为mesh2。使用translate()方法移动这个新创建的网格,删除之前的副本(如果存在)并把这个副本添加到场景中。[插图]在前面的章节中,我们使用THREE.SceneUtils对象的createMultiMaterialObject()方法为几何体添加了线框。在Three.js中还可以使用THREE.WireframeGeometry来添加线框。假设有一个几何体对象名为geom,可以通过下面代码基于geom创建一个线框对象:[插图]然后,基于新建的线框对象创建一个Three.LineSegments对象并将它添加到场景中: ^CB-4qe6mO6j3G3e6bK6cM-6-16019
📌 对象的位置是相对于它的父对象来说的 ^CB-4qe6mO6j3G3e6bK6cM-6-18372-18389
📌 摄像机的fov属性决定了横向视场。基于aspect属性,纵向视场也就相应地确定了。near属性决定了近面距离,far属性决定了远面距离。近面距离和远面距离之间的区域将会被渲染。 ^CB-4qe6mO6j3G3e6bK6cM-6-25338-25426
📌 WebGL本身并不支持光源 ^CB-4qe6mO6j3G3e6bK6cM-7-802-815
📌 3.1 Three.js中不同种类的光源Three.js中有许多不同种类的光源,每种光源都有特别的行为和用法。在本章中,将讨论表3.1中所列光源。表 3.1[插图]本章主要分为两部分内容。首先,我们先看一下基础光源:THREE.AmbientLight、THREE.PointLight、THREE.SpotLight和THREE.DirectionalLight。所有这些光源都是基于THREE.Light对象扩展的,这个对象提供公用的功能。以上提到的光源都是简单光源,只需一些简单的配置即可,而且可用于创建大多数场景的光源。 ^CB-4qe6mO6j3G3e6bK6cM-7-1350
📌 THREE.AmbientLight不会生成阴影 ^CB-4qe6mO6j3G3e6bK6cM-7-2261-2285
📌 本章将深入探讨Three.js库提供的所有材质,你也将会从中学到如何运用这些材质创建漂亮的三维对象。本章将要探讨的材质如表4.1所示。表 4.1[插图][插图]如果浏览Three.js库的源代码,你可能看到过THREE.RawShaderMaterial。这是一种特殊的材质,只能和THREE.BufferedGeometry一起使用。 ^CB-4qe6mO6j3G3e6bK6cM-8-595
📌 THREE.MeshDepthMaterial ^CB-4qe6mO6j3G3e6bK6cM-8-7507-7530
📌 由物体到摄像机的距离决定的 ^CB-4qe6mO6j3G3e6bK6cM-8-7562-7575
📌 gl_Position变量是一个特殊变量,用来返回最终的位置 ^CB-4qe6mO6j3G3e6bK6cM-8-25196-25226
📌 fromBufferGeometry方法,可以接收基于THREE.BufferGeometry的对象,并将其数据导入到THREE.Geometry对象中 ^CB-4qe6mO6j3G3e6bK6cM-9-3099-3175
📌 fromGeometry ^CB-4qe6mO6j3G3e6bK6cM-9-3204-3216
📌 通过THREE.ConvexGeometry,我们可以围绕一组点创建一个凸包。所谓凸包就是包围这组点的最小图形 ^CB-4qe6mO6j3G3e6bK6cM-10-1138-1193
📌 通过THREE.ExtrudeGeometry,你可以从一个二维图形创建出一个三维图形。 ^CB-4qe6mO6j3G3e6bK6cM-10-5169-5213