0

How is it possible to put three.js scene into html table? To draw cube in first column. I tried this but it did not work:

<body bgcolor="#E6E6FA">
<table style="position:relative; width:100%; border-style: dotted;">
<tbody>
  <tr>
    <td>
        <script src="three.js"></script>
        <script>
            var scene = new THREE.Scene();
            var camera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000);

            var renderer = new THREE.WebGLRenderer();
            renderer.setSize(500, 500);
            document.body.appendChild(renderer.domElement);

            var geometry = new THREE.CubeGeometry(0.5,0.5,0.5);
            var material = new THREE.MeshBasicMaterial({color: 0x00ff00});
            var cube = new THREE.Mesh(geometry, material);
            scene.add(cube);

            camera.position.z = 5;
            renderer.render(scene, camera);
            document.write('Cube');
        </script>
    </td>
    <td>Column2</td>
  </tr>
  <tr>
    <td>Column1</td>
    <td>Column2</td>
  </tr>
</tbody>

Thanks, Ievgeniia

4

1 回答 1

2

HTML： 

<table>
    <tr>
        <td id="some_id"></td>
    </tr>
</table>

JS：

var container = document.getElementById( 'some_id' );
var R = new THREE.WebGLRenderer();
container.appendChild( R.domElement );

因此，您创建元素，使用 getElementById 函数定位它并将其分配为渲染器的绘制到 html 元素 (domElement)。希望这可以帮助。

      •  

带线：

document.body.appendChild(renderer.domElement);

您将渲染器的绘制元素（画布）直接创建到 <body>，这会导致“全屏”绘制。

于 2013-05-05T18:23:01.630 回答