CSS3DRenderer

[alexey13]

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

What is the current behavior? If we use both renderers we see that size of css3dobject in landscape mode is smaller then it should be. Modifications that used by arToolkitSource.copyElementSizeTo(renderer.domElement) cannot be used for rendererCSS3D.domElement. I made a research and found that ARJS makes modifications to canvas size of renderer. Oninit and resize event. https://github.com/AR-js-org/AR.js/blob/master/three.js/src/threex/threex-artoolkitsource.js#L357 I made a scale for CSS3DRenderer and that solved a problem. Changes made in OnResize function. Please review my solution

function onResize(){
    arToolkitSource.onResizeElement()
    arToolkitSource.copyElementSizeTo(renderer.domElement)
    rendererCSS3D.setSize(window.innerWidth, window.innerHeight)
    if (window.innerWidth > window.innerHeight) {
    //landscape
    rendererCSS3D.domElement.style.transform = 'scale(1.75)';
  } else {
    rendererCSS3D.domElement.style.transform = 'scale(1)';
  }

    if( arToolkitContext.arController !== null ){
        arToolkitSource.copyElementSizeTo(arToolkitContext.arController.canvas)
    }
}

Please mention other relevant information such as the browser version, Operating System and Device Name Chrome, Android

What is the expected behavior? CSS3D models should have correct size

[kalwalt]

Hi @alexey13 Where do you applied these changes? inside threex-artoolkitsource or where? Please also change the link that you posted, that one is wrong and is referring to the old repository.

[alexey13]

Changed the link. Modifications applied in onResize function that used in every example and listens to init AR and resize events https://github.com/AR-js-org/AR.js/blob/master/three.js/examples/basic.html#L72

[alexey13]

Its a hack for CSS3DRenderer to follow modifications of ARJS to renderer.domElement

[kalwalt]

@alexey13 now it is clear thank you, Never used a CSS3D Renderer with AR.js Have you also an example?

[alexey13]

Yes, made it here. Try to view landscape and portrait. https://codepen.io/alexzhav/pen/xxGoNRw Pattern is Hiro. You should see that size of css3d object is different in portrait and lands

[JamesBotterill]

Wow I've been looking to integrate htmlMixer in ar.js.

Really interested to know how your progressing with this

[alexey13]

You know, its already working with that onresize function

function onResize(){
    arToolkitSource.onResizeElement()
    arToolkitSource.copyElementSizeTo(renderer.domElement)
    rendererCSS3D.setSize(window.innerWidth, window.innerHeight)
    if (window.innerWidth > window.innerHeight) {
    //landscape
    rendererCSS3D.domElement.style.transform = 'scale(1.75)';
  } else {
    rendererCSS3D.domElement.style.transform = 'scale(1)';
  }

    if( arToolkitContext.arController !== null ){
        arToolkitSource.copyElementSizeTo(arToolkitContext.arController.canvas)
    }
}

[JamesBotterill]

This seems related but I'm not able to get the video to fill the screen unless I rotate the device and back again.

Then the video is greater than the screen. Investing further but not sure what's happening

[alexey13]

Can you show me a code? Fill screen of mobile or model?

[kalwalt]

@JamesBotterill maybe this is related to issue https://github.com/AR-js-org/AR.js/issues/54 ?

[JamesBotterill]

@kalwalt yes that seems like the issue.