Three.js大纲整理0116
其他
2019-01-23 09:50:53
阅读次数: 0
第一章 绪论(具体名字另定)
- Web3D简介
- Web3D发展历程
- OpneGL\OpenGLES
- Canvas3D
- CSS3D
- WebGL
- Web3D相关技术
- WebVR
- 要点一：VR技术介绍
- 要点二：WebVR优点缺点
- 要点三：WebVR与Three.js
- WebAR
- 要点一：AR技术介绍
- 要点二：WebAR优点缺点
- 要点三：WebAR与Three.js
- WebGL简介
- Three.js简介
- Three.js的优势
- Three.js起步
- 配置环境
- 获取three.js库
- requestAnimationFrame()
- dat.GUI简化实验流程
- 使浏览器对常见自适应
- 应用
第二章 基本组件
- 场景
- 创建场景
- 要点一：场景的基本功能
- 要点二：给场景添加雾化效果
- 要点三：overrsideMaterial
- 相机
- 相机种类
- 相机位置
- 要点一：position
- 要点二：LookAt
- 要点三：LookUp
- 几何对象
- 基础几何对象
- 创建几何对象
- 核心函数\属性
- add(object)
- children
- getObjectByName(name,recursive)
- remove(object)
- traverse(function)
- fog
- overrideMaterial
- 二维几何体
- PlaneGeometry
- CircleGeometry
- 三维几何体
- 简介
- 要点一：立方体有八个角。每个角都可以定义为x, y, z坐标。每个立方体在三维空间中有8个点。这些点称为顶点，其中一个点称为垂直点
- 要点二：立方体有六条边，每个角有一个顶点。一个面总是由三个顶点组成一个三角形。所以，在立方体的情况下，每条边由两个三角形组成，构成完整的边
- ShapeGeometry
- CubeGeometry
- SphereGeometry
- CylinderGeometry
- TorusGeometry
- TorusKnotGeometry
- PolyhedronGrometry
- 网格对象
- 创建网格
- 属性
- position
- rotation
- scale
- translateX(amount)
- translateY(amount)
- translateZ(amount)
- visible
- 灯光
- 种类
- 环境光，THREE.AmbientLight
- 点光，THREE.PointLight
- 聚光，THREE.SpotLight
- 方向光，THREE.DirectionalLight
- 半球光，THREE.HemisphereLight
- 区域光，THREE.AreaLight
- 镜头光，LensFlare
- 光的函数\属性
- set(value)
- setHex(value)
- setRGB(r,g,b)
- setHSL(h,s,l)
- setStyle(style)
- copy(color)
- copyGammaToLinear(color)
- copyLinearToGamma(color)
- convertGammaToLinear()
- convertLinearToGamma()
- getHex()
- getHexString()
- getStyle()
- getHSL(optonalTarget)
- offsetHSL(h, s, l)
- add(color)
- addColors(color,color2)
- addScalar(s)
- multiply(color)
- multiplyScalar(s)
- lerp(color, alpha)
- equals(color)
- fromArray(array)
- toArray
- clone()
第三章 Three.js中的材质
- 常见材质的特性
- 基础属性
- 定义：这些是您最常用的属性。例如，通过这些属性，您可以控制对象的不透明度、是否可见以及如何引用它(通过ID或自定义名称)。
- THREE.Material对象的基本属性
- id
- uuid
- name
- opacity
- transparent
- overdraw
- visible
- side
- needsUpdate
- 混合属性
- 定义： 每个对象都有一组混合属性。这些属性定义了对象如何与其背景相结合。
- THREE.Material对象的混合属性
- blending
- blendsrc
- blenddst
- blendequation
- 高级属性
- 定义：有许多高级属性控制低级WebGL上下文如何呈现对象。在大多数情况下，您不需要搅乱这些属性。
- THREE.Material对象的混合属性
- depthTest
- depthWrite
- polygonOffset
- polygonOffsetFactor
- polygonOffsetUnits
- alphates
- three.js中的材质
- THREE.MeshBasicMaterial
- color
- wireframe
- wireframlinewidth
- wireframelinecap
- wireframLinejoin
- shading
- vertexColors
- fog
- THREE.MeshDepthMaterial
- wireframe
- wireframeLineWidth
- MeshNormalMaterial
- wireframe
- wireframeLineWidth
- shading
- MeshFaceMaterial
- MeshLamberMateril
- ambient
- emissive
- wrapAround
- wrapRGB
- MeshPhongMaterial
- LineBasicMaterial
- LineDashedMaterial
第四章 粒子系统
- 粒子(精灵)
- 粒子简介
- 创建粒子
- 要点一：使用THREE.SpriteMaterial创建和样式化粒子
- 要点二：THREE.Particle()\THREE.Sprite( )
- 要点三：THREE.ParticleSytem()
- 要点四：BasicParticleMaterial格式化
- 要点五：从高级几何体中创建粒子系统
- 粒子动画
- 使用纹理来设计粒子
- 使用Canvas来设计一个带有THREE.SpriteCanvasMaterial的粒子
- 要点一：在CanvasRenderer类里使用HTML5画布
- 要点二：在WebGLRenderer中使用HTML5画布
- 点云
- 要点一：使用点云创建一组粒子
- 要点二：从现有几何图形创建点云
第五章 纹理
- 纹理
- 基本用法
- 要点一：网格中的纹理
- 要点二：凹凸贴创建折皱
- 要点三：法向量创建凹凸和折皱
- 要点四：光照贴图创建阴影
- 要点五：环境贴图创建反光
- 要点六：高光贴图
- 高级用法
- 要点一：UV映射
- 要点二：重复纹理
- 要点三：Canvas画布上绘图作为纹理
- 要点四：视频作为纹理
第六章 动画
- 基础动画
- rotation
- scale
- position
- material
- vertices
- faces
- 选中对象
- 要点一：在屏幕鼠标点击的位置创建一个向量
- 要点二：使用unprojectVector函数将点击的屏幕上的位置转换为Three.js场景中的坐标。
- 要点三：使用THREE.Raycaster对象(从projector.
pickingRay函数返回)在屏幕上单击的位置向所创建的3D世界发送一条射线。
- 要点四：使用raycaster.intersectObjects函数来确定所提供的对象是否被这条射线击中
- 使用Tween.js
第七章 着色器简介
第八章 物理引擎
转载自blog.csdn.net/weixin_44379436/article/details/86509095