threejs CSS3DRenderer添加标签并设置朝向摄像机

一.由于CSS3DRenderer 是附加组件,必须显式导入
复制代码
import { CSS3DRenderer, CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer.js';
二.CSS3DRenderer特点

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

但是由于项目要求label时刻面向摄像机,因此需要在每次刷新更新lookat朝向,可参考以下代码

javascript 复制代码
function updateLabel(nodeName){
	// nodeName添加标签时记得赋予name属性
    const node = scene.getObjectByName(nodeName);// 返回一个匹配该名字的子对象
    const cameraPosition = camera.position.clone();
    node?.lookAt(cameraPosition);
}
// 循环渲染
function animate() {
    requestAnimationFrame(animate);
    renderer_3d.render(scene, camera);
    updateLabel(nodeName) // label朝向camera
}
animate()
三.完整代码

从项目中抽出来的,可能有缺漏,欢迎大家补充

javascript 复制代码
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import { CSS3DRenderer, CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer.js';

// 创建场景
const scene = new THREE.Scene();

// 创建CSS3DRenderer渲染器, 相机, 控制器
const renderer_3d = new CSS3DRenderer();
renderer_3d.setSize(window.innerWidth, window.innerHeight);
renderer_3d.domElement.style.position = 'absolute';
renderer_3d.domElement.style.top = '0px';
//DOM添加renderer : 我是使用umi写的containerRef.current是我的DOM容器(视个人项目情况而定)
containerRef.current.appendChild(renderer_3d.domElement);  


// 创建相机
const camera = new new THREE.PerspectiveCamera(100, window.innerWidth / window.innerHeight, 0.1,1000);
camera.lookAt(0, 0, 0)
camera.updateProjectionMatrix(); 


// 创建控制器
const controls_3d = new OrbitControls(camera, renderer_3d.domElement);
controls3.enableDamping = true; // 是否有惯性
controls3.enableZoom = true; // 是否可以缩放


//添加标签文字
const tag = create3DTag({ name: '教学楼' });

//创建CSS3DObject标签元素
function create3DTag(obj) {
    const element = document.createElement('div');
    element.className = 'tag';
    element.innerText = obj.name;
    const object = new CSS3DObject(element);
    element.style.pointerEvents = 'none';//避免HTML标签遮挡三维场景的鼠标事件
    object.name='tag_3d'  // 注:name不可缺
    object.visible = true;
    object.scale.set(2,2,2);//缩放比例
    object.position.set(10, 20, 0);//指定摆放位置
    return object;
}


// 更新CSS3D朝向
function updateLabel(nodeName){
    const node = scene.getObjectByName(nodeName);// 返回一个匹配该名字的子对象
    const cameraPosition = camera.position.clone();
    node?.lookAt(cameraPosition);
}

// 循环渲染
function animate() {
    requestAnimationFrame(animate);
    renderer_3d.render(scene, camera);
    updateLabel(nodeName) // label朝向camera
}
animate()
相关推荐
专注API从业者2 小时前
Python + 淘宝 API 开发:自动化采集商品数据的完整流程
大数据·运维·前端·数据挖掘·自动化
烛阴2 小时前
TypeScript高手密技:解密类型断言、非空断言与 `const` 断言
前端·javascript·typescript
样子20183 小时前
Uniapp 之renderjs解决swiper+多个video卡顿问题
前端·javascript·css·uni-app·html
Nicholas683 小时前
flutterAppBar之SystemUiOverlayStyle源码解析(一)
前端
黑客飓风4 小时前
JavaScript 性能优化实战大纲
前端·javascript·性能优化
emojiwoo5 小时前
【前端基础知识系列六】React 项目基本框架及常见文件夹作用总结(图文版)
前端·react.js·前端框架
张人玉5 小时前
XML 序列化与操作详解笔记
xml·前端·笔记
杨荧6 小时前
基于Python的宠物服务管理系统 Python+Django+Vue.js
大数据·前端·vue.js·爬虫·python·信息可视化
YeeWang6 小时前
🎉 Eficy 让你的 Cherry Studio 直接生成可预览的 React 页面
前端·javascript
gnip6 小时前
Jenkins部署前端项目实战方案
前端·javascript·架构