文章目录[隐藏]
前面我们已经对 THREE.AR.JS 有了一定的学习介绍了,接下来我们来看看three.ar.js 的入门教程。如果前面没有学习 three.ar.js 的朋友,可以点击学习《WEB AR 框架 THREE.AR.JS 简介》。
下面我们将从一个例子讲解 three.ar.js 的安装和使用。
安装
使用 Script 脚本的可以下下载 three.ar.js。下载完成后并将其作为脚本标签包含在网页中。使用 three.ar.js 必须先引入 three.js
<script src='three.js'></script>
<script src='three.ar.js'></script>
如果您使用的是构建工具,像 browserify 或的 WebPack,可以通过 NPM 进行安装。注意,您还必须通过 npm 安装three.js。
$ npm install --save three three.ar.js
使用
下面是一个通过 Script 脚本标签引入 three.ar.js 方式的一个完整 demo。
<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>webgl2</title> <style> #webgl{ background: #ccc; width: 800px; height: 600px; } </style> <script src="Three.js" type="text/javascript"></script> <script type="text/javascript"> var renderer;//声明一个全局变量 /* *构建基本画布 渲染器 */ function initThree() { width = document.getElementById('webgl').clientWidth; height = document.getElementById('webgl').clientHeight; renderer = new THREE.WebGLRenderer({antialias:true}); //生成渲染器对象,属性:锯齿效果设为 true renderer.setSize(width,height);//设置渲染器的宽和高,和画布大小一致 document.getElementById('webgl').appendChild(renderer.domElement); //追加 canvas 元素到 webgl 元素当中 renderer.setClearColorHex(0xFFFFFF,1.0); //设置渲染器的清除色 } /* *设置相机 */ var camera; function initCamera() { camera = new THREE.PerspectiveCamera(45,width/height,1,10000); /*此处为设置透视投影的相机,默认情况下,相机的上方向为 Y 轴,右方向为 X 轴, 沿着 Z 轴垂直朝里(视野角:fov; 纵横比:aspect; 相机离视最近的距离:near; 相机离视体积最远距离:far) */ camera.position.x = 400;//设置相机的位置坐标 camera.position.y = 0; camera.position.z = 0; //设置相机的上为 y 轴方向 camera.up.x = 0; camera.up.y = 1; camera.up.z = 0; } /* *设置场景,所有的元素只有在添加到场景当中之后才能够生效 */ var scene; function initScene() { scene = new THREE.Scene(); } /* *设置光源 */ var light; function initLight() { light = new THREE.DirectionalLight(0x0000FF,1.0,0); //设置平行光 DirectionalLight light.position.set(50,50,50); //光源向量,即光源的位置 scene.add(light);//追加光源到场景 } /* *设置物体 */ var cube=Array(); function initObject() { for(var i=0;i<4;i++){ cube[i]=new THREE.Mesh( //mesh 是three.js的一个类 new THREE.CubeGeometry(50,50,50),//形状 (宽 高 深度) new THREE.MeshLambertMaterial({color:0x0000FF})//材质 ); scene.add(cube[i]); cube[i].position.set(0,-120+80*i,0); } } /* *旋转 */ var t=0; function loop(){ t++; renderer.clear(); cube[0].rotation.set(t/100,0,0); cube[1].rotation.set(0,t/100,0); cube[2].rotation.set(0,0,t/100); camera.lookAt( {x:0, y:0, z:0 } ); renderer.render(scene,camera); window.requestAnimationFrame(loop); } /* *执行 */ function threeStart() { initThree(); initCamera(); initScene(); initLight(); initObject(); loop(); renderer.clear(); renderer.render(scene,camera); } /* *如果想让立体图形进行循环运动,需要使用到 loop *首先创建渲染器、相机、场景、光源*/ /*物体以及最后的执行 *只需要添加 loop 函数 */ var t=0; function loop(){ t++; cube.rotation.set(t/100,0,0); renderer.clear(); renderer.render(scene,camera); window.requestAnimationFrame(loop); } </script> </head> <body onload="threeStart();"> <div id="webgl"></div> </body> </html>
通过上面的代码,我们可以使用 AR 增强浏览器来访问该 demo 的实现效果。相关 AR 增强浏览器可以到谷歌开发者社区进行测试。
web 前端中文站点评:
由于 web 前端的强大性,three.ar.js 也将更能承担起 AR 的重任,在后续的发展,three.ar.js 将具备更为强大功能,以满足开发者的需求。。