多维数据集网格未在指定的分区中绘制

Cube mesh is not drawing in the specified div

本文关键字：分区 绘制 数据集 网格      更新时间：2023-09-26

我在场景中绘制了一个圆环和立方体网格，我希望立方体位于屏幕的右下角，所以我喜欢这样做：

<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

我是不是错过了什么？提前Thanx。

编辑：

我试着为立方体制作新的渲染器、场景和相机，如下所示：

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

您可以按照以下示例fiddle执行您想要的操作：http://jsfiddle.net/CYMtV/

另请参阅相关线程：https://github.com/mrdoob/three.js/issues/1372

相关文章：