running three AR using parcel

gschian0 commented 3 years ago

Hi, I'm attempting to run the basic example using parcel... this is my javascript file

`import * as THREE from "three"; //import fragment from "./shader/fragment.glsl"; //import vertex from "./shader/vertex.glsl"; let THREEAR = require("threear"); let OrbitControls = require("three-orbit-controls")(THREE);

export default class Sketch { constructor(options) { var renderer = new THREE.WebGLRenderer({ // antialias : true, alpha: true }); renderer.setClearColor(new THREE.Color('lightgrey'), 0) // renderer.setPixelRatio( 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 );

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

var markerGroup = new THREE.Group();
scene.add(markerGroup);

var source = new THREEAR.Source({ renderer, camera });

THREEAR.initialize({ source: source, lostTimeout: 500 }).then((controller) => {

    // add a torus knot     
    var geometry = new THREE.TorusKnotGeometry(0.3,0.1,64,16);
    var material = new THREE.MeshNormalMaterial(); 
    var torus = new THREE.Mesh( geometry, material );
    torus.position.y = 0.5
    markerGroup.add(torus);

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

    var patternMarker = new THREEAR.PatternMarker({
        patternUrl: 'patt.hiro',
        markerObject: markerGroup,
        minConfidence: 0.3
    });

    controller.trackMarker(patternMarker);

    controller.addEventListener('markerFound', function(event) {
        console.log('markerFound', event);
    });

    controller.addEventListener('markerLost', function(event) {
        console.log('markerLost', event);
    });

    // run the rendering loop
    var lastTimeMsec = 0;
    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
        controller.update( source.domElement );
        // cube.rotation.x += deltaMsec/10000 * Math.PI
        torus.rotation.y += deltaMsec/1000 * Math.PI
        torus.rotation.z += deltaMsec/1000 * Math.PI
        renderer.render( scene, camera );
    });

});

} } new Sketch({ dom: document.getElementById("container") }); ` I'm getting this error...

any help or suggestion would be appreciated.
Thanks!

gschian0 commented 3 years ago

how I got it working...

import * as THREE from "three"; import marker from '../patt.hiro'; let THREEAR = require("threear"); let OrbitControls = require("three-orbit-controls")(THREE);

gschian0 commented 3 years ago

figured it out per last comment

JamesLMilner / THREEAR

running three AR using parcel #110