After studying a remarkable example by Mr. Doob found at http://threejs.org/examples/css3d_molecules.html, my goal is to develop a webpage presenting TWO 3D chemical structures side by side:
I am facing challenges with the structure on the right half. Both halves are represented as <div> elements with corresponding id's containerleft and containerright, each sporting unattractive background colors :). Despite my attempt to duplicate all variables and associate them with individual containers, I have not been successful.
Although I came across a three.js demonstration showcasing multiple views using WebGL, unfortunately, I cannot utilize WebGL in this scenario.
This code snippet provided below is an abridged version derived from examples/css3d_molecules.html located at https://github.com/mrdoob/three.js.
<div id="containerleft"></div>
<div id="containerright"></div>
<!-- *** 3D MOLECULE *** -->
<script src="../../../www/js/three/three.min.js"></script>
<script src="../../../www/js/three/TrackballControls.js"></script>
<script src="../../../www/js/three/CSS3DRenderer.js"></script>
<script src="../../../www/js/three/PDBLoader.js"></script>
...
</script>
Thank you!