推荐：将NSDT场景编辑器加入你的3D工具链

3D工具集：NSDT简石数字孪生

Canvas尺寸变化(HTML标签)

前面内容讲解过，如果threejs Canvas画布尺寸变化，需要同步更新相机等受canvas画布尺寸影响的参数，对于HTML标签标注也是如此。

1.12. Canvas画布布局和全屏(opens new window)

8.1. three.js Canvas画布布局(opens new window)

// 画布跟随窗口变化
window.onresize = function () {
    const width = window.innerWidth;
    const height = window.innerHeight;
    // cnavas画布宽高度重新设置
    renderer.setSize(width,height);
    // 相机参数重新设置
    camera.aspect = width / height;
    camera.updateProjectionMatrix();
};

Canvas全屏尺寸变化，CSS2渲染器设置

canvas画布完全填充浏览器文档区域，如果窗口尺寸变化了，通过renderer.setSize()设置canvas画布尺寸，HTML标签相关的CSS渲染器代码也要同步设置css2Renderer.setSize()。

执行css2Renderer.setSize()设置CSS2渲染器输出的HTML标签.domElement的尺寸，保持和canvas画布尺寸一样。

// 画布跟随窗口变化
window.onresize = function () {
    const width = window.innerWidth;
    const height = window.innerHeight;
    // cnavas画布宽高度重新设置
    renderer.setSize(width,height);
    // HTML标签css2Renderer.domElement尺寸重新设置
    css2Renderer.setSize(width,height);
    camera.aspect = width / height;
    camera.updateProjectionMatrix();
};

canvas局部布局-，CSS2渲染器设置

在8.1. three.js Canvas画布布局 (opens new window)的讲解的基础上，给大家设置HTML元素标签。

代码中web页面右下角div元素是用来插入canvas画布的HTML元素。

<div id="webgl" style="position: absolute;top: 60px;left: 200px"></div>

CSS2渲染器输出的标签和webgl渲染器输出的canvas画布一样插入id为webgl的元素中

document.getElementById('webgl').appendChild(renderer.domElement);

document.getElementById('webgl').appendChild(css2Renderer.domElement);

和原来一样，标签的父元素css2Renderer.domElement叠加到threejs canvas画布上面，并完全重合，具体代码根据你CSS布局代码设置，下面代码是课程案例设置方式，不一定要完全一样。不同CSS布局，有不同的叠加写法，同样的CSS布局，也可能有多种写法。

css2Renderer.domElement.style.position = 'absolute';
css2Renderer.domElement.style.top = '0px';

局部布局Canvas尺寸变化，CSS2渲染器设置

尺寸跟随窗口变化，CSS2渲染器标签的代码同样设置。

window.onresize = function () { 
    const width = window.innerWidth - 200; //canvas画布高度
    const height = window.innerHeight - 60; //canvas画布宽度
    renderer.setSize(width, height);
    // HTML标签css2Renderer.domElement尺寸重新设置
    css2Renderer.setSize(width,height);
    camera.aspect = width / height;
    camera.updateProjectionMatrix();
    document.getElementById('left').style.height = height + 'px';
};

上一篇：ThreeJS教程：HTML标签遮挡Canvas画布事件 (mvrlink.com)

下一篇：ThreeJS教程：标签位置不同设置方式 (mvrlink.com)