3D基本原理

为了实现3D图像的动态展示有三个要点：

三维场景包括三维模型、光源、相机三个部分构成。

从最简单的情形来说，三维模型由网格（mesh）和材质（material）组成。网格则一般由若干个图元（一般是空间中的三角形）拼接而成。网格表面还要考虑本身的纹理和对光源的反射情况。所以3D模型的数据主要是顶点信息和网格表面材质信息。

光源就是在空间中人为添加光照信息，例如方向，强度，光色等。没有光源，渲染出来的3D场景将一片漆黑。

相机相当于场景的一个观察点。相机在建立时就要确定，视角，远平面，近平面，纵横比四个参数。根据这些参数可以确定一个可视区域。3D模型必须在可视区域（view frustum）内。否则将不会被屏幕捕捉。

将场景以2D的形式显示

要想将场景以2D的形式显示出来，实际就是将空间中的点映射为平面的像素值。这个过程需要考虑两个关系：

模型和相机之间的关系：这个变换关系由两个矩阵控制，其中一个矩阵表示了相机所在位置和方向，另一个矩阵控制了从3D到2D的投影参数。模型和相机的关系决定空间中的某一点是否会被渲染。

光源和材质的关系：光源和材质的关系决定这一点的像素值会是多少。着色器将会结合该点的材质（包括对光的反射率）和光照强度，判断该点的颜色。

当3D数据发生改变时，可以近乎无延迟的对2D图像更新渲染

上述复杂的映射过程，实际是交给着色器来完成的，着色器往往是一种基于gpu的程序（所谓硬件加速）。保证了渲染的低延迟。

  
      
      
      Example01.01-Basic skeleton     
      
    
    请输入代码

图片描述

接下来我们会用光照、阴影、材质和动画来美化。

首先添加光源：

//添加点光源var spotLight = new THREE.SpotLight(0xffffff);spotLight.position.set(-40,60,-10);scene.add(spotLight);

因为使用的是THREE.MeshBasicMaterial所以不会对光源有反应，基本材质只会使用指定的颜色来渲染物体。

因此，替换THREE.MeshBasicMaterial为THREE.MeshLamberMaterial

图片描述

现在我们来添加阴影效果：

因为渲染阴影需要消耗大量计算资源，所以默认下是不会渲染阴影的。

因此，我们需要：

renderer.setClearColor(new THREE.Color(0xeeeeee,1.0));render.setSize(window.innerWidth,window.innerHeight);renderer.shadowMapEnabled = true;//告诉渲染器需要阴影效果

以上没有明确指定哪个物体投射阴影，哪个物体接受阴影。

示例中，我们将相应的属性设置为true来指定球体和立方体在地面上投射阴影：

plane.receiveShadow = true;cube.castShadow = true;sphere.castShadow = true;spotLight.castShadow = true;

图片描述

可参考实例

参考

《Three.js 开发指南》

转载地址：http://qaovo.baihongyu.com/

你可能感兴趣的文章