javascript - 如何在 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);
        });
});