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

我正试图将一个3D场景精确定位在一个div中。原因是，我可以通过添加一个div轻松地将3D场景放置在站点的多个页面上

我希望能够：

指定div和渲染器的相对或绝对位置，以相应地渲染到该位置

更改div和三维场景的大小以适当缩放。（如果纵横比与渲染器不同，则在一个轴上裁剪场景）

我找不到一个简单的工作环境。你知道我做错了什么吗？（我的尝试见下文）

HTML:

---

在jsFiddle（）上，一切看起来都很好。可能您缺少了一些css或js？样式。事实上，我有一个相互矛盾的风格声明。谢谢你的指点。

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

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);
        });
});