我在我的场景中画了一个环面和立方体网格,我希望立方体位于屏幕的右下角,所以我这样做了:
<div style="position: absolute; bottom: 0px; right:0px; width: 100px; text-align: center; ">
<script>
var cube = new THREE.Mesh(new THREE.CubeGeometry(50,50,50),
new THREE.MeshBasicMaterial({color: 0x000000}));
scene.add(cube);
</script>
</div>
但是,立方体仍然跟随屏幕中心:http://medigarage.com/html5/js/three.js/examples/canvas_camera2.html
我错过了什么吗?提前致谢。
编辑:
我尝试像这样为立方体制作新的渲染器、场景和相机:
HTML代码:
<div id="share">
CSS 代码:
#share {
border: 1px solid black; /* or none; */
margin: 20px;
padding: 0px;
width: 200px;
height: 200px;
position: absolute;
right: 0px;
bottom: 0px;
}
JavaScript 代码:
<script>
//dom
var container2=document.getElementById('share');
//renderer
var renderer2 = new THREE.CanvasRenderer();
renderer2.setSize(200,200);
container2.appendChild(renderer2.domElement);
//Scene
var scene2 = new THREE.Scene();
//Camera
var camera2 = new THREE.PerspectiveCamera(50,200/200,1,1000);
camera2.up=camera.up;
scene2.add(camera2);
//Axes
var axes2= new THREE.AxisHelper();
scene2.add(axes2);
//Add Cube
var cube = new THREE.Mesh(new THREE.CubeGeometry(50,50,50),
new THREE.MeshBasicMaterial({color: 0x000000}));
scene2.add(cube);
//
renderer2.render(scene2,camera2);
</script>
我在正确的位置得到了 div,但立方体不在那里,在 Web 控制台中一切正常,我没有收到任何错误。你能指出我遗漏的一点吗? 你仍然可以在这里看到它:http://medigarage.com/html5/js/three.js/examples/canvas_camera2.html
最佳答案
你可以按照这个例子做你想做的事:http://jsfiddle.net/CYMtV/
关于javascript - 立方体网格未在指定的 div 中绘制,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12407718/