我正在尝试将 3D 场景准确定位在 div 中。这样做的原因是,我只需添加一个 div 就可以轻松地将 3D 场景放置在网站的多个页面上。
我希望能够:
- 指定 div 和渲染器的相对或绝对位置以相应地渲染到该位置。
- 更改 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);
});
});