Semi-Succesful I-frame url inside blend 4 web
03 February 2016 02:00
Hey i have linked css3drenderer.js and t-query-bundle.js and have successfully added an iframe inside my blend 4 web json file with the following code inside the canvas divider
It really is just like an extra layer of webgl in the canvas with a transparent back ground but if i find a way to disconnect the camera controls and fix it in position some where in the code (late right now) while i wander in blend 4 web scene it is a temporary solution for someone.
Original demonstration of the website inside webgl -
http://learningthreejs.com/data/2013-04-30-closing-the-gap-between-html-and-webgl/index.html
<script>
var world = tQuery.createWorld().boilerplate().start();
tQuery.createPlane().addTo(world)
.scaleBy(16)
.setBasicMaterial()
// .wireframe(true)
// .wireframeLinewidth(3)
.opacity(0.5)
.blending(THREE.NoBlending)
.color('black')
.back()
var rendererCSS = new THREE.CSS3DRenderer();
rendererCSS.setSize( window.innerWidth, window.innerHeight );
rendererCSS.domElement.style.position = 'relative';
rendererCSS.domElement.style.top = 0;
rendererCSS.domElement.style.margin = 0;
rendererCSS.domElement.style.padding = 0;
document.body.appendChild( rendererCSS.domElement );
THREEx.WindowResize.bind(rendererCSS, world.camera().get(0));
// put the mainRenderer on top
var rendererMain = world.tRenderer();
rendererMain.domElement.style.position = 'relative';
rendererMain.domElement.style.top = 0;
rendererMain.domElement.style.zIndex = 1;
rendererCSS.domElement.appendChild( rendererMain.domElement );
var element = document.createElement('iframe')
element.src = 'https://apprtc.appspot.com/r/707795761'
element.style.width = '1024px';
element.style.height = '1024px';
// var element = document.createElement( 'div' );
// element.style.width = '100px';
// element.style.height = '100px';
// element.style.background = new THREE.Color( Math.random() * 0xffffff ).getStyle();
var sceneCSS = new THREE.Scene();
var objectCSS = new THREE.CSS3DObject( element );
window.objectCSS = objectCSS
objectCSS.scale.multiplyScalar(1/63.5)
sceneCSS.add( objectCSS );
world.loop().hookPostRender(function(delta, now){
rendererCSS.render( sceneCSS, world.tCamera() );
})
</script>
It really is just like an extra layer of webgl in the canvas with a transparent back ground but if i find a way to disconnect the camera controls and fix it in position some where in the code (late right now) while i wander in blend 4 web scene it is a temporary solution for someone.
Original demonstration of the website inside webgl -
http://learningthreejs.com/data/2013-04-30-closing-the-gap-between-html-and-webgl/index.html
03 February 2016 11:01
Thanks for the info! This technique has some drawbacks but we'll take a look on this.
03 February 2016 12:48
** UPDATE **
From further investigation it seems the camera transform needs to be in sync with the users input in the tquery which seems dumb to do, but since it is using a lambert material there might be a way to assign an object the material and just hide the extra layer getting the material for now.
In any case if anyone is going to go forward with trying to embed an iframe with the css3drenderer and tquery here are two lines of code to note.
I might try to sync the camera translation to the b4w input and i will try to see if i can assign the material to a plane. Im pretty noob but ill give it a stab.
From further investigation it seems the camera transform needs to be in sync with the users input in the tquery which seems dumb to do, but since it is using a lambert material there might be a way to assign an object the material and just hide the extra layer getting the material for now.
In any case if anyone is going to go forward with trying to embed an iframe with the css3drenderer and tquery here are two lines of code to note.
//make links in web pages clickable by setting z-index to negative -1
rendererMain.domElement.style.zIndex = -1;
//remove camera control to fix the iframe in place
world.removeCameraControls();
I might try to sync the camera translation to the b4w input and i will try to see if i can assign the material to a plane. Im pretty noob but ill give it a stab.
03 February 2016 19:28
Looking at the webgl inspector all vertex and fragment shaders have nothing to do with the iframe material.. I looked at voodoo.js mixing webgl with html but that got discontinued it seems… Anyway ill update this post if i have make any progress in making a iframe plane fixed inside of blend 4 web scene. ![]( "fearful")
04 February 2016 00:43
Ok i think this is the solution!
https://github.com/PixelsCommander/HTML-GL
I also found
http://people.mozilla.org/~roc/rendering-HTML-elements-to-canvas.html
But i just have no clue whats going on![]( "grinning-smiling-eyes")
However I did notice there was a webgl conference couple years ago about rendering html dom subtree as a texture
https://www.youtube.com/watch?v=6YYFsmjCKX4&feature=player_detailpage#t=403s
I hope this helps out a bit. I also looked into voodoo.js which seemed to be able to mix webgl and html perfectly but there discontinued and website is offline.
https://github.com/PixelsCommander/HTML-GL
I also found
http://people.mozilla.org/~roc/rendering-HTML-elements-to-canvas.html
But i just have no clue whats going on
However I did notice there was a webgl conference couple years ago about rendering html dom subtree as a texturehttps://www.youtube.com/watch?v=6YYFsmjCKX4&feature=player_detailpage#t=403s
I hope this helps out a bit. I also looked into voodoo.js which seemed to be able to mix webgl and html perfectly but there discontinued and website is offline.