在react中用three.js 渲染模型 在上面创建标签

javascript 复制代码
import { CSS2DRenderer, CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer.js'

// 基本设置
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.z = 5;

const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

// CSS2DRenderer 设置
const labelRenderer = new THREE.CSS2DRenderer();
labelRenderer.setSize( window.innerWidth, window.innerHeight );
labelRenderer.domElement.style.position = 'absolute';
labelRenderer.domElement.style.pointerEvents = 'none';
document.body.appendChild( labelRenderer.domElement );

// 创建3D模型
const geometry = new THREE.BoxGeometry( 1, 1, 1 );
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );

// 创建CSS2DObject
const div = document.createElement('div');
div.className = 'label-container '
div.style.width = '64px';
div.style.height = '32px';
div.style.color = '#fff';
div.style.backgroundColor = '#000';
div.style.fontSize = '16px';
div.style.textAlign = 'center';
div.style.lineHeight = '32px';
div.textContent = 'Label';

const labelObject = new THREE.CSS2DObject(div);
labelObject.position.set(0, 0, 5); // 设置CSS2DObject的位置
scene.add(labelObject);

// 渲染函数
function animate() {
    requestAnimationFrame( animate );

    // 更新3D模型的位置或旋转
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;

    // 更新CSS2DObject的位置,使其跟随3D模型
    labelObject.position.copy(cube.position);
    labelObject.updateMatrix();

    renderer.render( scene, camera );
    labelRenderer.render( scene, camera );
}

animate();

可以给标签添加class 然后通过css来设置样式。

这里唯一的不同是我没有做到标签根据模型旋转然后标签跟着转动

在旋转的时候我给标签删除了。在回归到原位的时候才让标签显示出来。

如果要将标签跟随模型角度转动应该要将标签添加到模型上。

相关推荐
前端极客探险家2 分钟前
告别卡顿与慢响应!现代 Web 应用性能优化:从前端渲染到后端算法的全面提速指南
前端·算法·性能优化
袁煦丞1 小时前
【局域网秒传神器】LocalSend:cpolar内网穿透实验室第418个成功挑战
前端·程序员·远程工作
江城开朗的豌豆1 小时前
Vuex数据突然消失?六招教你轻松找回来!
前端·javascript·vue.js
好奇心笔记1 小时前
ai写代码随机拉大的,所以我准备给AI出一个设计规范
前端·javascript
江城开朗的豌豆1 小时前
Vue状态管理进阶:数据到底是怎么"跑"的?
前端·javascript·vue.js
用户21411832636021 小时前
dify案例分享-Dify v1.6.0 重磅升级:双向 MCP 协议引爆 AI 生态互联革命
前端
程序员海军1 小时前
AI领域又新增协议: AG-UI
前端·openai·agent
我想说一句1 小时前
React待办事项开发记:Hook魔法与组件间的悄悄话
前端·javascript·前端框架
真夜1 小时前
CommonJS与ESM
前端·javascript
LaoZhangAI1 小时前
GPT-image-1 API如何传多图:开发者完全指南
前端·后端