'How can I host a AR/javascript website on XAMPP/AMPPS?

this could be an obvious question/answer but I am trying to host this AR-based example model website on my local XAMPP host but it keeps appearing with a white page.

Does this mean I cannot use the webcam on localhost or is my code incorrect? I have tried updating my XAMPP and trying with other AR models but nothing works. I have also tried using AMPPS instead of XAMPP but nothing works!

Any suggestions welcomed? Does XAMPP even work with AR models? Is there another localhost I could try for AR model.

<!DOCTYPE html>
<head>
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <!-- include three.js library -->
    <script src='../../js/three.js'></script>
    <script src='../../js/OBJLoader.js'></script>
    <script src='../../js/MTLLoader.js'></script>
    <!-- include jsartookit -->
    <script src="../../jsartoolkit5/artoolkit.min.js"></script>
    <script src="../../jsartoolkit5/artoolkit.api.js"></script>
    <!-- include threex.artoolkit -->
    <script src="../../threex/threex-artoolkitsource.js"></script>
    <script src="../../threex/threex-artoolkitcontext.js"></script>
    <script src="../../threex/threex-arbasecontrols.js"></script>
    <script src="../../threex/threex-armarkercontrols.js"></script>
</head>
<script>
var scene, camera, renderer, clock, deltaTime, totalTime;
var arToolkitSource, arToolkitContext;
var markerRoot1;
var mesh0, mesh1;
initialize();
animate();
function initialize(){
    scene = new THREE.Scene();
    let ambientLight = new THREE.AmbientLight( 0xcccccc, 1.0 );
    scene.add( ambientLight );          
    camera = new THREE.Camera();
    scene.add(camera);
    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 );
    clock = new THREE.Clock();
    deltaTime = 0;
    totalTime = 0;
    arToolkitSource = new THREEx.ArToolkitSource({
        sourceType : 'webcam',
    });
    function onResize(){
        arToolkitSource.onResize()  
        arToolkitSource.copySizeTo(renderer.domElement) 
        if ( arToolkitContext.arController !== null )
        {
            arToolkitSource.copySizeTo(arToolkitContext.arController.canvas)    
        }   
    }
    arToolkitSource.init(function onReady(){
        onResize()
    });
    window.addEventListener('resize', function(){
        onResize()
    });
    arToolkitContext = new THREEx.ArToolkitContext({
        cameraParametersUrl: '../../data/camera_para.dat',
        detectionMode: 'mono'
    });
    arToolkitContext.init( function onCompleted(){
        camera.projectionMatrix.copy( arToolkitContext.getProjectionMatrix() );
    });
    markerRoot1 = new THREE.Group();
    scene.add(markerRoot1);
    let markerControls1 = new THREEx.ArMarkerControls(arToolkitContext, markerRoot1, {
        type: 'pattern', patternUrl: "../../data/hiro.patt",
    })
    let geometry1 = new THREE.PlaneBufferGeometry(1,1, 4,4);
    let loader = new THREE.TextureLoader();
    let texture = loader.load( '../../images/grass.jpg', render );
    let material1 = new THREE.MeshBasicMaterial( { map: texture } );
    mesh1 = new THREE.Mesh( geometry1, material1 );
    mesh1.rotation.x = -Math.PI/2;
    markerRoot1.add( mesh1 );
    new THREE.MTLLoader()
        .setPath( '../../models/puppy/' )
        .load( 'puppy.mtl', function ( materials ) {
            materials.preload();
            new THREE.OBJLoader()
                .setMaterials( materials )
                .setPath( '../../models/puppy/' )
                .load( 'puppy.obj', function ( group ) {
                    mesh0 = group.children[0];
                    mesh0.material.side = THREE.DoubleSide;
                    mesh0.position.y = 0.025;
                    mesh0.scale.set(1.25,1.25,1.25);
                    mesh0.rotation.y = Math.PI / 2;
                    markerRoot1.add(mesh0);
                }, onProgress, onError );
        });
    function onProgress(xhr) { console.log( (xhr.loaded / xhr.total * 100) + '% loaded' ); }
    function onError(xhr) { console.log( 'An error happened' ); }
}
function update(){
    if ( arToolkitSource.ready !== false )
        arToolkitContext.update( arToolkitSource.domElement );
}
function render(){
    renderer.render( scene, camera );
}
function animate(){
    requestAnimationFrame(animate);
    deltaTime = clock.getDelta();
    totalTime += deltaTime;
    update();
    render();
}
</script>
</body>
</html>
htmlxamppaugmented-reality


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions