1.关于使用三个js的一些理论解释

1.请参考https://threejs.org/官方网站地址

2.使用三个. js先决条件：场景一场景，摄像机一摄像机，渲染器一渲染器

为了实际上能够用三个js显示任何东西，我们需要三个东西一个场景、一个相机和一个渲染器，这样我们就可以用相机渲染场景。

3.场景A场景、相机A相机和渲染器之间的关系渲染器是在浏览器中显示相机拍摄的图片

第三，这个案例使用了Three.js来绘制一个旋转的立方体

实现效果图如下

案例案例源代码

！DOCTYPE html html head meta charset=' UTF-8 '标题用threejs构建室内模型/title style # canvas-frame {宽度： 100%；高度： 600像素；}/style/head body on load=' tristar()' div id=' canvas-frame '/div/body script type=' text/JavaScript ' src=' http :/lib/three . js '/脚本脚本类型='text/javascript' var渲染器，//渲染器宽度=文档。getelementbyid(' canvas-frame ').clientWidth，//画布宽高度=文档。getelementbyid(' canvas-frame ').clientHeight//画布高//初始化渲染器函数init TRUe(){ 0渲染器=新三.WebGLRenderer({ anti IAS : true//canvas :文档。getelementbyid(' canvas-frame ')})；renderer.setSize(宽度、高度);渲染器。setclearcolor(0xfffffff，1.0)；文件。getelementbyid(' canvas-frame ').追加子项(渲染器。圆顶元件)；渲染器。setclearcolor(0xfffffff，1.0)；} //初始化场景定义变量场景；函数initScene(){ scene=new THREE .场景();} var相机；函数initCamera() { //透视相机相机=新的三。透视相机(45,宽/高，1,10000);照相机。位置。x=50相机。位置。=150摄像机。位置。z=150照相机。起来。x=0；照相机。起来。y=1；//相机朝向-相机上方为y轴照相机。起来。z=0；camera.lookAt({ //相机的中心点x : 0，y : 0，z : 0 })；//相机正交相机/*相机=新三。正字法字典(-300,300,100,-100,1,10000);照相机。位置。x=250摄像机位置=100摄像机。位置。z=1800照相机。起来。x=0；照相机。起来。y=1；//相机朝向-相机上方为y轴照相机。起来。z=0；camera.lookAt({ //相机的中心点x : 0，y : 0，z : 0 })；*/}函数initLight(){ //light -这里使用环境光//var light=new THREE .DirectionalLight(0x ffffff)；/*方向性光源*///light.position.set(600，1000，800)；var light=new THREE .ambient light(0x ffffff)；//模拟漫反射光源light.position.set(600，1000，800)；//使用背景光时可以忽略方向和角度，只考虑光源的位置场景添加（光);}函数initObject(){ //初始化对象//初始化地板初始化floor()；}函数initGrid(){ //辅助网格var helper=new THREE .GridHelper(1000，50)；helper.setColors(0x0000ff，0x 808080)；场景。添加(助手)；}函数initFloor(){ //创建一个立方体变化几何=新三。盒几何(80,20,80);for(var I=0；一、几何、面、长度；I=2){ var hex=math。random()*0x ffffff；几何学。面孔[我]。颜色。sethex(十六进制)；几何学。面孔[I 1]。颜色。sethex(十六进制)；} var material=new THREE .网状基础材料(vertexColors: THREE .面部颜色})；//将材料材料添加到几何体几何变化网格=新三。网格（几何、材料);mesh.position=new THREE .Vector3(0，0，0)；scene.add(网格);} //初始化页面加载函数TripStart(){//初始化渲染器init three()；//初始化场景init scene()；//初始透视化相机initCamera()；//初始化光源init light()；//模型对象initObject()；//初始化网格辅助线init grid()；renderer.render(场景、摄像机);//实时动画//动画();}函数动画(){ //渲染成像var计时器=日期。now()* 0.0001；camera.position.x=Math.cos(计时器)* 100;camera.position.z=Math.sin(计时器)* 100;摄像机。观察（场景。位置);renderer.render(场景、摄像机);requestAnimationFrame(动画);}/脚本/html一。场景场景就是一个三维空间。用[场景]类声明一个叫[场景]的对象。

二。关于上述案例中透视照相机透视相机注意点说明

1.照相机默认的观察方向是指向z轴负方向（就是朝向屏幕),所以当变化坐标以后，就要将照相机指向原点，才能观察到物体。

2.利用看方法来设置相机的视野中心「看」()的参数是一个属性包含中心坐标「x」「y」「z」的对象。

3.案例中使用透视相机（从视点开始越近的物体越大、远处的物体绘制的较小的一种方式、和日常生活中我们看物体的方式是一致的。)

4.将摄像机的向上方向设置为正方向Y轴摄像机. up . x=0；camera . up . y=1；//相机方向-相机上方是y轴相机. up . z=0；

camera . up . x=0；camera . up . y=1；//相机方向-相机上方是y轴相机. up . z=0；三.透视相机相关参数说明

新的三个。透视相机(FOV、方面、近、远)透视相机

视场角：fov视场角越大(有些地方叫拍摄距离)，场景中的物体越小，视场角越小，场景中的物体越大

纵横比：纵横比

摄像机和可视体积之间的最近距离：近

摄像机离可视体积最远的距离：远

根据上述案例动画原理，摄像机绕Y轴旋转，场景中的物体始终保持在摄像机的视野内，摄像机拍摄的图片实时放入浏览器显示

函数动画(){ //摄像机绕Y轴旋转，将场景中的物体始终保持在摄像机的视野中//实时渲染成像var timer=date . now()* 0.0001；camera.position.x=Math.cos(计时器)* 100；camera.position.z=Math.sin(计时器)* 100；摄像机.观察(场景.位置)；renderer.render(场景、摄像机)；requestAnimationFrame(动画)；} 4.将渲染器三维空间中的对象映射到2D平面的过程称为三维渲染。一般来说，我们称渲染操作为渲染器。

[参考文献]

http://www.hewebgl.com/article/getarticle/50

http://www.xyhtml5.com/threejs-star-moving-particles.html

https://read.douban.com/reader/ebook/7412854/

以上就是本文的全部内容。希望本文的内容能给大家的学习或工作带来一些帮助，也希望多多支持我们！