(转)THREE.AR.JS 入门教程 WEBG实例

最新推荐文章于 2024-05-11 10:05:47 发布

山竹炒大蒜

最新推荐文章于 2024-05-11 10:05:47 发布

阅读量3.5k

点赞数 1

分类专栏： three.js

three.js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

转至https://www.lisa33xiaoq.net/1224.html#comments

下面我们将从一个例子讲解 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将具备更为强大功能，以满足开发者的需求。。

山竹炒大蒜

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
(转)THREE.AR.JS 入门教程 WEBG实例

转至https://www.lisa33xiaoq.net/1224.html#comments下面我们将从一个例子讲解 three.ar.js 的安装和使用。安装使用 Script 脚本的可以下下载 three.ar.js。下载完成后并将其作为脚本标签包含在网页中。使用 three.ar.js 必须先引入 three.js&lt;script src='three.js'&gt...
复制链接

扫一扫