js库三. JS简单入门教程(详解一)

序言

WebGL允许我们在画布上实现3D效果。而three.js是一个webGL框架，由于其易用性而被广泛使用。如果你想学习webGL，放弃那些复杂的原生接口，从这个框架开始，是一个不错的选择。

博主目前也在研究三. js，发现相关资料非常匮乏，甚至官方的api文档都非常粗糙，很多效果都需要通过慢慢键入代码来探索。所以写这篇教程的目的是自己总结一下，分享给大家。

这是一系列教程的第一部分：简介。在这篇文章中，我将以一个简单的演示为例，来解释一下three.js的基本配置方法，学习完这篇文章，你就可以学会如何在浏览器中绘制三维图形了！

准备工作/即将工作

在编写代码之前，您必须首先转到最新的three.js框架包，并将three.js引入您的页面。当然，包里也有很多demo供大家学习；

Chrome是目前支持webGL最好的浏览器，其次是Firefow，国内漫游和猎豹测试后也能运行。

从一个实例开始！

首先，我们构建html，如下所示：

！DOCTYPE html html head meta charset=' UTF-8 ' titlelesson1-by-shawn.xie/title！-介绍三. js-script src=' http : three . js '/script style type=' text/CSS ' div # canvas-frame { border : none；光标：移动；宽度： 1400 px；高度： 600 px；背景色-: # EEEEEE；}/风格/头身！canvas的容器-div id=' container '/div/body/html

为WebGL绘图准备一个与画布框大小相同的字段。具体来说：

(1)将id为“canvas3d”的div元素添加到body标记中。

(2)在样式标签中指定“canvas3d”的CSS样式。

需要注意的是，我们不需要写canvas标签，只需要定义一个div来容纳canvas，canvas是由three.js动态生成的！

让我们开始写剧本吧。我们将通过以下五个步骤构建一个简单的三维模型，这也是three.js的基本步骤：

1.设置three.js渲染器

将三维空间中的对象映射到2D平面的过程称为三维渲染。一般来说，我们称用于渲染操作的软件为渲染器。具体来说，需要以下处理。

(0)声明全局变量(对象)；

(1)获取画布框的高度和宽度；

(2)生成渲染器对象(属性：有效设置抗锯齿效果)；

(3)指定渲染器的高度和宽度(与画布框的大小一致)；

(4)在[canvas3d]元素中添加[canvas3d]元素；

(5)设置渲染器的透明颜色。

//打开Three.js渲染器var渲染器；//声明全局变量(对象)函数init three(){ width=document . getelementbyid(' canvas 3d ')。clientwidth//获取画布“canvas3d”的宽度高度=document . getelementbyid(' canvas3d ')。clientheight//获取画布“canvas3d”({ anti IAS : true })的高渲染器=newthree.webglrenderer//生成渲染器对象(属性：抗锯齿效果设置有效)渲染器. setSize(宽度、高度)；//指定渲染器的高度和宽度(与画布框大小一致)document . getelementbyid(' canvas 3d ')。append child(renderer . DOM element)；//将[canvas3d]元素添加到[canvas3d]元素中。renderer . setclearcolorhhex(0xfffffff，1.0)；//设置画布的清晰颜色} 2。设置摄像机

在OpenGL(WebGL)中，相机有两种：透视投影和正投影。透视投影是把物体从视点拉近，从远处拉近的一种方式，与我们日常生活中看物体的方式是一致的。正交投影是指不管物体和视点之间的距离如何，都按照统一的尺寸绘制物体，建筑和设计领域都需要从各个角度绘制物体，因此这种投影被广泛使用。也可以在Three.js中指定透视投影和正投影相机在本文中，透视投影模式是按照以下步骤设置的。

(0)声明全局变量(对象)；

(1)设置用于透视投影的摄像机；

(2)设置摄像机的位置坐标；

(3)将摄像头顶部设置为“Z”轴方向；

(4)设置视野中心坐标。

//设置摄像机var摄像机；函数initCamera() { camera=new THREE。透视相机(45，宽/高，15000)；//将相机设置为透视投影。默认情况下，摄像机的上方向为y轴，右方向为x轴，沿z轴向内(视场角：fov高宽比：高宽比摄像机与可视体最近距离：近摄像机与可视体最远距离：远)。//设置摄像机位置坐标camera . position . y=50；//设置摄像机位置坐标camera . position . z=100；//设置位置坐标camera . up . x=0；//将摄像机顶部设置为“x”轴方向摄像机. up . y=1；//设置摄像机的上“y”轴方向摄像机. up . z=0；//将相机顶部设置为“z”轴方向相机。看看({x:0，y:0，z 33600 })；//设置视野中心坐标}3。设置场景场景

场景是一个三维空间。使用[场景]类声明一个名为[场景]的对象。

//设置场景var场景；函数initScene() { scene=new THREE。场景()；}4.设置光源灯光

在OpenGL(WebGL)的三维空间中，有两种类型：点光源和聚光灯。而且，作为点光源的特例，还有平行光源(无线远程光源)。此外，[环境光]也可以设置为光源的参数。作为对应，可以在Three.js中设置【点光源】【聚光灯】【方向光】【环境光】，和OpenGL一样，一个场景中可以设置多个光源。基本上就是环境光和其他几个光源的组合。如果没有设置环境光，不能被光照亮的表面会变得太暗。本文按照以下步骤设置平行光源，然后加入环境光。

(0)声明全局变量(对象)

(1)设置平行光源

(2)设置光源向量

(3)为场景添加光源

这里我们使用“方向光”类来声明一个名为[光]的对象来表示平行光源

//设置光源var光；函数initLight() { light=new THREE。DirectionalLight(0xff0000，1.0，0)；//设置平行光源light.position.set(200，200，200)；//设置光源矢量scene . add(light)；//为场景添加光源}5。设置对象对象

这里，我们声明一个球模型

//设置对象var球体；函数init object(){ sphere=new three . mesh(new three . sphereometric(20，20)，//宽度、高度、深度new three . mesh labertmaterial({ color 3360 xff 000 })//材质设置)；scene.add(球体)；sphere.position.set(0，0，0)；}最后，我们编写一个主函数来执行上述五个步骤：

//执行functionthrestort(){ init three()；initCamera()；init scene()；init light()；initObject()；renderer . clear()；renderer.render(场景、摄像机)；}这时，测试一下上面的程序，你会发现你画的球形模型出现在浏览器窗口：

摘要

以上是three.js的介绍性内容我们的核心五个步骤是：

1.设置three.js渲染器

2.设置摄像机

3.设置场景场景

4.设置光源灯光

5.设置对象对象

可能你不知道一些设置，没关系，下面的文章会详细讲解以上五个主要步骤，所以敬请期待~ ~

此示例的完整代码：

！DOCTYPE html html head meta charset=' UTF-8 ' titlelesson1-by-shawn.xie/title!-引入三个。js-script src=' Http :三。js '/script脚本类型=' text/JavaScript '//开启三。射流研究…渲染器定义变量渲染器；//声明全局变量（对象)函数init three(){ width=document。getelementbyid(' canvas3d ').clientWidth//获取画布「canvas3d」的宽高度=文档。getelementbyid(' canvas3d ').clientHeight//获取画布「canvas3d」的高渲染器=新的三.WebGLRenderer({ anti IAS : true })；//生成渲染器对象（属性：抗锯齿效果为设置有效)渲染器。setSize(宽度、高度);//指定渲染器的高宽（和画布框大小一致)文档。getelementbyid(' canvas3d ').追加子项(渲染器。圆顶元件)；//追加【画布】元素到【canvas3d】元素中渲染器。setclearcolorhex(0xfffffff，1.0)；//设置帆布背景色(clearColor) } //设置相机定义变量摄像机；函数initCamera() { camera=new THREE .透视相机(45,宽/高，15000);//设置透视投影的相机，默认情况下相机的上方向为Y轴，右方向为X轴，沿着Z轴朝里（视野角：视野纵横比：方面相机离视体积最近的距离：近相机离视体积最远的距离：远)相机。位置。x=0；//设置相机的位置坐标摄像机位置=50//设置相机的位置坐标摄像机。位置。z=100//设置相机的位置坐标照相机。起来。x=0；//设置相机的上为「x」轴方向照相机。起来。y=1；//设置相机的上为「是」轴方向照相机。起来。z=0；//设置相机的上为「z」轴方向camera.lookAt({x:0，y:0，z :0 })；//设置视野的中心坐标} //设置场景定义变量场景；函数initScene() { scene=new THREE .场景();} //设置光源变化的光；函数initLight() { light=new THREE .DirectionalLight(0xff0000，1 . 0 . 0)；//设置平行光源light.position.set(200，200，200)；//设置光源向量场景添加（光);//追加光源到场景} //设置物体定义变量球面；函数initObject(){ sphere=new THREE .网状（新三。球面测量(20,20),//宽度，高度，深度新三MeshLambertMaterial({ color :0x ff 0000 })//材质设定);scene.add(球体);sphere.position.set(0，0，0)；} //执行函数TripStart(){ initTerre()；initCamera()；init scene()；init light()；initObject()；渲染器。clear()；renderer.render(场景、摄像机);}/脚本样式类型=' text/CSS ' div # canvas3d { border : none；光标：移动；宽度： 1400像素；高度： 600像素；背景色-: # EEEEEEE；}/style/head body on load=' trip start()；'！-盛放帆布的容器-div id=' canvas3d '/div/body/html总结

以上所述是小编给大家介绍的射流研究…库之三。射流研究…简易入门篇（详解之一),希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！