therejs vrjs实例练习
参考： https://github.com/jeromeetienne/AR.js/blob/master/three.js/examples/basic.html
<html>
<head>
<meta charset="utf-8" />
<title>three ar</title>
<style>
#canvas-frame {
width: 100%;
height: 600px;
}
canvas {
width: 100%;
height: 600px;
}
</style>
<script type="text/javascript" src="js/three.min.js"></script>
<script type="text/javascript" src="js/stats.min.js"></script>
<script type="text/javascript" src="js/ar.min.js"></script>
<script>
THREEx.ArToolkitContext.baseURL = '';
</script>
</head>
<body>
<script>
// 初始化 renderer
var renderer = new THREE.WebGLRenderer({
antialias: true,
alpha: true
});
renderer.setClearColor(new THREE.Color('lightgrey'), 0);
renderer.setSize(640, 480);
renderer.domElement.style.position = 'absolute';
renderer.domElement.style.top = '0px';
renderer.domElement.style.left = '0px';
document.body.appendChild(renderer.domElement);
//
var onRenderFcts = [];
// 创建场景
var scene = new THREE.Scene();
// 创建相机
var camera = new THREE.Camera();
scene.add(camera);
// arToolkitSource
var arToolkitSource = new THREEx.ArToolkitSource({
sourceType: 'webcam', // 从摄像头读取
// sourceType: 'image', // 从图片读取
// sourceUrl: THREEx.ArToolkitContext.baseURL + '../data/images/img.jpg', //图片地址
// sourceType: 'video', // 从视频读取
// sourceUrl: THREEx.ArToolkitContext.baseURL + '../data/videos/video.mp4', //视频地址
});
arToolkitSource.init(function onReady() {
onResize();
});
window.addEventListener('resize', function() {
onResize();
});
function onResize() {
arToolkitSource.onResize();
arToolkitSource.copySizeTo(renderer.domElement);
if (arToolkitContext.arController !== null) {
arToolkitSource.copySizeTo(arToolkitContext.arController.canvas);
}
}
// arToolkitContext
var arToolkitContext = new THREEx.ArToolkitContext({
cameraParametersUrl: THREEx.ArToolkitContext.baseURL + 'data/camera_para.dat',
detectionMode: 'mono'
});
arToolkitContext.init(function onCompleted() {
camera.projectionMatrix.copy(arToolkitContext.getProjectionMatrix());
});
onRenderFcts.push(function() {
if (arToolkitSource.ready === false) {
return;
}
arToolkitContext.update(arToolkitSource.domElement);
scene.visible = camera.visible;
});
// arMarkerControls
var markerControls = new THREEx.ArMarkerControls(arToolkitContext, camera, {
type: 'pattern',
patternUrl: THREEx.ArToolkitContext.baseURL + 'data/patt.hiro',
changeMatrixMode: 'cameraTransformMatrix'
});
scene.visible = false;
// 添加几何体
// 立方体
var geometry = new THREE.CubeGeometry(10, 10, 10);
var material = new THREE.MeshNormalMaterial();
var mesh = new THREE.Mesh(geometry, material);
mesh.position.y = geometry.parameters.height / 2;
scene.add(mesh);
// 扭曲管道
var geometry = new THREE.TorusKnotGeometry(0.3, 0.1, 64, 16);
//var geometry = new THREE.CubeGeometry(10, 10, 10);
var material = new THREE.MeshNormalMaterial({Color: 0x00ff00});
var mesh = new THREE.Mesh(geometry, material);
mesh.position.y = 0.5;
scene.add(mesh);
onRenderFcts.push(function(delta) {
mesh.rotation.x += Math.PI * delta;
});
onRenderFcts.push(function() {
renderer.render(scene, camera);
});
var lastTimeMsec = null;
requestAnimationFrame(function animate(nowMsec) {
requestAnimationFrame(animate);
lastTimeMsec = lastTimeMsec || nowMsec - 1000 / 60;
var deltaMsec = Math.min(200, nowMsec - lastTimeMsec);
lastTimeMsec = nowMsec;
onRenderFcts.forEach(function(onRenderFct) {
onRenderFct(deltaMsec / 1000, nowMsec / 1000);
})
});
</script>
</body>
</html>