实现在模型空间中添加三维立体字体,运行时出现闪现、模型消失的问题如何解决?

JavaScriptHtmlconst字体三维
27次浏览
0

使用自己的模型,实现在模型空间中添加三维立体字体的效果,运行时出现闪现、模型消失的现象,不知如何解决。

效果如下图:


代码如下:

Xhz.init(function () {
Xhz.exampleKey = "add_3d_font";
const options = {
modelKey: "586464963",
devcode: "",
};
// 模型主视角
const mainView = {
position: {
x: -161.4060789070836,
y: 1382.2486366748449,
z: 3149.083276437334,
}, //相机位置
target: {
x: -1517.527099609375,
y: -1234.53466796875,
z: 2013.2177734375,
}, //相机焦点
up: { x: 0, y: 0, z: 1 }, //相机正方向
};

Xhz.attr.EnableViewController = false;

const btnReset = document.querySelector("#xhz-btn-reset");
let disabled = true;
const app = new Xhz.App(options);
const { model, view, camera } = app;

const scene = view.getScene();
// 设置场景自动更新
scene.autoUpdate = true;

model.on("load", function (event) {
camera.flyTo(mainView);
disabled = false;
addText("Festive lantern", "586464963_16FK9qq9zFchUtv_D22Mai");
});

const addText = (content, componentId) => {
// 获取当前构件的包围盒中心
const centerObj = new THREE.Vector3();
const viewer = view.getViewer3d();
const position = viewer
.getViewerImpl()
.modelManager.getComponent(componentId)[0]
.boundingBox.getCenter(centerObj);

addThreeDimensionalText(
{
content,
color: 0xff0000,
position: [position.x + 100, position.y + 30, position.z + 50],
scale: 0.05,
textpath: "https://www.bos.xyz/vizbim/fonts/helvetiker_regular.typeface.json", // 三维字体路径
},
(text) => {
scene.add(text); // 创建字体后,将三维字体添加进三维场景
}
);
};

/**
* 该方法用来通过给出内容加载出来3d字体,暂不支持中文
* @params: componentid {string}
* @params: callback {function} 回调函数
* @param [options] {object} 参数
* @param [options.color]{16进制颜色} 字体的颜色 例如0xff0000
* @param [options.content]{String} 三维字体的内容
* @param [options.textpath]{String} 三维字体的路径
* @param [options.position]{Array} 三维字体的相对于构件位置的偏移X
* @param [options.depthTest]{boolen} 是否关闭字体的深度测试
* @param [options.textLength]{number} 三维字体的长度
* @param [options.textWidth]{boolen} 三维字体的宽度
* @param [options.componentId]{String} 三维构件的id,如果传入,默认位置为构件位置
* @params:
* @return:
*/
const addThreeDimensionalText = function (options, callback) {
var xMid, text, message;
var loader = new THREE.FontLoader();
var defaultSetting = {
color: 0xff0000,
content: "https://xhz.bos.xyz/",
textpath:
"https://www.bos.xyz/vizbim/fonts/helvetiker_regular.typeface.json",
position: [0, 0, 0],
depthTest: false,
textLength: 1000,
textWidth: 1000,
scale: 1,
defaultPosition: [0, 0, 0],
key: "",
};
var option = {};
option = Object.assign(defaultSetting, options);
loader.load(option.textpath, function (font) {
var textShape = new THREE.BufferGeometry();

var color = option.color;

var matDark = new THREE.LineBasicMaterial({
color: color,
side: THREE.DoubleSide,
});

var matLite = new THREE.MeshBasicMaterial({
color: color,
transparent: true,
opacity: 0.4,
side: THREE.DoubleSide,
});

message = option.content;

var shapes = font.generateShapes(
message,
option.textLength * option.scale,
option.textWidth * option.scale
);

var geometry = new THREE.ShapeGeometry(shapes);

geometry.computeBoundingBox();

xMid =
-0.5 *
(geometry.boundingBox.max.x - geometry.boundingBox.min.x);

geometry.translate(xMid, 0, 0);

// make shape ( N.B. edge view not visible )

textShape.fromGeometry(geometry);

text = new THREE.Mesh(textShape, matLite);
text.key = option.key;

text.position.x = option.position[0];
text.position.y = option.position[1];
text.position.z = option.position[2];
// text.rotation.x+=Math.PI/2;
// text.rotation.y+=Math.PI/2;
text.material.depthTest = option.depthTest;
const viewer = view.getViewer3d();

viewer
.getViewerImpl()
.cameraControl.addEventListener(
"ON_CAMERA_CHANGE",
function () {
updateTextView();
}
);
viewer
.getViewerImpl()
.modelManager.addEventListener("ON_LOAD_COMPLETE", function () {
updateTextView();
});
// 更新三维字体视角,始终面向相机
function updateTextView() {
const cameraObj = viewer.getViewerImpl().camera;
text.rotation.x = cameraObj.rotation.x;
text.rotation.y = cameraObj.rotation.y
text.rotation.z = cameraObj.rotation.z;
view.render();
}
callback(text);
});
};

btnReset.onclick = function() {
if (disabled) return;

camera.flyTo(mainView);
}
})
关注|0
回答问题
邀请回答
回答
邀请回答
分享
举报
0条回答

撰写答案