Threejsdemo

three.js开发指南demo

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

创建HTML页面框架
创建并展示三维对象
添加材质、灯光和阴影
用动画扩展首个场景
使用dat.GUI库简化试验
使用ASCII效果

使用构建Three.js场景的基本组件

├┬创建场景
│├场景的基本功能
│├场景中使用雾化效果
│└使用材质覆盖属性
├┬使用几何和网格对象
│├几何对象的属性和函数
│├创建可修改几何体
│└网格对象的函数和属性
└┬使用几何和网格对象
    ├正投摄像机和透视相机
    └让相机在指定点上聚焦

使用Three.js里的各种光源

影响整个场景的光源-Ambient Light
照射所有方向的光源-Point Light
具有锥体形状的光源-Spot Light
模拟远处太阳光源-Directional Light
└┬使用光源生成高级光照效果
   ├半球光光源-Hemisphere Light
   └镜头炫光-Lensflares

使用Three.js的材质

├┬简单的网格材质(基础、深度和面)
│├简单表面mesh basic material
│├基于深度着色mesh depth material
│├联合材质combined material
│├计算法向颜色mesh normal material
│└为每个表面指定材质mesh face material
├┬高级材质
│├用于暗淡、不光亮表面mesh lambert material
│├用于光亮表面mesh phong material
│└创建自己的着色器shader material
└┬线段几何体的材质
    ├line material
   └line material dashed

创建几何体

├┬二维几何体
│├plane
│├circle
│├shape
│└ring
└┬三维几何体
    ├cube
    ├sphere
    ├cylinder
    ├torus
    ├torusknot
   └polyhedron

使用高级几何体和二元操作

ConvexGeometry
LatheGeometry
├┬通过拉伸创建几何体
│├ExtrudeGeometry..html
│├TubeGeometry
│├从SVG图像拉伸
│└ParametricGeometries
创建三维文本
使用二元操作组合网格

粒子和粒子系统

├┬理解粒子
│├particles
│└particles-webgl
├-粒子、粒子系统和BasicParticleMaterial
├┬使用HTML5画布格式化粒子
│├在CanvasRenderer类使用HTML5画布
│└在WebGLRenderer中使用HTML5画布
├┬使用纹理格式化粒子
│├rainy
│├snowy
│├sprites
│└sprites in 3d
从高级几何体中创建粒子系统

创建、加载高级网格和几何体

├┬几何体组合和合并
│├对象组合
│└多个网格合并成一个网格
├┬Three.js的JSON格式保存和加载
│├保存和加载几何体
│└保存和加载场景
└┬导入三维格式文件
    ├blender(需要three.js插件导出)
    ├obj
    ├obj和mtl材质
    ├collada
    ├stl
    ├ctm
    ├vtk
    ├pdb
    ├ply
    ├awd
    ├assimp
    ├vrml
   └babylon

创建动画和移动相机

├┬基础动画
│├简单动画
│├选择对象
│└用Tween.js做动画
├┬使用相机
│├轨迹球控件
│├飞行控件
│├翻滚控件
│├第一人控件
│└轨道控件
├┬变形动画和骨骼动画
│├┬用变形目标制作动画
││├用MorphAnimMesh制作动画
││└通过设置morphTargetInfluence属性创建动画
│└用骨骼和蒙皮制作动画
└┬使用外部模型创建动画
    ├用Blender创建骨骼动画
    ├从collada模型中加载动画
   └从雷神之锤模型中加载动画

加载和使用纹理

├┬在材质中使用纹理
│├┬加载纹理并应用到网格
││├普通贴图
││├dds贴图
││├pvr贴图
││└tga贴图
│├使用凹凸贴图创建皱纹
│├使用法向贴图创建更加细致的凹凸和皱纹
│├使用光照贴图创建假阴影
│├┬用环境贴图创建虚假的反光效果
││├静态
││└动态
│└高光贴图
└┬纹理的高级用途
    ├┬定制UV映射
    │├静态
    │└可即时调节
    ├重复映射
    └┬在画布上绘制图案并作为纹理
        ├用画布作为纹理
        ├用画布做凹凸贴图
        ├用视频输出作为纹理
       └用视频输出作为纹理2

定制着色器和渲染后期处理

├┬设置后期处理
│└创建EffectComposer对象
├┬后期处理通道
│├简单后期处理通道
│├使用眼膜的高级组合效果器
│├模拟电磁干扰
│└┬用ShaderPass定制效果
│    ├简单的着色器
│    ├模糊着色器
│   └高级着色器
创建自定义后期着色器

用Physijs在场景中添加物理效果

创建可用Phsijs的基本Three.js场景
材质属性
基础图形
使用约束限制对象移动
用DOFConstraint实现细节控制
限制声源范围