Question

使用Doob先生在http://threejs.org/examples/css3d_molecules.html提供的优秀示例，我想创建一个显示彼此相邻的两个3D化学结构的网页：

enter image description here

正如你所看到的，我正在努力解决右半边的结构问题。两个部分都是<div>，其中包含适当的ID containerleft和containerright以及丑陋的背景颜色:)。我尝试复制所有变量并将它们分配给一个container，但没有用。

我找到了一个使用WebGL的多个视图的三个例子，不幸的是我无法使用WebGL。

请在下面找到我正在使用的代码。它是examples/css3d_molecules.html 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>
        var cameraleft, scene, renderer;
        var controls;
        var root;

        var objects = [];
        var tmpVec1 = new THREE.Vector3();
        var tmpVec2 = new THREE.Vector3();
        var tmpVec3 = new THREE.Vector3();
        var tmpVec4 = new THREE.Vector3();

        var visualizationType = 2;

        var loader = new THREE.PDBLoader();
        var colorSpriteMap = {};
        var baseSprite = document.createElement( 'img' );

        init();
        animate();

        function init() {

            cameraleft = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 5000 );
            cameraleft.position.z = 1500;

            scene = new THREE.Scene();

            root = new THREE.Object3D();
            scene.add( root );

            //

            renderer = new THREE.CSS3DRenderer();
            renderer.setSize( window.innerWidth / 2, window.innerHeight);
            document.getElementById('containerleft').appendChild( renderer.domElement );

            //

            controls = new THREE.TrackballControls( cameraleft, renderer.domElement );
            controls.rotateSpeed = 0.5;
            controls.addEventListener( 'change', render );

            //

            baseSprite.onload = function () {
                loadMolecule( "models/molecules/h2co3.pdb" );
            };

            baseSprite.src = 'textures/sprites/ball.png';

            //

            window.addEventListener( 'resize', onWindowResize, false );

        }

        //

        function generateButtonCallback( url ) {

            return function ( event ) {

                loadMolecule( url );

            }

        }

        function showAtomsBonds() {

            for ( var i = 0; i < objects.length; i ++ ) {

                var object = objects[ i ];

                object.element.style.display = "";
                object.visible = true;

                if ( ! ( object instanceof THREE.CSS3DSprite ) ) {

                    object.element.style.height = object.userData.bondLengthShort;

                }

            }

        }

        //

        function colorify( ctx, width, height, color, a ) {

            var r = color.r;
            var g = color.g;
            var b = color.b;

            var imageData = ctx.getImageData( 0, 0, width, height );
            var data = imageData.data;

            for ( var y = 0; y < height; y ++ ) {

                for ( var x = 0; x < width; x ++ ) {

                    var index = ( y * width + x ) * 4;

                    data[ index ]     *= r;
                    data[ index + 1 ] *= g;
                    data[ index + 2 ] *= b;
                    data[ index + 3 ] *= a;

                }

            }

            ctx.putImageData( imageData, 0, 0 );

        }

        function imageToCanvas( image ) {

            var width = image.width;
            var height = image.height;

            var canvas = document.createElement( 'canvas' );

            canvas.width = width;
            canvas.height = height;

            var context = canvas.getContext( '2d' );
            context.drawImage( image, 0, 0, width, height );

            return canvas;

        }

        //

        function loadMolecule( url ) {

            for ( var i = 0; i < objects.length; i ++ ) {

                var object = objects[ i ];

                object.parent.remove( object );

                if ( object.element.parentNode === renderer.cameraElement ) {

                    renderer.cameraElement.removeChild( object.element );

                }

                if ( object.userData.joint ) {

                    object.userData.joint.parent.remove( object.userData.joint );

                }

            }

            objects = [];

            loader.load( url, function ( geometry, geometryBonds ) {

                var offset = THREE.GeometryUtils.center( geometry );
                geometryBonds.applyMatrix( new THREE.Matrix4().makeTranslation( offset.x, offset.y, offset.z ) );

                for ( var i = 0; i < geometry.vertices.length; i ++ ) {

                    var position = geometry.vertices[ i ];
                    var color = geometry.colors[ i ];
                    var element = geometry.elements[ i ];

                    if ( ! colorSpriteMap[ element ] ) {

                        var canvas = imageToCanvas( baseSprite );
                        var context = canvas.getContext( '2d' );

                        colorify( context, canvas.width, canvas.height, color, 1 );

                        var dataUrl = canvas.toDataURL();

                        colorSpriteMap[ element ] = dataUrl;

                    }

                    colorSprite = colorSpriteMap[ element ];

                    var atom = document.createElement( 'img' );
                    atom.src = colorSprite;

                    var object = new THREE.CSS3DSprite( atom );
                    object.position.copy( position );
                    object.position.multiplyScalar( 75 );
                    object.billboard = true;

                    object.matrixAutoUpdate = false;
                    object.updateMatrix();

                    root.add( object );

                    objects.push( object );

                }

                for ( var i = 0; i < geometryBonds.vertices.length; i += 2 ) {

                    var start = geometryBonds.vertices[ i ];
                    var end = geometryBonds.vertices[ i + 1 ];

                    start.multiplyScalar( 75 );
                    end.multiplyScalar( 75 );

                    tmpVec1.subVectors( end, start );
                    var bondLength = tmpVec1.length() - 50;


                    //

                    var bond = document.createElement( 'div' );
                    bond.className = "bond";
                    bond.style.height = bondLength + "px";

                    var object = new THREE.CSS3DObject( bond );
                    object.position.copy( start );
                    object.position.lerp( end, 0.5 );

                    object.userData.bondLengthShort = bondLength + "px";
                    object.userData.bondLengthFull = ( bondLength + 55 ) + "px";

                    //

                    var axis = tmpVec2.set( 0, 1, 0 ).cross( tmpVec1 );
                    var radians = Math.acos( tmpVec3.set( 0, 1, 0 ).dot( tmpVec4.copy( tmpVec1 ).normalize() ) );

                    var objMatrix = new THREE.Matrix4().makeRotationAxis( axis.normalize(), radians );
                    object.matrix = objMatrix;
                    object.rotation.setEulerFromRotationMatrix( object.matrix, object.eulerOrder );

                    object.matrixAutoUpdate = false;
                    object.updateMatrix();

                    root.add( object );

                    objects.push( object );

                    //

                    var bond = document.createElement( 'div' );
                    bond.className = "bond";
                    bond.style.height = bondLength + "px";

                    var joint = new THREE.Object3D( bond );
                    joint.position.copy( start );
                    joint.position.lerp( end, 0.5 );

                    joint.matrix.copy( objMatrix );
                    joint.rotation.setEulerFromRotationMatrix( joint.matrix, joint.eulerOrder );

                    joint.matrixAutoUpdate = false;
                    joint.updateMatrix();

                    var object = new THREE.CSS3DObject( bond );
                    object.rotation.y = Math.PI/2;

                    object.matrixAutoUpdate = false;
                    object.updateMatrix();

                    object.userData.bondLengthShort = bondLength + "px";
                    object.userData.bondLengthFull = ( bondLength + 55 ) + "px";

                    object.userData.joint = joint;

                    joint.add( object );
                    root.add( joint );

                    objects.push( object );

                }

                showAtomsBonds();

                render();

            } );


        }

        //

        function onWindowResize() {

            cameraleft.aspect = window.innerWidth / window.innerHeight;
            cameraleft.updateProjectionMatrix();

            renderer.setSize( (window.innerWidth/2), window.innerHeight );

            render();

        }

        function animate() {

            requestAnimationFrame( animate );
            controls.update();

            var time = Date.now() * 0.0004;

            root.rotation.x = time;
            root.rotation.y = time * 0.7;

            render();

        }

        function render() {

            renderer.render( scene, cameraleft );

        }

</script>

谢谢！

Answer 1

使用CSS3DRenderer，看起来像复制所有代码是到目前为止实现这一目标的唯一方法。

我正在为iPad创建一个交互式立体查看器（像其他students already made一样，但是HTML版本），为此，我需要两个相同的图像，相机位置稍有不同。对于WebGL渲染器，已经有一个库，但看起来CSS3直到有一些限制，阻止我们做同样的事情。

在一个HTML页面上有多个Three.js CSS3D场景，分子示例

1 个答案: