ThreeJS教程:CSS3DRenderer渲染HTML标签

推荐:将NSDT场景编辑器加入你的3D工具链
3D工具集:NSDT简石数字孪生

CSS3DRenderer渲染HTML标签

CSS3渲染器CSS3DRenderer和CSS2渲染器CSS2DRenderer整体使用流程基本相同,只是在HTML标签渲染效果方面不同,比如CSS3渲染的标签会跟着场景相机同步缩放,而CSS2渲染的标签默认保持自身像素值。

下面就在CSS2渲染器代码基础上给大家讲解。

设置CSS3渲染器代码

和CSS2渲染器代码一样设置,只需要把CSS2换成CSS3即可。

// 引入CSS3渲染器CSS3DRenderer
import {CSS3DRenderer} from 'three/addons/renderers/CSS3DRenderer.js';
// 创建一个CSS3渲染器CSS3DRenderer
const css3Renderer = new CSS2DRenderer();
css2Renderer.setSize(width, height);
// HTML标签<div id="tag"></div>外面父元素叠加到canvas画布上且重合
css2Renderer.domElement.style.position = 'absolute';
css2Renderer.domElement.style.top = '0px';
//设置.pointerEvents=none,解决HTML元素标签对threejs canvas画布鼠标事件的遮挡
css2Renderer.domElement.style.pointerEvents = 'none';
document.body.appendChild(css2Renderer.domElement);
// 渲染循环
function render() {
    css3Renderer.render(scene, camera);
    // ...
    requestAnimationFrame(render);
}
window.onresize = function () {
    ...
    // HTML标签css3Renderer.domElement尺寸重新设置
    css3Renderer.setSize(width,height);
};

CSS3对象模型CSS3DObject

CSS3对象模型CSS3DObject可以类比前面介绍的CSS2模型对象CSS2DObject学习。

// 引入CSS3模型对象CSS3DObject
import { CSS3DObject } from 'three/addons/renderers/CSS3DRenderer.js';

通过CSS3DObject类,可以把一个HTML元素转化为一个CSS3模型对象,就像threejs的网格模型一样,可以添加到场景中,可以设置位置,可以作为其它模型对象的子对象。

const div = document.getElementById('tag');
// HTML元素转化为threejs的CSS3模型对象
const tag = new CSS3DObject(div);
//标签tag作为mesh子对象,默认标注在模型局部坐标系坐标原点
mesh.add(tag);
// 相对父对象局部坐标原点偏移80,刚好标注在圆锥
tag.position.y += 80;

tag.position.y += 80;标注圆锥模型的顶部

const geometry = new THREE.ConeGeometry(25, 80);
geometry.translate(0, 40, 0);
const mesh = new THREE.Mesh(geometry, material);
mesh.add(tag);
// 相对父对象局部坐标原点偏移80,刚好标注在圆锥顶部
tag.position.y += 80;

CSS3DObject渲染效果测试

CSS3模型对象CSS3DObject渲染结果,就像一个矩形平面网格模型一样。你通过相机控件OrbitControls旋转、缩放三维场景,CSS3模型对象CSS3DObject跟着旋转、缩放。

旋转过程中HTML元素标签的正反面都可以看到。

一个网格模型被另一个不透明网格模型遮挡,canvas画布上不会显示,不过注意一点CSS3DObject模型本质上渲染到网页上还是HTML元素,这就是说模型背面的HTML标签并不会被遮挡,CSS3DObject标签是以HTMl元素形式叠加在canvas画布上的,不受threejs内部模型对象影响。

禁止CSS3DObject标签对应HTMl元素背面显示

<div id="tag" style="backface-visibility: hidden;">标签内容</div>

标签相对标注点的位置

默认情况下CSS3模型对象渲染的标签的几何中心默认和标注位置的坐标重合。

CSS3DRenderer渲染的HTML标签尺寸

CSS2DRenderer渲染HTML元素标签,默认情况下,HTML元素会保持本身尺寸的像素值,除非你通过代码缩放。

CSS3DRenderer渲染的HTML元素,你可以把HTML标签对象想象为一个矩形平面网格模型Mesh,HTML标签对象在threejs中的尺寸来源是HTML元素的像素尺寸值,比如HTML像素高度40px,那么HTML标签对象在threejs中的数字相当于高度为40的矩形平面网格模型。

测试验证上面规律总结:把标签的高度设置为160px,160的一半是80,也就是圆锥的高度,这样HTML标签下半部分和圆锥底部重合。

<div id="tag" style="height: 160px;">标签内容</div>

border、padding、height、width都会影响标签渲染大小,你可以分别测试体验。

<style>
    #tag {
        padding: 0px 10px;
        border: #00ffff solid 1px;
        height: 40px;
        border-radius: 5px;
        width: 65px;
    }
</style>

缩放标签

const div = document.getElementById('tag');
const tag = new CSS3DObject(div);
tag.scale.set(0.5,0.5,1);//缩放标签尺寸

标签偏移

CSS2渲染HTML标签偏移方式

const div = document.getElementById('tag');
// id="tag"元素高度322px,默认标签中心与标注点
div.style.top = '-161px'; //平移-161px,指示线端点和标注点重合

CSS2渲染的标签和CSS3渲染的标签偏移方式不同,CSS3标签,直接按照threejs模型尺寸修改方式改变,比用HTML像素方式更方便准确。

tag.scale.set(0.5,0.5,1);//缩放标签尺寸
tag.position.y += 10;//累加标签高度一半,标签底部和圆锥顶部标注位置重合

CSS3精灵模型CSS3DSprite

// 引入CSS3精灵模型对象CSS3DSprite
import { CSS3DSprite } from 'three/addons/renderers/CSS3DRenderer.js';

CSS3对象模型CSS3DObject渲染效果类似矩形平面网格模型Mesh

CSS3精灵模型CSS3DSprite渲染效果类似以前学习的精灵模型对象Sprite

const div = document.getElementById('tag');
// HTML元素转化为threejs的CSS3精灵模型`CSS3DSprite`
const tag = new CSS3DSprite(div);
//标签tag作为mesh子对象,默认标注在模型局部坐标系坐标原点
mesh.add(tag);
// 相对父对象局部坐标原点偏移80,刚好标注在圆锥
tag.position.y += 80;

CSS3精灵模型CSS3DSprite渲染特点

CSS3精灵模型CSS3DSprite对应的HTML标签,可以跟着场景缩放,位置可以跟着场景旋转,但是自身的姿态角度始终平行于canvas画布,不受旋转影响,就像精灵模型一样Sprite

CSS3精灵模型CSS3DSprite尺寸、位置、缩放等渲染规律和CSS3对象模型CSS3DObject基本一致。

标签局部遮挡鼠标事件

HTML标签<div id="tag"></div>外面的父元素css3Renderer.domElement防止鼠标遮挡canvas事件方式,和CSS2渲染器一样。

//设置.pointerEvents=none,解决HTML元素标签对threejs canvas画布鼠标事件的遮挡
css3Renderer.domElement.style.pointerEvents = 'none';

标签<div id="tag"></div>在CSS3渲染器渲染的时候,默认会被设置为pointer-events: auto;,这时候虽然css3Renderer.domElement不遮挡canvas画布的鼠标事件,但是<div id="tag"></div>遮挡canvas画布的鼠标事件。

这时候你可以通过代码强制改变CSS3渲染器给标签设置的.style.pointerEvents = 'auto',设置为.style.pointerEvents = 'none',这时候注意一点,修改.style.pointerEvents,要在实例化new CSS3DObject(div)之后,因为执行new CSS3DObject(div)的时候,会把HTML标签设置为.style.pointerEvents = 'auto'

const div = document.getElementById('tag');
// HTML元素转化为threejs的CSS3模型对象
const tag = new CSS3DObject(div);
// new CSS3DObject(div);之后设置style.pointerEvents 
div.style.pointerEvents = 'none';

上一篇:ThreeJS教程:鼠标选中模型弹出标签(工厂) (mvrlink.com)

下一篇:ThreeJS教程:CSS3批量标注多个标签 (mvrlink.com)

NSDT场景编辑器 | NSDT 数字孪生 | GLTF在线编辑器 | 3D模型在线转换 | UnrealSynth虚幻合成数据生成器 | 3D模型自动纹理化工具
2023 power by nsdt©鄂ICP备2023000829号