css3dobjects not aligning to marker properly

Jarodwr commented 6 years ago

Do you want to request a feature or report a bug? bug

What is the current behavior? css3drenderer not tracking marker properly

If the current behavior is a bug, please provide the steps to reproduce. Create a css3drenderer and add a colored div to see the div not move with the marker This is my example file which is a modified css3d version of basic.html example in three.js:

<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<!-- three.js library -->
<script src='vendor/three.js/build/three.min.js'></script>
<!-- ar.js -->
<script src="../build/ar.js"></script>
<script>THREEx.ArToolkitContext.baseURL = '../'</script>
<script src="https://rawgithub.com/mrdoob/three.js/dev/examples/js/renderers/CSS3DRenderer.js"></script>
<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 camera transform
    <br/>
    Contact me any time at <a href='https://twitter.com/jerome_etienne' target='_blank'>@jerome_etienne</a>
</div><script>
    //////////////////////////////////////////////////////////////////////////////////
    //      Init
    //////////////////////////////////////////////////////////////////////////////////

    var renderer = new THREE.CSS3DRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );
    renderer.domElement.style.position = 'absolute';
    renderer.domElement.style.top = 0;
    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.PerspectiveCamera( 90, window.innerWidth / window.innerHeight, 1, 10000 );
    scene.add(camera);

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

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

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

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

    // create atToolkitContext
    var arToolkitContext = new THREEx.ArToolkitContext({
        cameraParametersUrl: THREEx.ArToolkitContext.baseURL + '../data/data/camera_para.dat',
        detectionMode: 'mono',
    })
    // 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 )

        // update scene.visible if the marker is seen
        scene.visible = camera.visible
    })

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

    // init controls for camera
    var markerControls = new THREEx.ArMarkerControls(arToolkitContext, camera, {
        type : 'pattern',
        patternUrl : THREEx.ArToolkitContext.baseURL + '../data/data/patt.hiro',
        // patternUrl : THREEx.ArToolkitContext.baseURL + '../data/data/patt.kanji',
        // as we controls the camera, set changeMatrixMode: 'cameraTransformMatrix'
        changeMatrixMode: 'cameraTransformMatrix'
    })
    // as we do changeMatrixMode: 'cameraTransformMatrix', start with invisible scene
    scene.visible = false

    //////////////////////////////////////////////////////////////////////////////////
    //      add an object in the scene
    //////////////////////////////////////////////////////////////////////////////////

    var element = document.createElement("div");
    element.style.backgroundColor = 'red'
    element.style.width = '50px'
    element.style.height = '50px'

    let scale = 0.04

  let obj = new THREE.CSS3DObject(element)
  obj.scale.x = scale
  obj.scale.y = scale
  obj.scale.z = scale
    scene.add(obj)

    //////////////////////////////////////////////////////////////////////////////////
    //      render the whole thing on the page
    //////////////////////////////////////////////////////////////////////////////////

    // render the scene
    onRenderFcts.push(function(){
        renderer.render( scene, camera );
    })

    // 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></body>

What is the expected behavior? css3d div stays on target If this is a feature request, what is motivation or use case for changing the behavior?

Please mention other relevant information such as the browser version, Operating System and Device Name Firefox, Windows 10, 1920*1080 resolution

yannklein commented 5 years ago

Hi @Jarodwr I tried CSS3D objects with ARjs on my own code and also experienced 3Dobjects/marker misalignements. Basically, the rotation is aligned but the translation is not (the 3D objects are fixed in translation). Do you experience the same behavior?

nicolocarpignoli commented 5 years ago

closing as now answer from author for a long time

mattscotty commented 5 years ago

Did anyone find a solution to this? I'm having similar issues myself when trying to implement HTML objects via CSS3DRenderer

yannklein commented 5 years ago

@mattscotty I actually found a solution. I don’t remember the problem I had before, but basically this is a successful project implementing the solution -> https://github.com/yannklein/hole-in-the-wall I let you dig inside the code, come back to me if needed.

mattscotty commented 5 years ago

Thank you for the response, I’ll have a look now.

From: Yann Klein notifications@github.com Sent: 07 August 2019 13:31 To: jeromeetienne/AR.js AR.js@noreply.github.com Cc: mattscotty mattscotty@hotmail.com; Mention mention@noreply.github.com Subject: Re: [jeromeetienne/AR.js] css3dobjects not aligning to marker properly (#329)

@mattscottyhttps://github.com/mattscotty I actually found a solution. I don’t remember the problem I had before, but basically this is a successful project implementing the solution -> https://github.com/yannklein/hole-in-the-wall I let you dig inside the code, come back to me if needed.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://github.com/jeromeetienne/AR.js/issues/329?email_source=notifications&email_token=AAQEVITUPTHJDX4XKFBMCSLQDK6ALA5CNFSM4E3NJW5KYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD3YHLVA#issuecomment-519075284, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AAQEVIR4KFOM4E7U74KZNB3QDK6ALANCNFSM4E3NJW5A.

jeromeetienne / AR.js

css3dobjects not aligning to marker properly #329