html5 ar插件,ARReading-Html5

Inception - ARReading

Configs

// //DEBUG = true; // global var for JSAR

// var THRESHOLD = 90;

// var MARKER_SIZE = 120;

// 根据 window 大小

var GLCanvasHeight;

var GLCanvasWidth;

// //webcam尺寸

// var HEIGHT = 480;

// var WIDTH = HEIGHT*4/3;

VARS

// webcam

var webcam, camCanvas, camTex;

// gl

var renderer, projector = new THREE.Projector();

var scene, camera;

var webcamScene, webcamCam;

// Jsar canvas

var canvas, ctx;

// global objects

var Jsar, Models, Datas;

var container;

var mouse = { x: 0, y: 0 }, HOVERED;

// 为了判断当前识别出来的marker

var markers;

function createDOM() {

container = document.getElementById('container');

if(!Detector.webgl) AR.isIE = true;

// 设置 glCanvas的尺寸 为 全屏

GLCanvasHeight = window.innerHeight;

GLCanvasWidth = window.innerWidth;

if(GLCanvasWidth/GLCanvasHeight > 4/3) {

GLCanvasHeight = GLCanvasWidth*3/4;

} else {

GLCanvasWidth = GLCanvasHeight*4/3;

}

console.log("GLCanvasHeight="+GLCanvasHeight+", GLCanvasWidth="+GLCanvasWidth);

if(AR.isIE) {

// create preview image

webcam = document.createElement('img');

webcam.width = WIDTH;

webcam.height = HEIGHT;

AR.Webcam(webcam);

webcam.style.position = "absolute";

webcam.style.left = -100000+'px';

container.appendChild(webcam);

} else {

// create webcam

webcam = document.createElement('video');

webcam.style.display = 'none';

webcam.width = WIDTH;

webcam.height = HEIGHT;

webcam.videoWidth = WIDTH;

webcam.videoHeight = HEIGHT;

webcam.loop = true;

webcam.volume = 0;

webcam.autoplay = true;

AR.Webcam(webcam);

}

//create camCanvas

camCanvas = document.createElement('canvas');

camCanvas.width = webcam.width;

camCanvas.height = webcam.height;

camTex = new THREE.Texture(camCanvas);

camTex.minFilter = THREE.LinearFilter;

camTex.magFilter = THREE.LinearFilter;

//create main canvas (是 Jsar 跟 camCanvas 的 媒介，camCanvas画到canvas上，将像素传给Jsar)

canvas = document.createElement('canvas');

canvas.width = WIDTH;

canvas.height = HEIGHT;

ctx = canvas.getContext('2d');

}

function init() {

Jsar = new AR.Jsar(canvas, WIDTH, HEIGHT, MARKER_SIZE, THRESHOLD, 3);

// THREE.JS

if(Detector.webgl) renderer = new THREE.WebGLRenderer();

else

renderer = new THREE.CanvasRenderer();

renderer.setSize(GLCanvasWidth, GLCanvasHeight);

scene = new THREE.Scene();

// lights

// var light = new THREE.PointLight(0xffffff, 10);

// light.position.set(400, 500, 100);

// scene.add(light);

// light.position.set( -400, -500, -100);

// scene.add(light);

// LIGHTS

var directionalLight = new THREE.DirectionalLight( 0xffffff );

directionalLight.position.set( 1, 1, 0.5 ).normalize();

scene.add( directionalLight );

var pointLight = new THREE.PointLight( 0xffaa00 );

pointLight.position.set( 0, 0, 0 );

scene.add( pointLight );

camera = new THREE.PerspectiveCamera(80, WIDTH / HEIGHT, 1, 10000 ); // 80度

var ARMat = Jsar.getARMat();

camera.projectionMatrix.setFromArray(ARMat);

var plane = new THREE.Mesh(new THREE.PlaneGeometry(2, 2), new THREE.MeshBasicMaterial({

map: camTex,

overdraw: true //seems no need when using WebGL ?

}));

plane.material.depthTest = false;

plane.material.depthWrite = false;

webcamCam = new THREE.Camera();

webcamScene = new THREE.Scene();

webcamScene.add(plane);

var glCanvas = renderer.domElement;

container.appendChild(glCanvas); // add Renderer-canvas to container

}

function render() {

// detecting...Loop

camCanvas.getContext('2d').drawImage(webcam, 0, 0);

camTex.needsUpdate = true;

ctx.drawImage(camCanvas, 0, 0, WIDTH, HEIGHT);

canvas.changed = true;

// 更新Models

Models.update();

// var markers = Jsar.detect(scene); // markers 不是数组，是对象

markers = Jsar.detect(scene); // markers 不是数组，是对象

// 增强虚拟obj

for (var i in markers) { // i 是 markerId

// 加载相应page

Datas.loadPage(i);

var m = markers[i];

if (!m.model) { //分配 model

m.model = new THREE.Object3D(); // Object3D > mesh(cube)

var cubes = Models.getModel(i);

if(cubes.length == 0) continue;

for(var c in cubes) {

var cube = cubes[c];

cube.doubleSided = true;

m.model.matrixAutoUpdate = false;

m.model.add(cube);

}

scene.add(m.model); //add to scene

}

var ARMat = new Float32Array(16);

Jsar.copyMatrix(m.transform, ARMat); // ARmat -> GLmat

m.model.matrix.setFromArray(ARMat);

m.model.matrixWorldNeedsUpdate = true;

}

// // deal with onhover

// for(var i in this._models){

// this._models[i].nohover(this._models[i]);

// }

var id = getIntersected();

// if(id>=0) {

// Models._models[id].onhover(Models._models[id]);

// }

// HOVERED

if ( id >= 0 ) {

if ( HOVERED != Models._models[id] ) {

if ( HOVERED ) HOVERED.nohover(HOVERED);

HOVERED = Models._models[id];

HOVERED.onhover(HOVERED);

}

} else {

if ( HOVERED ) HOVERED.nohover(HOVERED);

HOVERED = null;

}

renderer.autoClear = false;

renderer.clear();

renderer.render(webcamScene, webcamCam); // render了两个场景，先 webcam，然后 ar

renderer.render(scene, camera);

}

function animate() {

requestAnimationFrame( animate );

render();

}

// onload - 入口点

window.onload = function() {

// !!Main

createDOM();

Models = new AR.Models(projector, camera);

Datas = new AR.Data(Models);

init();

document.addEventListener( 'mousemove', onDocumentMouseMove, false );

document.addEventListener( 'mousedown', onDocumentMouseDown, false );

//window.addEventListener( 'resize', onWindowResize, false );

// setInterval(animate, 15); // 1000/15=67 fps

animate();

};

// events

function getIntersected() {

var vector = new THREE.Vector3( mouse.x, mouse.y, 0.5 );

projector.unprojectVector( vector, camera ); //摄像头标定，分解投影矩阵

var raycaster = new THREE.Raycaster( camera.position, vector.sub( camera.position ).normalize(), 1, 10000 );

return Models.intersect(raycaster);

}

function onDocumentMouseMove( event ) {

event.preventDefault();

mouse.x = ( (event.clientX-container.offsetLeft) / (GLCanvasWidth) ) * 2 - 1;

mouse.y = - ( (event.clientY-container.offsetTop) / (GLCanvasHeight) ) * 2 + 1;

}

function onDocumentMouseDown( event ) {

event.preventDefault();

var id = getIntersected(); // javascript 的引用？

if(id>=0) {

var find = false;

for(var markerId in markers) {

if(markerId == Models._models[id].idMarker) {

find = true;

break;

}

}

if(find) { // 有识别到marker，再触发点击事件

Models._models[id].clickCount++;

Models._models[id].onclick(Models._models[id]);

}

}

}

// others

var cutCount=0;

function cutCamMethod(){

if(cutCount==0){

webcam.pause();

cutCount=1;

}else{

webcam.play();

cutCount=0;

}

}

// Jq

$(document).ready(

function()

{

$('#dock').Fisheye(

{

maxWidth: 50,

items: 'a',

itemsText: 'span',

container: '.dock-container',

itemWidth: 40,

proximity: 90,

halign : 'center'

}

)

}

);

Your browser does not support JavaScript!

loading...

Clip