Hi, I am trying to develop fisheye animation on a DOM element. So far I managed to render my website in webgl using CSS3DRenderer. I am three.js newbie and so I am wondering if that’s even possible. I have tried lens distortion but it seems not to do anything with CSS3DObject - it only moves the object back and forth, not distorting it into a ‘sphere’. I was also thinking about applying CSS3DObject as a texture to existing sphere, although without any success.
Do you have any ideas and tips how to approach this problem?
If you are using CSS3DRenderer, you are not using WebGL. Just CSS3 transformations.
I don’t think it’s possible to perform fisheye projection with CSS3DRenderer. You have to use WebGL for this.
Is it possible to make some realtime connection between CSS3DRenderer and WebGL so that I am able to animate the view/scene in WebGL? Like a switch toggle for the animation duration - hide CSS3D and show WebGL.
Um, I’m not 100% sure i understand what you mean. A typical use case for the combination of CSS3DRenderer/ CSS2DRenderer with WebGLRenderer is the addition of DOM-based labels to a WebGL scene. In this way it’s possible to connect labels to 3D objects like in this example:
https://threejs.org/examples/#webgl_loader_pdb
The docs for CSS3DRenderer and CSS2DRenderer were recently updated. I hope they provide some additional information to you.
https://threejs.org/docs/#examples/renderers/CSS3DRenderer
https://threejs.org/docs/#examples/renderers/CSS2DRenderer
1 Like