文章/答案/技术大牛

发布

社区首页 >问答首页 >three.js如何将场景放入表中

问three.js如何将场景放入表中
EN

Stack Overflow用户

提问于 2013-05-05 21:59:37

回答 1查看 835关注 0票数 0

如何将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>

谢谢，艾夫根尼亚

html

three.js

回答 1

Stack Overflow用户

回答已采纳

发布于 2013-05-06 02:23:02

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 >，这会导致“全屏”绘制。

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/16385273

复制

相似问题

问three.js如何将场景放入表中
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问three.js如何将场景放入表中EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问three.js如何将场景放入表中
EN