我想在我的html中有多个Three.js动画，但它们是重叠的

Question

我是专业的图形设计师，并且对Three.js有疑问

我尝试过很多东西，但这并不好。我刚刚复制了导入的模型并重命名了它。我尝试了互联网上的一切。这有效，但它们重叠，我也有2个不同的名字。这是我的.js

var container, stats;
        var camera, scene, renderer;
        var mouseX = 0, mouseY = 0;
        var windowHalfX = window.innerWidth / 4;
        var windowHalfY = window.innerHeight / 4;
        init();
        animate();
        function init() {
                // important for multiple canvasuse
container = document.getElementById( 'container1' );
document.body.appendChild( container );
                    // cam
                camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
                camera.position.z = 4;
                    // scene
                scene = new THREE.Scene();
                    // light
                var ambient = new THREE.AmbientLight( 0x444444 );
                scene.add( ambient );
                var directionalLight = new THREE.DirectionalLight( 0xffeedd );
                directionalLight.position.set( 0, 1, 1 ).normalize();
                scene.add( directionalLight );
                    // BG
                scene.background = new THREE.Color( 0xffffff );
                    // BEGIN Clara.io JSON loader code
                var objectLoader = new THREE.ObjectLoader();
                objectLoader.load("untitled-scene.json", function ( obj ) {
                    scene.add( obj );
                } );
                    // mlg render
                renderer = new THREE.WebGLRenderer();
                renderer.setSize( 400, 200 );
                container.appendChild( renderer.domElement );
                document.addEventListener( 'mousemove', onDocumentMouseMove, false );
                        // resize?
                window.addEventListener( 'resize', onWindowResize, false );
                }
                    // draw a different, next canvas
container = document.getElementById( 'container2' );
document.body.appendChild( container );

                    // cam
                camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
                camera.position.z = 4;
                    // scene
                scene = new THREE.Scene();
                    // light
                var ambient = new THREE.AmbientLight( 0x444444 );
                scene.add( ambient );
                var directionalLight = new THREE.DirectionalLight( 0xffeedd );
                directionalLight.position.set( 0, 1, 1 ).normalize();
                scene.add( directionalLight );
                    // BG
                scene.background = new THREE.Color( 0xffffff );

                // BEGIN Clara.io JSON loader code
                var objectLoader = new THREE.ObjectLoader();
                objectLoader.load("untitled-scene2.json", function ( obj ) {
                    scene.add( obj );
                } );
                // mlg rendere reloaded
                    renderer = new THREE.WebGLRenderer();
                    renderer.setSize( 400, 200 );
                    container.appendChild( renderer.domElement );
                document.addEventListener( 'mousemove', onDocumentMouseMove, false );
                //
                window.addEventListener( 'resize', onWindowResize, false );


            function onWindowResize() {
                windowHalfX = window.innerWidth / 2;
                windowHalfY = window.innerHeight / 2;
                camera.aspect = window.innerWidth / window.innerHeight;
                camera.updateProjectionMatrix();
                renderer.setSize( canvas_width, canvas_height );
            }
            function onDocumentMouseMove( event ) {
                mouseX = ( event.clientX - windowHalfX ) / 16;
                mouseY = ( event.clientY - windowHalfY ) / 16;
            }
            //
            function animate() {
                requestAnimationFrame( animate );
                render();
            }
            function render() {
                camera.position.x += ( mouseX - camera.position.x ) * .03;
                camera.position.y += ( - mouseY - camera.position.y ) * .03;
                camera.lookAt( scene.position );
                renderer.render( scene, camera );
            }

和ma html

    <!DOCTYPE html>
<html lang="en">
    <head>
        <title>farts</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
        <style>
            body {
                color: #808080;
                font-family:Monospace;
                font-size:13px;
                text-align:center;

                background-color: #fff;
                margin: 0px;
                overflow: hidden;
                width: 100%;
                height: 100%;
            }
            #info {
                color: #00f;
                position: absolute;
                top: 10px;
                width: 100%;
                text-align: left;
                z-index: 100;
                display:block;
            }

            #container1 {
                width: 300px;
                height: 200px;
                border: 5px solid red;
                float:left;
                margin-top: 200px;
            }
            #container2 {
                width: 300px;
                height: 200px;
                border: 1px solid blue;
                float:left;
            }



        </style>
    </head>

    <body>
        <div id="info">
farts <br />
        </div>
        <div id="container1">
        <script src="num1.js"></script><br/>
        <script src="three.js"></script>
        <script src="Detector.js"></script>
        <script src="stats.min.js"></script>
        </div>
        <div id="container2">
        <script src="num1.js"></script><br/>
        <script src="three.js"></script>
        <script src="Detector.js"></script>
        <script src="stats.min.js"></script>
        </div>
    </body>
</html>

这只是一个有趣的项目，但我很乐意提供。

Answer 1

变化：

renderer.setSize( 400, 200 );

有：

renderer.setSize( 300, 200 );

因为你的div有尺寸（300,200）并且你发送它来渲染其他尺寸（400,200），这就是为什么你的画布来自你的div并且你不应该在编辑你的CSS时遇到问题。