暂且称这个Three.js为一个WebGl的引擎吧。我将不定期在这个帖子中更新我的学习情况，和对Three.js的理解，由于之前 只看过一点与Direct3D相关的东西，深度的知识可能会相对匮乏，望大家能在帖子里对我理解有误之处给予批评指正。谢谢。

好像带网址的都会被自动删除 我贴张图看看

。。。为什么发布出去帖子

Three.js的代码托管在这个地方
不知道为什么百度贴吧老是吞我的帖子

下面来看看它给出的最基本的一个例子，显而易见，使用Three.js要比直接使用WebGl简化了许多
首先在网页文件中包含对Three.js的引用
<script
src=
"js/three.min.js"
></script>
而后是页面中的脚本
<script>
//摄像机，场景，渲染器全局变量
var
camera
,
scene
,
renderer
;
//几何体，材质，网格全局变量
var
geometry
,
material
,
mesh
;
init
();
animate
();
function
init
()
{//初始化，包括对相机，场景，渲染器，网格的初始化（对网格初始化，对其施加材质等）
//下面设置一个透视相机 近剪裁面为1，远剪裁面为10000；垂直视域为75度角
//根据窗口宽高设置左右剪裁面（对于透视相机视域的平截头体计算我整准备看呢，还不是太清//楚）希望大神给讲解下
camera
=
new
THREE
.
PerspectiveCamera
(
75
,
window
.
innerWidth
/
window
.
innerHeight
,
1
,
10000
);
//设置相机在z轴位置为1000
camera
.
position
.
z
=
1000
;
//建立场景
scene
=
new
THREE
.
Scene
();


//建立一个立方体，长宽高依次为200,200,200,
geometry
=
new
THREE
.
CubeGeometry
(
200
,
200
,
200
);
//建立一个红色的材质，要注意,Three.js提供了很多的材质，其中这个MeshBasicMaterial材//质的颜色不会受到漫反射光的染色。
material
=
new
THREE
.
MeshBasicMaterial
(
{
color
:
0xff0000
,
wireframe
:true});
//建立一个200,200,200的正方体网格，并施加为红色的基础材质
mesh
=
new
THREE
.
Mesh
(
geometry
,
material
);
//将网格加入场景，对象加入到场景后，如果不设定位置的话，默认的是在场景中心哦
scene
.
add
(
mesh
);
//建立渲染器，这里Three.js提供了多种渲染器，WebGLRenderer等，具体差别还在学习中
renderer
=
new
THREE
.
CanvasRenderer
();
//设计渲染的范围
renderer
.
setSize
(
window
.
innerWidth
,
window
.
innerHeight
);


//将渲染器加入到网页中，其实这里的render.dommElement是一个Canvas标签；
document
.
body
.
appendChild
(
renderer
.
domElement
);
}
//这是一个动画循环
function
animate
()
{
// note: three.js includes requestAnimationFrame shim
requestAnimationFrame
(
animate
);
//每次渲染让网格旋转一定角度
mesh
.
rotation
.
x
+=
0.01
;
mesh
.
rotation
.
y
+=
0.02
;
//施加渲染
renderer
.
render
(
scene
,
camera
);
}
</script>

上面9-11楼是一个最基本的显示旋转的正方体的Demo
看到了Three.js的用法了吧，好吧，现在再补一下，下载下来的压缩文件解压后有如下的文件夹
其中，build中是three.js的主程序
docs里是api,但是学习Three.js的难出就在于其文档做的实在是太不完善了，具体可以自己体验一下！基本没用！
我现在还处在学习examples里面的样例。
打开examples文件夹，你会看到很多绚丽的利用这个引擎做出来的Demo，有些迫不及待了吧？
让我们一个个学习吧。我会在这个帖子里一点点的把不长的代码逐步分解去记录下来，高手勿喷。
（这里要特别注意的是，由于例子程序里面很多例如载入模型利用的都是Ajax手段进行的，所以有些例子直接打开是不能显示的，这个关系到Ajax的运行机制，这里就不描述了，其实我也不是很清楚，解决方法：楼主使用的是vs2010，在vs里简历一个新的网站项目，将THree森减价整体包含进去，每次打开有模型加载的页面就点击运行，就可以看到效果了）
悲催的楼主要去买饭了，回来再继续，这里好荒凉，回来慢慢更，也不用担心**楼

回来了 ，明天更新canvas_ascii_effect.html的学习理解
相信这些历程研究明白了，再有3D建模方面的手艺，可以做些简单的东西了。

最近楼主朋友病了，要照顾有空会马上更的，上面说的那个demo实际上是一个从3d到2d再将2d图像分析对像素使用ascii码代替最终表现在网页上的。同学可以试着分析下，有空我把demo的关键代码帖出加以注释

楼主又回来了 还以为要TJ了呢。中间事情挺多 还要给老师做网站 真的很蛋疼 好了 现在回来了，中间看了下Three.js的collada导入的问题，自己学习了一下 3DSMAX的基本东西 现在回来了，废话少说，接着更，之前提到的asc ii的历程先放一下吧 毕竟比较简单，以后要做东西，肯定是要导入模型的，现在说下collada模型的导入吧。

关于3DSMAX导出的collada模型，这里要声明一点，楼主也只是简单的搜索了一下，得出一个结论，就是 3DSMAX导出的collada模型，只能导出标准材质，也就是说里面的一些比较复杂的材质（楼主是在51自学网里学的建模，里面的材质全部是使用建筑材质）是无法导出的，这点在分析example/js/loader/ColladaLoader.js里也可以看出来
这个文件作者在写的时候似乎没有加入支持阴影的效果，楼主做了一下相应的修改，我们先开一下如何开启阴影吧

我们下面的任务就是给ColladaLoader.js加入开启支持阴影的功能
先看一下example文件夹下的文件webgl_lights_hemisphere.html
这是一个鸟在煽动翅膀的历程，我们可以注意到，这个历程里灯光开启了阴影效果
我们现在把代码中备注释掉的一行的注释符号去掉开启 shadowCameraVisilble
dirLight.shadowCameraVisible = true;
这样再运行程序，便可以看到灯光的渲染阴影的范围，在这里directionallight是一个立方体的盒子形状的“阴影渲染盒子”

现在我们来看一下作者是如何开启的阴影效果，我们会注意到程序中有这样一行代码
ground.receiveShadow = true;
即给"地板"开启了接受阴影的效果，再注意模型的导入里面有一个选项
meshAnim.castShadow = true;
meshAnim.receiveShadow = true;
可以得出要使网格接受阴影，需要开启reciveShadow
要使网格在光照下产生阴影，需要开启castShadow

了解了上面的性质之后，我们开启阴影效果还需要render的支持
renderer.gammaInput = true;
renderer.gammaOutput = true;
renderer.physicallyBasedShading = true;
renderer.shadowMapEnabled = true;
renderer.shadowMapCullFrontFaces = false;
注意到例程里开启了这5项，这4项具体的作用我还没有一一实验过，具体大家可以实验一下

懂得了开启阴影需要的条件之后， 我们就可以对ColladaLoader.js 进行相应的修改了
现在我们先要找到这个文件将 几何体 翻译成Webgl中可用的网格的关键代码段
我们会找到 ColladaLoader.js中的createSceneGraph函数里进行了上面所说的功能
在这个函数中我们会看到几个代码段
mesh = new THREE.SkinnedMesh( geom, material, false );
mesh.skeleton = skinController.skeleton;
mesh.skinController = controllers[ skinController.url ];
mesh.skinInstanceController = skinController;
mesh.name = 'skin_' + skins.length;
mesh = new THREE.Mesh( geom, material );
mesh.name = 'morph_' + morphs.length;
mesh = new THREE.Mesh( geom, material );

好了 现在我们要给导入的模型里面的网格开启自身接受阴影和产生阴影 就必须要给每个网格开启上面提到的两个属性
mesh.castShadow = true;
mesh.receiveShadow = true;
所以 我们要再上面的20楼里提到的3个代码段的每个段后面加上
mesh.castShadow = true;
mesh.receiveShadow = true;
这样我们就开启了模型的阴影功能
但是为了以后我们使用程序的方便性，可以开启，或者关闭阴影功能（毕竟多开启一想功能会造成渲染上的负担）
这里我们可以找到
ColladaLoader这个类里的options这个数组
我们在options里加一个属性 这里叫做 isShadowOn
把上面添加的代码改为
mesh.castShadow = options.isShadowOn;
mesh.receiveShadow = options.isShadowOn;
options改为
var options = {
isShadowOn:false,//这个就是我们加的属性啦
centerGeometry: false,
convertUpAxis: false,
subdivideFaces: true,
upAxis: 'Y',
defaultEnvMap: null
};
这样我们在将这个类实例化的时候
对实例化的对象的 loader.options.isShadowOn进行开启或者关闭就可以开启或者关闭
导入的模型的阴影功能了

这个东西你学习多久了~~
有opengl的基础吗~
像很多特效css+js也可以完成吧~
就是没他快

还有、在我们把例子挂到iis服务器上时会碰到ajax失去效果，取不出模型来的现象，这个现象往往是由于服务器不支持模型文件的格式，可以将模型文件的后缀改成xml.txt这些能识别的格式，就ok了

还有、在我们把例子挂到iis服务器上时会碰到ajax失去效果，取不出模型来的现象，这个现象往往是由于服务器不支持模型文件的格式，可以将模型文件的后缀改成xml.txt这些能识别的格式，就ok了