three.ar.js 入门教程 webg实例

前面我们已经对THREE.AR.JS有了一定的学习介绍了,接下来我们来看看three.ar.js 的入门教程。如果前面没有学习three.ar.js 的朋友,可以点击学习《WEB AR框架THREE.AR.JS简介》

three.ar.js

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将具备更为强大功能,以满足开发者的需求。。

 

0
如无特殊说明,文章均为原作者原创,转载请注明出处

该文章由 发布

这货来去如风,什么鬼都没留下!!!
发表我的评论

Hi,请填写昵称和邮箱!

取消评论
代码 贴图 加粗 链接 删除线 签到