Javascript 将three.js容器定位为html div

我有一个

文章

容器，里面有三个

标签。第三个
元素
id='menuPuzzleType'
包含一个
Three.js
脚本，该脚本生成两个立方体网格，并在画布渲染器中渲染它们

<article id="popup">

    <aside id='close'><img src="img/close.png" onClick="aFunction()" /></aside>
    <aside id='msgPuzzleType'>Please choose the puzzle type you want to play</aside>
    <aside id='menuPuzzleType'>
        <script>
        function animate() {
            requestAnimationFrame( animate );
            render();
        }

        function render() {
            cube.rotation.y -= 0.03;
            cube2.rotation.y -=0.03;
            renderer2.render(scene2, camera2);
        }
        var container2 = document.getElementById('menuPuzzleType');

        //renderer
        var renderer2 = new THREE.CanvasRenderer();
        renderer2.setSize(400,400);//Was 100,100
        container2.appendChild(renderer2.domElement);

        //Scene
        var scene2 = new THREE.Scene();

        //Camera
        var camera2 = new THREE.PerspectiveCamera(50,50/50,1,1000);
        camera2.position.z = 240;//normal value is 100
        camera2.position.y=60;
        scene2.add(camera2);

        //Axes
        var axes2= new THREE.AxisHelper();

        //Add texture for the cube
        //Use image as texture
        var img2 = new THREE.MeshBasicMaterial({ //CHANGED to MeshBasicMaterial
            map:THREE.ImageUtils.loadTexture('img/2d.png') 
        });
        img2.map.needsUpdate = true; //ADDED

        //Add Cube
        var cube = new THREE.Mesh(new THREE.CubeGeometry(40,40,40),img2);
        cube.position.x =- 60;
        scene2.add(cube);

        var img3 = new THREE.MeshBasicMaterial({ //CHANGED to MeshBasicMaterial
            map:THREE.ImageUtils.loadTexture('img/3d.png') 
        });

        img3.map.needsUpdate = true; //ADDED

        var cube2 = new THREE.Mesh(new THREE.CubeGeometry(40,40,40),img3);
        cube2.position.x = 70; cube.position.y = 60; cube2.position.y=60;
        scene2.add(cube2);
        renderer2.render(scene2,camera2);

        animate();
        </script>
    </aside>
</article>

如何将两个多维数据集移动到
文章
容器标签中？
使用您提供的链接，我更改了以下内容以将多维数据集放入文章中：

canvas {
    position: absolute;
    top: -80px;
}

解决问题的“Three.js”解决方案是：

renderer2.setSize( 400, 150 );

您还硬连线了透视摄影机的纵横比，因此需要使其与画布尺寸匹配

var camera2 = new THREE.PerspectiveCamera( 50, 400/150, 1, 1000 );

这将使画布变小，使其适合。然后，您可以将相机移动得更近，使您的对象达到您想要的大小。
我完全按照您的建议做了，但在您发布之前，请放大：）谢谢您的建议，但我认为如果我有多个
CanvasRenderer
dom，那就不行了。不用担心，我只是演示了我可以让您的示例正常工作。该示例中只有一个画布。
var camera2 = new THREE.PerspectiveCamera( 50, 400/150, 1, 1000 );