three.js中render渲染器与html中body显示之间的联系

最新推荐文章于 2025-11-04 13:40:12 发布

原创最新推荐文章于 2025-11-04 13:40:12 发布 · 1.2k 阅读

2 ·

CC 4.0 BY-SA版权

grammar 同时被 3 个专栏收录

58 篇文章

订阅专栏

javaScript

46 篇文章

订阅专栏

three.js

18 篇文章

订阅专栏

本文介绍了两种使用three.js进行渲染的方法。第一种是在HTML5的body元素中直接生成内容并调用draw函数。第二种是通过指定body中canvas元素的id来初始化渲染器。这两种方法为用户提供了解决实际问题的具体步骤。

方法一： three.js中生成html5中的body。

<body onload="draw();">

</body>
function initRender() {

        renderer = new THREE.WebGLRenderer({antialias: true});

        renderer.setClearColor(new THREE.Color(0x000000)); //设置背景颜色

        renderer.setSize(window.innerWidth, window.innerHeight); //设置大小

        document.body.appendChild(renderer.domElement); //添加到<body>的内容。

 }

方法二：通过html中body的canvas的id来绑定。

<body onload="init()">
<canvas id="mainCanvas"  width="1200px"  height="1000"></canvas>
</body>

function initRenderer() {
      //通过html中body的canvas的id来绑定。
      renderer = new THREE.WebGLRenderer({canvas:document.getElementById("mainCanvas")});
 }