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

如何将three.js场景放入html表格中？在第一列中绘制立方体。我试过，但没有奏效：three.js如何将场景放入表格

<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

来源

2013-05-05 Zheden

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

创建渲染器的平局对ELE （帆布）直接到< body>这会导致“全屏”绘图。

来源

2013-05-05 18:23:01

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

回答

相关问题