threejs CSS3DRenderer标注模型 学习笔记

threejs yekong 57℃

CSS3D不面向摄像机,场景缩放时,缩小放大跟随着,不被模型遮挡,通过DOM事件点击

CSS3DRenderer用于通过CSS3的transform属性, 将层级的3D变换应用到DOM元素上。 如果你希望不借助基于canvas的渲染来在你的网站上应用3D变换,那么这一渲染器十分有趣。 同时,它也可以将DOM元素与WebGL的内容相结合。

然而,这一渲染器也有一些十分重要的限制:

它不可能使用three.js中的材质系统。
同时也不可能使用几何体。
因此,CSS3DRenderer仅仅关注普通的DOM元素,这些元素被包含到了特殊的对象中(CSS3DObject或者CSS3DSprite),然后被加入到场景图中。

threejs CSS3DRenderer标注模型

threejs版本

0.123.0

效果展示

threejs CSS3DRenderer标注模型

创建3d标签

通过label.scale.set(0.2, 0.2, 0.2);控制标签的大小
通过label.rotateY(Math.PI / 2); 控制CSS3对象角度

import {CSS3DRenderer, CSS3DObject} from 'three/examples/jsm/renderers/CSS3DRenderer.js';

// 创建一个HTML标签
function tag(name) {
    // 创建div元素(作为标签)
    var div = document.createElement('div');
    div.innerHTML = name;
    div.classList.add('tag');
    //div元素包装为CSS2模型对象CSS2DObject
    var label = new CSS3DObject(div);
    div.style.pointerEvents = 'none';//避免HTML标签遮挡三维场景的鼠标事件
    label.scale.set(0.2, 0.2, 0.2);//根据相机渲染范围控制HTML 3D标签尺寸
    label.rotateY(Math.PI / 2);//控制HTML标签CSS3对象姿态角度
    // 设置HTML元素标签在three.js世界坐标中位置
    // label.position.set(x, y, z);
    return label;//返回CSS2模型标签
}

// 创建一个CSS2渲染器CSS2DRenderer
var labelRenderer = new CSS3DRenderer();
labelRenderer.setSize(window.innerWidth, window.innerHeight);
labelRenderer.domElement.style.position = 'absolute';
// 相对标签原位置位置偏移大小
labelRenderer.domElement.style.top = '0px';
labelRenderer.domElement.style.left = '0px';
// //设置.pointerEvents=none,以免模型标签HTML元素遮挡鼠标选择场景模型
labelRenderer.domElement.style.pointerEvents = 'none';
document.body.appendChild(labelRenderer.domElement);

export {tag, labelRenderer}

查找模型

在模型中查找遍历模型使用getWorldPosition获取世界坐标将坐标赋予标签显示

var group = gltf.scene.getObjectByName('粮仓');
// console.log('粮仓', group);
group.traverse(function (obj) {
    if (obj.type === 'Mesh') {
        var label = tag(obj.name);//把粮仓名称obj.name作为标签
        var pos = new THREE.Vector3();
        obj.getWorldPosition(pos);//获取obj世界坐标、
        // 粮仓世界坐标对应粮仓底部圆心位置,如果标签像标注在粮仓底部,需要加上粮仓整体高度
        label.position.copy(pos);//标签标注在obj世界坐标
        model.add(label);//标签插入model组对象中
    }
})

渲染标签

import { labelRenderer } from './scene/tag.js';//HTML标签相关代码
// 渲染循环
function render() {
  labelRenderer.render(scene, camera); //渲染HTML标签对象
  renderer.render(scene, camera); //执行渲染操作
  requestAnimationFrame(render); //请求再次执行渲染函数render,渲染下一帧
  // console.log(camera.position);//通过相机控件OrbitControls旋转相机,选择一个合适场景渲染角度
}
render();

教程地址

WebGL/Three.js前端3D可视化

喜欢 (0)