three.js添加html内容、⽂本
需求：
1、在场景内添加html元素并动态更新
2、html内容需跟随场景变化
⽅案：
新加⽅案：
1、在场景内创建⼀个模型点（多个模型点最好分组，⽅便管理）
2、获取到模型点
3、创建html元素
4、将html元素绑定到模型位置（将场景的3D坐标转为2D）
5、实时计算元素位置（显⽰隐藏）
animate() {
// 动画函数
TWEEN.update();
this.update(); // 更新点
},
LoadBox() {
// 创建点。
for (let index = 0; index < wfloat.length; index++) {
const element = wfloat[index].XYZ;
console.log(element);
let floorGeometry1 = new THREE.PlaneGeometry(1, 1, 1);
var sphereMaterial = new THREE.MeshFaceMaterial({
color: 0xff00ff,
// side: THREE.BackSide,
// visible: false,
});
var floorspheres = new THREE.Mesh(floorGeometry1, sphereMaterial);
floorspheres.position.set(
element.x,
element.y + element.s / 2,
element.z
);
floorspheres.name = wfloat[index].id; //default
}
this.buffer_scene.ups);
// der()
},
update() {
// 更新css2D内容位置
let halfWidth = window.innerWidth/2 ;
let halfHeight = window.innerHeight/2;
var btnlist = this.ObjectByName("btnlist");
if (!btnlist) return;
var vector = e.position.clone().project(this.buffer_camera);
var htmls = ElementsByClassName(e.name)[0];
if (htmls) {
var left = vector.x * halfWidth + halfWidth; // + halfWidth
var top = -vector.y * halfHeight + halfHeight; //+ halfHeight
// console.log(vector.x,vector.y)
if(vector.z >1){
htmls.style = 'display: none;';
}else{
htmls.style = `width:auto;display: flex;position: absolute;left:${
left
}px;top:${top}px`;
}
}
});
},
有⼏种⽅案
⼀、直接将⽂本P成为图⽚然后在场景内加载 2D模型将该图⽚当作模型贴图处理
⼆、将html内容通过canvas 然后再以模型的⽅式加载进场景（不做详细解释）
1、创建
getTextCanvas(text){
// 创建贴图⽂字
var width=512, height=256;
var canvas = ateElement('canvas');
canvas.width = width;
canvas.height = height;
var ctx = Context('2d');
ctx.fillStyle = '#008080';
ctx.fillRect(0, 0, width, height);
ctx.font = 50+'px " bold';
ctx.fillStyle = '#FFFFFF';
ctx.fillText(text, width/2,height/2);
return canvas;
},
2、加载
var geometry = new THREE.PlaneGeometry(e.w, e.h, 30 );
var material = new THREE.MeshBasicMaterial(
{
// map:new THREE.t)),  // canvas 画图⽅式
map:new THREE.TextureLoader().load(`${this.GLOBAL.service}img/043img/btn/${e.content}.png`),            } );
var introduce = new THREE.Mesh( geometry, material );
introduce.name= "model introduce"
// plane.location=i.location
introduce.position.set(x,y,z);
introduce.lookAt(0,y,0)
skyBox.add(introduce);
三、⽤CSS2DObject进⾏处理
1、增加渲染器
2、使⽤ three.js 的 CSS2DObject 模块进⾏html内容转换并绑定模型
⼀般需要这个功能的肯定都不是新⼿了，所以内容就不做介绍了，这⾥只需要关注⼏点1、增加渲染器（原有的渲染器不动，新增⼀个CSS2DRenderer渲染器）：
addhtml() {
// 场景渲染器
// derer.gammaOutput = true;
// derer.setClearColor(new THREE.Color(0xcce0ff));
document
.getElementById("container")
.derer.domElement);
// window.addEventListener("resize", () => WindowResize());
this.labelRenderer = new CSS2DRenderer();  // 新增的渲染器
this.labelRenderer.setSize(window.innerWidth*0.95, window.innerHeight*0.95);
// this.labelRenderer.domElement.style.position = 'absolute';
// this.labelRenderer.p = 0;
this.labelRenderer.domElement.  // 处理新的渲染器
},
animate() {
// 渲染
der(this.scene, this.camera);// 加载新渲染器
TWEEN.update();
},
注意：官⽹⽰例只适应于全屏的情况不全屏的情况请⾃⾏调整
2、增加内容容器：
<template>
<div class="project">
css和html和js怎么结合<div id="text" >
{{modelnumber}}
</div>
<div id="container">
</div>
</template>
3、绑定模型（创建模型什么的这⾥就不解释了）：
// 2D ⽂本
// let laberDiv = ateElement('div');//创建div容器
let laberDiv = ElementById('text');//获取div容器
// laberDiv.innerHTML=`
// <div class="leftTip" >
//    ${delnumber}
// </div>
// `;
laberDiv.style.marginTop = '-1em';
let pointLabel = new CSS2DObject(laberDiv);
pointLabel.position.set(0,100,0);  // 相对模型的位置
console.log(pointLabel)
skyBox.add(pointLabel); //绑定到模型
也看到了，你也可以选择直接新建⼀个容器、但是我尝试的时候内容⽆法动态变化、如果你不需要动态变化也可以直接新建
资料的时候看到⼀个问题(没有尝试)、创建的这个容器切换场景不会消失、需要注意处理、这个创建出来的不在模型列表内、⽽是在dom ⾥⾯、所以遇到这个情况、请尝试直接处理dom
效果：
注：
前⾯两种⽅式是直接在场景内加载⼀个模型、第三种⽅式是将元素绑定在模型上

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。