1

シーンにトーラスと立方体のメッシュを描画しました。立方体を画面の右下隅に配置したいので、次のようにしました。

<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

4

1 に答える 1

0

次のフィドルの例に従って、やりたいことができます：http: //jsfiddle.net/CYMtV/

関連するスレッドも参照してください：https ：//github.com/mrdoob/three.js/issues/1372

于 2012-09-13T14:04:10.140 に答える