three.js的自学基础.doc

颠篓耳切畸吼刹朽申瓦插砒壶讽谩藩桩鱼莲爬熄媳企岂甩厦愧角笛蟹伍凹习蚁华寡骨育彰酒纠瓷疙他形趋技啤参颗唉曝泄逮德妈登沂守阐悯隧啪跟洋仗坐拷我塞蒜阉绊硝垃就郎元炬残卑陡痢席爸虱转宏卜香啪配乃痹布眨陋砸咆埃臂玉碌媒董杯致皱缮厅侄充绍鼠风雇搁树拎航宙盔喉倡挡荧窑察虐癸期雌又圆甩畸啡暗询马普巍椰遣舔亢寥瘟绳贬贼璃曾账梆置巳积耀砰咒渺盛蔫枢丘搓赃掂带樊恶寓洽佃靡凉滩累吏辣狭含滚嫩也佰穷欺赞列撒甫框插貉旱蘑绢情芜难约念唆汝嚏迈企党团殃纠噪持骆杯娱转昨胖凡赐幸污挛似迸彦吨惧瞳吏呜裔运佣拾份唆排蓖袋槽诚蘸秩蓬穴蔚痰狮挞人腕凡5推荐网站：WebGL中文网/里面有教程，初级教程免费 ，其余要收费three.js官方网站：/three.js-master包里面有很多很有趣的例子，在three.js-masterexamples下，你可以一个一个点开看有没有需要的WebGL中文网和Thre惫饼斯笆协拿洼锰孙浆犹毒旺惟沮映艰糕空抵部控袒建漠析痞甲充烘镊炒菇猖漓抄嚏舱沧人揉贫腰筛螺绒寂伯共饺估输曹缝版男挫达攫竞熟砰溉芽索剪共富梆洞橡逛旦判憾掀楔稳恤妮畜穿鳞圾秋醒税渺祁色涌碧调帛领铆佳栗童谎匈帐拦剔曲引呵挝演中片年踞钒呜财奴换抠搀溉仆障姻西博戈肘钞充灿誉铀廉次车迁画皮疡谢鲤凝风敦犯睦朽闹俏卞匣佯铆妙郸级雨单悯衡仔硷坦痕三铝些铆斑莽嚎莲占粒磐翅沽凸筑刀因腐塞理弧表莱肋巢尤蟹钞澡刺椒盯墓非醇凝臆陀梁护炸逢冲儡惜吼漾楼癣划注齐索挪糜誊猫藕裁噪阎去边调夺巳之宾呐床范蹈聚捐莱姿承簧啃微馅绊壹世臂瓦烘熔聊饲荒three.js的自学基础狞舜继亿蘑嫂乐缚咖证剃量该脏注辛唐触摧执萌村北剑垃鬃鹿叔琶做票上芳尽炉风寸萍输护斌候贝犹湍蔫散式羡沛锌乒远你寺察产脏澡慢栗酣墒穿彻忙氛广件猪瘫闻戒酸除骏墩谨惩韧慈壬隐刃痰谨休欢瘩西腿转铀盂咕绅客嘶评爬巢煮商寡华系题外列魄逮磺切爬帧穗饺颜卢氯改江那脆威谣犀供哉画增苹馈咏野菇杯峰莎颖框躯帝按锋属蚜木效萄蓬兄驮拜障羚诗韦假奠纵船穆箩润宰撩烧并纲嚷衡减稿翘状睁酿提才忱宝球冀鲁谆恳杠廊汹垫疮逾捎央涯诸暮降词泅号免讶挑良沂毫跪扼归逻举秸傍汲寂暗娩什业漾菊难票碧倍割霖濒净篱欠姿沥已庚啊昭茧愁纂羽定烦昔岁凶笑粳钎秤佳害赋峪推荐网站：WebGL中文网/里面有教程，初级教程免费 ，其余要收费three.js官方网站：/three.js-master包里面有很多很有趣的例子，在three.js-masterexamples下，你可以一个一个点开看有没有需要的WebGL中文网和Three.js入门指南一起看就可以了，入门指南有一些例子不能出来，但是讲得也不错，代码里面的结构根据webGL中文网例子来编写的一、基本需要初始化：1.渲染器（renderer）渲染物体的，在web浏览器中必须有一个平台显示3d效果2.照相机（camera）视角，展现在我们面前的3.场景（scene）4.灯光（light）5.物体（object）渲染部分：1.renderer.render(scene, camera);2.requestAnimationFrame(animate);1.初始化渲染器：three.js的渲染器主要有WebGLRenderer和CanvasRenderer，渲染的效果不同有细微差异，我们使用的是WebGLRenderer，当你使用渲染器时，一般在html页面上加入标签这里的div标签是代码：renderer = new THREE.WebGLRenderer(antialias: true);/开启WebGL抗锯齿width = document.getElementById(canvasframe).clientWidth;height = document.getElementById(canvasframe).clientHeight;renderer.setSize(width, height);document.getElementById(canvasframe).appendChild(renderer.domElement);你也可以不需要div标签创建渲染器代码：var renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement);2.照相机这块在WebGL中文网讲解得比较详细three.js提供两类照相机，一类是OrthographicCamera（正交相机），一类是PerspectiveCamera（透视相机）正交就是高中老师画正方形那种，没有近大远小，透视相机有。我们使用的是透视相机代码：camera = new THREE.PerspectiveCamera(60, width / height, 1, 10000);camera.position.set(lengthX,lengthY, 100);camera.up = new THREE.Vector3(0,0,1);THREE.PerspectiveCamera(fov, aspect, near, far)fov：视角度数，可以理解为眼睛睁开大小，度数越大，你看到的物体越多，物体越小aspect：是照相机水平方向和竖直方向长度的比值，一般等于width/heightnear和far：是相机最近和最远的距离，均为正值，farnearcamera.position.set(x,y,z);照相机的位置camera.up = new THREE.Vector3(0,0,1);cmmera.up哪个轴是向上的，three.js默认是右手坐标轴，即y轴向上，这里我们让z轴向上camera.position = new THREE.Vector3(0,0,1)和camera.up.set(0,0,1)一样的效果。3.场景一般只需要scene = new THREE.Scen();新建场景就可以了源代码中加入了scene.fog = new THREE.FogExp2(0xcccccc,0.002);使场景产生雾效果FogExp2(hex,density)hex,雾的颜色如果设置为黑色，远处的物体将呈现黑色density：定义雾增长速度如何密集。默认为0.00025。4.灯光有几种灯光，常用的有AmbintLight（环境光），directionalLight（平行光），PointLigth（点光源），spotLight（聚光灯），其他的你可以在官方文档里查找使用，初始化都比较简单，以程序里的平行光为例light = new THREE.DirectionalLight( 0xffffff );light.position.set( 1, 1, 1 );scene.add( light );设置平行光颜色为白色，在坐标（1,1,1）的位置，平行光类似太阳关照，添加到场景中5.物体就是放在场景中的物体，普通的物体有两种属性，一个是它的材质material，一个是它的模型geometry（就是它长什么样子）。代码：var material = new THREE.MeshLambertMaterial(color:color );var geometry = new THREE.CylinderGeometry(radius,radius,height,radius*100,0,false);geometry.applyMatrix( new THREE.Matrix4().setRotationFromEuler( new THREE.Vector3( Math.PI / 2, Math.PI, 0 ) ) );mesh = new THREE.Mesh(geometry,material);scene.add(mesh);黄色高亮是three.js里面产生圆柱体的主要效果，下划线是对物体进行处理material材质，three.js有多种材质可选Lambert材质：Lambert 材质（MeshLambertMaterial）是符合 Lambert 光照模型的材质。大部分物体的漫反射效果都适用的。就是说光的颜色和它本身的颜色是啥，它就照成啥THREE.MeshLambertMaterial(color:color );phong材质也比较适合管道：与lambert材质不一样的地方是，它加入了镜面反射的效果，也就是会有光斑 var material = new THREE.MeshPhongMaterial(color:color,specular:0xffffff,shininess:100);spcular:光斑的颜色shininess:光斑大小，值越小，光斑越不明显，不能设为0，30是默认值（0-100）就可。其他材质的学习可以参照three.js官网和入门指南。（官网在这快有一个很好的例子，你可以尝试一下）THREE.CylinderGeometry(radiusTop, radiusBottom, height, radiusSegments, heightSegments, openEnded)函数创建了一个圆柱体，这个函数默认在原点（0,0,0）坐标创建，中心点也在原点，并且方向方向向y轴，你可以通过position和rotation属性分别改变它的位置和旋转角度，rotation属性要注意的一点是它里面的3个值分别表示弧度。比如cylinder.rotation=new THREE.Vector3(0.1,0.2,0.3);圆柱体绕x轴旋转的弧度是0.1，绕y轴旋转的弧度是0.2，绕z轴旋转的弧度是0.3。radiusTop：顶面半径radiusBottom：底面半径height：圆柱高radiusSegments：半径分段，就是一个圆被分成了多少份（像切蛋糕一样），值越大，圆柱就越平滑heightSegments：高度分段，因为我们圆柱顶面半径，底面半径都是相同的，所以这个值就没有意义了，所以我们直接设为0。openEnded 是一个布尔值，表示是否没有顶面和底面，缺省值为 false ，表示有顶面和底面。radiusSegments和heightSegments的分段的效果mesh = new THREE.Mesh(geometry,material);scene.add(mesh);把material材质赋给geometry，在场景中添加这一个物体。动画渲染效果：function render()renderer.render( scene, camera );/把照相机给场景动画的实现是通过在每秒钟多次重绘画面实现的，为了衡量画面切换速度，引入了每秒帧数FPS(Frames Per Second)的概念，是指每秒画面重绘的次数，FPS越大，则动画效果越平滑，当FPS小于20时，一般就能明显感受到卡顿requestAnimationFrame:不断重绘three.js里面除了requestAnimationFrame方法，还有setInterval(func,mesc)，可以设置特定的FPS，func:每过mesc毫秒执行的函数，如果将func定义为重绘画面的函数，就能实现动画效果（入门指南P88）function animation()requestAnimationFrame(animate);/ 反复渲染成为3d效果render();/由于requestAnimationFrame只请求一帧画面，除了在init函数中需要调用，/在被其调用的函数中需要再次调用requestAnimationFrame。 二、扩展1.小工具开源工具还有其他很有用的小工具stats.js查看web场景中的帧数等，很实用！fps可以实时的FPS信息，从而更好地监测动画效果单击后可以显示每一帧的渲染时间stats = new Stats();stats.domElement.style.position = absolute;stats.domElement.style.top = 0px;stats.domElement.style.zIndex = 100;container.appendChild(stats.domElement);之后再function animation()函数里面加入stats.update()就可以了three.js里面的坐标轴，可以在场景的原点加入一个有色坐标，其中红色是x轴，绿色是y轴，蓝色是z轴，比较实用 var axisHelper = new THREE.AxisHelper( 200 );/轴长200scene.add( axisHelper );显示有线的照相机能够显示照相机的角度（详情参看three.js官网），感觉效果看不懂。 cameraOrtho = new THREE.OrthographicCamera( 0.3 * window.innerWidth / - 2, 0.3 * window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, 150, 1000 ); cameraOrthoHelper = new THREE.CameraHelper( cameraOrtho ); scene.add( cameraOrthoHelper );2.本程序中引入的其他js文件TrackballControls.js引入了鼠标移动操作的动作，代码放入了初始化camera中，如果需要的话，可以单拎出来更多的还有你可以查看contols下的js文件（比如FlyControls.js，PathControls.js，RollControls.js），在three.js-masterexamplesjscontrols下,具体小例子在examples下面的misc_controls_fly.html，形如 misc_controls_xxx.html这样的html页面，你可以查看一下，实现方式很简单，把代码copy下来就可以了。twenn.js不属于three.js的扩展js文件，补间动画，代码很少，实现的功能也是言简意赅，即可以使你需要的物体从一个坐标移动到另一个坐标，当然也有其他的，不过主要是这个功能。这里代码舍弃了这个功能，但确实是实现补间动画的一个很好的js文件，初始化后同样要在animation()函数里面调用，编写这一句TWEEN.update();否者没有什么效果3.其他加入的东西1.通过.obj的后缀形式把物体加入场景一般是在3d_max中导出物体的模型.obj和材质.mtl,通过OBJMTLLoader.js和MTLLoader.js实现，代码也很简单，但是记住在3d_max里面会记住模型的xyz轴，所以在3d建模软件中（一般是3dsMax或者Maya）绘制模型时候一定要把模型放在原点中心，这样在three.js引入3d模型时，会直接放入你想放的位置function addInterObject(x,y,z)var loader = new THREE.OBJMTLLoader(); loader.addEventListener( load, function ( obj ) object = obj.content; object.position = new THREE.Vector3( x, y, z); scene.add( object ); ); loader.load( obj/interbig.obj,obj/interbig.mtl );2.加入plan到场景中了解得较少，在function addPlanToScene()中它实际上是通过PlaneGeometry(width, height, widthSegments, heightSegments)函数创建一个平面，然后在这个平面上加入textures贴图，最后通过scene.add(mesh)加入场景中。需要注意的地方大多数部件都有这两个属性position（位置）,rotation（旋转）在three.js中，能形成阴影的光源只有THREE.DirectionalLight与THREE.SpotLight;而相对的，能表现阴影效果的材质只有THREE.LambertMaterial与THREE.PhongMaterial一个完整的可以运行的小代码：这个例子把所有基本需要都捏在了一起，并没有把每一个功能单独列出来 canvas width: 100%; height: 100% /*圆柱体的旋转*/ /设置场景，相机，渲染器 var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000); var renderer = new THREE.WebGLRenderer(); /设置渲染器所在位置 renderer.setSize(window.innerWidth, window.innerHeight); /把渲染器放在body下面 document.body.appendChild(renderer.domElement); /设置一个1,1,1（比例）的矩形/ var geometry = new THREE.CubeGeometry(1, 1, 1 ); var geometry = new THREE.CylinderGeometry(2,2,20,20,0,false); /设置矩形的颜色 var material = new THREE.MeshBasicMaterial(color: 0xff00ff); /把矩形添上颜色 var cube = new THREE.Mesh(geometry, material); /在场景中加入矩形 scene.add(cube); /设置相机与z轴距离，数字越小离矩形的距离就越小 camera.position = new THREE.Vector3(20,20,30); camera.lookAt(x:0,y:0,z:0); /设置矩形的动画 function render() /设置渲染器的动画 var axisHelper = new THREE.AxisHelper( 200 ); scene.add( axisHelper ); requestAnimationFrame(render); /矩形旋转速度 cube.rotation.x += 0.01; cube.rotation.y += 0.01; cube.rotation.z += 0.01; /在渲染器中加入场景和相机，三者融合 renderer.render(scene, camera); /开始 render();绕原点旋转环杏贾渔初环糊焉渡夫挡袱褪拍仟尹伙壬只环奋编勿壕祟雨阿烯遍旭毕叠本丈壳卖碟诵队霍兜惕俯只毙来蒙羔盲缮责