文章目录[隐藏]
前面我们已经对 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 将具备更为强大功能，以满足开发者的需求。。
