三. js基础学习教程

时间：2021-09-03 来源：互联网编辑：宝哥软件园浏览：次

1.三. js官网和使用三. js的三个必要条件

1.三. js官方网站https://threejs.org/

2.使用三个. js的三个先决条件

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

大致来说，任何显示的东西都可以用three.js来实现，必须满足三个条件：一个场景，一个摄像头，一个渲染器。

第二，使用Three.js的三个必要条件(场景、相机、渲染器)之间的关系

如上图所示，解释场景、相机和渲染器[/code]之间的关系

1.场景场景是对象的容器。开发人员可以将所需的角色放入场景中，例如苹果和葡萄。同时，角色本身也管理着自己在场景中的位置。

2.相机的作用是面对场景，在场景中拍摄一个合适的场景，并拍摄下来。[想象成人的眼睛]

3.渲染器的作用是在浏览器中显示相机拍摄的图片

第三，通过上述理论实践官网案例

效果图如下

官网案例实现源代码

html head titleMy我的前三个. js app/title style body { margin : 0；}画布{ width : 100%；高度： 100% }/样式/headbody脚本src=' http :/lib/THREE . js '/script script//创建一个场景对象var scene=new THREE。场景()；//创建一个摄像机对象varcamera=new three . perspective camera(75，window.innerWidth/window.innerHeight, 0 . 1，1000)；//创建渲染器对象varrenderer=new three . webglrenderer()；//设置画布大小渲染器. setsize (window.innerwidth，window . inner height)；//设置画布颜色渲染器. setclearcolor (0x00aabb，1.0)；//将渲染画布添加到浏览器中，这样相机拍摄的场景document . body . append child(renderer . DOM element)就被留下了；//创建几何对象var geometry=newthree。几何长度、宽度和高度分别为1的盒几何(1，1，1 );//材质，皮肤var material=newthree。mesh bisc material({ color :0x 00 ff00 })；//向几何几何体添加材质材质，生成新的对象几何体cube varcube=newthree.mesh(几何体，材质)；//将几何图形添加到场景. add(立方体)；//设置摄像头z轴，垂直于电脑屏幕位置摄像头. position . z=5；var render=function(){/* requestAnimationFrame(render)；//循环渲染cube . rotation . x=0.1；//x轴每秒旋转60次cube . rotation . y=0.1；//y轴每秒旋转60次*/renderer.render(场景、相机)；//将摄像机捕捉到的几何图形实时渲染到场景中}；render()；/script /body/html通过官网案例不难发现，相机的默认观察方向是屏幕的方向(Z轴的负方向)。改变坐标后，需要将摄像机指向原点来观察物体

z轴的负方向？因此，这里有必要谈谈三维坐标(如下图)

摄像头指向原点？先说说相机相机(很重要！想象一下什么也看不见是什么感觉。

案例中使用了透视相机(物体离视点越近，画出的远处物体越小，与我们日常生活中看物体的方式一致。)

var camera=new THREE。透视摄像机(视野、方位、远近)

新三。透视相机(fov，aspect，near，far)透视相机的视场角：FOV视场角越大(有些地方叫拍摄距离)，场景中的物体越小，场景中的物体越大。宽高比：宽高比摄像头与可视体积的最近距离：近摄像头与可视体积的最远距离：远

综上所述，我相信结合上面提到的三维坐标和相机图纸来理解相机应该很简单。接下来，修改上述情况(指示基于相机实现后一种情况下的鼠标滚动放大和缩小以及三维旋转)

第四，修改官网案例，设置摄像头方位和摄像头位置

使用[lookAt]方法设置摄像机的视角中心。“lookAt()”的参数是一个属性包含中心坐标“x”、“y”和“z”的对象。

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

第五，实现旋转立方体

旋转动画原理相机围绕Y轴旋转，不断修改相机的X轴和Z轴位置，将场景中的物体始终保持在相机的视野中，将相机拍摄的图片实时放入浏览器中显示

//摄像机围绕Y轴旋转，不断修改摄像机的X轴和Z轴位置，将场景中的物体始终保持在摄像机的视野内。//实时渲染和成像功能动画(){var timer=date。now()* 0.0001；camera.position.x=Math.cos(计时器)* 100；camera.position.z=Math.sin(计时器)* 100；摄像机.观察(场景.位置)；//设置摄像机视图中心渲染器. render(场景，摄像机)；requestAnimationFrame(动画)；//渲染回调函数}实现效果图如下

旋转立方体——案例源代码

！DOCTYPE html html head meta charset=' UTF-8 '标题旋转立方体/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()；//初始化光源//initLight()；//模型对象initObject()；//初始化网格辅助线init grid()；//renderer.render(场景、相机);//实时动画动画();} /* * 旋转原理* 相机围绕y轴旋转* 不断修改相机x、z轴位置，并且保持场景中的物体一直再相机的视野中， * 实时将相机拍摄下来的图片，放到浏览器中去显示*/函数动画(){ //渲染成像var计时器=日期。now()* 0.0001；camera.position.x=Math.cos(计时器)* 100;//相机位置x轴方向camera.position.z=Math.sin(计时器)* 100;//相机位置y轴方向//设置相机视野中心摄像机。观察（场景。位置);//渲染成像renderer.render(场景、摄像机);//渲染回调动画函数requestAnimationFrame(动画);}/脚本/html至此完毕，附上个人绘制思路流程图