如何在div元素内渲染和定位场景？

Question

我正在尝试将3D场景准确定位在div中。这样做的原因是我可以通过添加div轻松地将3D场景放置在网站的几个页面上。

我希望能够：

1. 指定div和渲染器的相对或绝对位置，以相应地渲染到该位置。
2. 更改div的大小，并将3D场景进行适当缩放。 （如果纵横比与渲染器不同，则在一个轴上裁剪场景。）

我无法让一个简单的情况起作用。我有什么想法我做错了吗？ （见下文我的尝试）。



HTML：

<div class="three_d_renderer"
     style="width: 800px; height: 500px;
            border: 1px solid #aaa;"></div>

JS代码：

var ThreeD = {
    init: function(element){
        var camera, scene, renderer;

        var width = element.offsetWidth;
        var height = element.offsetHeight;

        camera = new THREE.PerspectiveCamera(
            75,
            width/height,
            1, 10000
        );
        camera.position.z = 1000;

        scene = new THREE.Scene();

        var mesh = ThreeD.make_cube(20,20,100);
        mesh.position.x = 0;
        mesh.position.y = 0;
        mesh.position.z = 100;

        scene.add(ThreeD.make_floor());
        scene.add(mesh);

        renderer = new THREE.CanvasRenderer();
        renderer.setSize(width, height);

        $(element).append(renderer.domElement);
        renderer.render(scene, camera);
    },
    make_material: function(){
        var material = new THREE.MeshBasicMaterial({
            color: 0xff0000,
            wireframe: true
        });
        return material;
    },
    make_cube: function(x,y,z){
        var geometry, mesh;

        geometry = new THREE.CubeGeometry(x,y,z);

        mesh = new THREE.Mesh(
            geometry,
            ThreeD.make_material()
        );
        return mesh;
    },
    make_floor: function(){
        var mesh = new THREE.Mesh(
            new THREE.CubeGeometry(1500,1000,10),
            new THREE.MeshBasicMaterial({
                color: 0xc0c0c0
            })
        );
        return mesh;
    },
};
$(document).ready(function(){
        $('div.three_d_renderer').each(function(){
            ThreeD.init(this);
        });
});