Question

如何将three.js场景放入html表？在第一列中绘制立方体。我试过这个，但它不起作用：

<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>

谢谢， Ievgeniia

Answer 1

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函数定位它并将其指定为渲染器的draw-to html元素（domElement）。希望这会有所帮助。

使用line：

document.body.appendChild(renderer.domElement);

您可以直接将渲染器的绘图元素（画布）创建为＆lt;身体＆gt;这导致“全屏”绘图。

three.js如何将场景放入表格

1 个答案: