• 欢迎访问web前端中文站,JavaScript,CSS3,HTML5,web前端demo
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏web前端中文站吧

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

JavaScript web前端中文站 2年前 (2018-04-19) 3392次浏览 已收录 2个评论

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

 


web 前端中文站 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:three.ar.js 入门教程 webg 实例
喜欢 (1)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(2)个小伙伴在吐槽
  1. While in the scenario described above, the play can only be considered superior or terrible if we know what types of adversaries we'd in the hands.
    Gertrude2018-12-22 03:42 回复
  2. Additional ability will become necessary in one game as opposed to different, as you will be enjoying against other individuals in the place of merely your house.
    Manuel2018-11-05 20:30 回复