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...