ar.js 结合three来实现浏览器端实现增强现实ar体验的插件-BFW插件库

ar.js 结合three来实现浏览器端实现增强现实ar体验的插件
它可以从图片、视频、摄像头中获取图像并进行识别跟踪，将三维物体投射上去
github地址 https://github.com/jeromeetienne/ar.js
体验很简单，在手机上打开这个网址 https://jeromeetienne.github.io/AR.js/three.js/examples/mobile-performance.html
调用摄像头后将摄像头对准上面那张图，就可以看到下面ar效果了
下面是一些实验，比如墙面上的洞，体验另外一个世界
第一步引入bfwone ，加载依赖项three和ar
第二步执行插件代码
示例代码如下
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=three|ar&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">

        bready(function() {
            THREEx.ArToolkitContext.baseURL = '../';
            //////////////////////////////////////////////////////////////////////////////////
            //		Init
            //////////////////////////////////////////////////////////////////////////////////

            // init renderer
            var renderer = new THREE.WebGLRenderer({
                // antialias	: true,
                alpha: true
            });
            renderer.setClearColor(new THREE.Color('lightgrey'), 0)
            // renderer.setPixelRatio( 1/2 );
            renderer.setSize(window.innerWidth, window.innerHeight);
            renderer.domElement.style.position = 'absolute'
            renderer.domElement.style.top = '0px'
            renderer.domElement.style.left = '0px'
            document.body.appendChild(renderer.domElement);

            // array of functions for the rendering loop
            var onRenderFcts = [];

            // init scene and camera
            var scene = new THREE.Scene();

            //////////////////////////////////////////////////////////////////////////////////
            //		Initialize a basic camera
            //////////////////////////////////////////////////////////////////////////////////

            // Create a camera
            var camera = new THREE.Camera();
            scene.add(camera);

            ////////////////////////////////////////////////////////////////////////////////
            //          handle arToolkitSource
            ////////////////////////////////////////////////////////////////////////////////

            var arToolkitSource = new THREEx.ArToolkitSource({
                // to read from the webcam
                sourceType: 'webcam',

                // to read from an image
                // sourceType : 'image',
                // sourceUrl : THREEx.ArToolkitContext.baseURL + '../data/images/img.jpg',

                // to read from a video
                // sourceType : 'video',
                // sourceUrl : THREEx.ArToolkitContext.baseURL + '../data/videos/headtracking.mp4',
            })

            arToolkitSource.init(function onReady() {
                onResize()
            })

            // handle resize
            window.addEventListener('resize', function() {
                onResize()
            })
            function onResize() {
                arToolkitSource.onResize()
                arToolkitSource.copySizeTo(renderer.domElement)
                if (arToolkitContext.arController !== null) {
                    arToolkitSource.copySizeTo(arToolkitContext.arController.canvas)
                }
            }
            ////////////////////////////////////////////////////////////////////////////////
            //          initialize arToolkitContext
            ////////////////////////////////////////////////////////////////////////////////


            // create atToolkitContext
            var arToolkitContext = new THREEx.ArToolkitContext({
                cameraParametersUrl: '//repo.bfw.wiki/bfwrepo/files/camera_para.dat',
                detectionMode: 'mono',
                maxDetectionRate: 30,
                canvasWidth: 80*3,
                canvasHeight: 60*3,
            })
            // initialize it
            arToolkitContext.init(function onCompleted() {
                // copy projection matrix to camera
                camera.projectionMatrix.copy(arToolkitContext.getProjectionMatrix());
            })

            // update artoolkit on every frame
            onRenderFcts.push(function() {
                if (arToolkitSource.ready === false)	return

                arToolkitContext.update(arToolkitSource.domElement)
            })


            ////////////////////////////////////////////////////////////////////////////////
            //          Create a ArMarkerControls
            ////////////////////////////////////////////////////////////////////////////////

            var markerRoot = new THREE.Group
            scene.add(markerRoot)
            var artoolkitMarker = new THREEx.ArMarkerControls(arToolkitContext, markerRoot, {
                type: 'pattern',
                patternUrl: '//repo.bfw.wiki/bfwrepo/files/patt.hiro'
                // patternUrl : THREEx.ArToolkitContext.baseURL + '../data/data/patt.kanji'
            })

            // build a smoothedControls
            var smoothedRoot = new THREE.Group()
            scene.add(smoothedRoot)
            var smoothedControls = new THREEx.ArSmoothedControls(smoothedRoot, {
                lerpPosition: 0.4,
                lerpQuaternion: 0.3,
                lerpScale: 1,
            })
            onRenderFcts.push(function(delta) {
                smoothedControls.update(markerRoot)
            })
            //////////////////////////////////////////////////////////////////////////////////
            //		add an object in the scene
            //////////////////////////////////////////////////////////////////////////////////

            var arWorldRoot = smoothedRoot

            // add a torus knot
            var geometry = new THREE.CubeGeometry(1, 1, 1);
            var material = new THREE.MeshNormalMaterial({
                transparent: true,
                opacity: 0.5,
                side: THREE.DoubleSide
            });
            var mesh = new THREE.Mesh(geometry, material);
            mesh.position.y = geometry.parameters.height/2
            arWorldRoot.add(mesh);

            var geometry = new THREE.TorusKnotGeometry(0.3, 0.1, 64, 16);
            var material = new THREE.MeshNormalMaterial();
            var mesh = new THREE.Mesh(geometry, material);
            mesh.position.y = 0.5
            arWorldRoot.add(mesh);

            onRenderFcts.push(function() {
                mesh.rotation.x += 0.1
            })

            //////////////////////////////////////////////////////////////////////////////////
            //		render the whole thing on the page
            //////////////////////////////////////////////////////////////////////////////////
            //  var stats = new Stats();
            // document.body.appendChild(stats.dom);
            // render the scene
            // onRenderFcts.push(function() {
            //  renderer.render(scene, camera);
                 // stats.update();
            // })

            // run the rendering loop
            var lastTimeMsec = null
            requestAnimationFrame(function animate(nowMsec) {
                // keep looping
                requestAnimationFrame(animate);
                // measure time
                lastTimeMsec = lastTimeMsec || nowMsec-1000/60
                var deltaMsec = Math.min(200, nowMsec - lastTimeMsec)
                lastTimeMsec = nowMsec
                // call each update function
                onRenderFcts.forEach(function(onRenderFct) {
                    onRenderFct(deltaMsec/1000, nowMsec/1000)
                })
            })
        });
    </script>
</head>
<body style='margin : 0px; overflow: hidden; font-family: Monospace;'>
    <div style='position: absolute; top: 10px; width:100%; text-align: center; z-index: 1;'>
        <a href="https://github.com/jeromeetienne/AR.js/" target="_blank">AR.js</a> - three.js mobile performance
        <br />
        Contact me any time at <a href='https://twitter.com/jerome_etienne' target='_blank'>@jerome_etienne</a>
    </div>
</body>
</html>
ar.js 结合three来实现浏览器端实现增强现实ar体验的插件

网友评论0

three.js

photo-sphere-viewer.min.js

ar.js

scenejs.js

3d-tv.js
