在模型中添加球形标签,更换成自己的模型后,无法显示球形标签是什么原因呢?

JavaScriptHtmlconst标签球形
14次浏览
0

在模型中添加球形标签,更换成自己的模型后,无法显示球形标签。

代码如下: 代码中红色部分标出的部分不太清楚如何更换成自己的。

Xhz.init(function () {
Xhz.exampleKey = "add_3d_spherical_label";
const options = {
modelKey: " 582845506  ",
devcode: "",
};

Xhz.attr.EnableViewController = false;

const app = new Xhz.App(options);
const { model, view, component } = app;
const btnReset = document.querySelector("#xhz-btn-reset");
const scene = view.getScene();
// 设置场景自动更新
scene.autoUpdate = true;

model.on("load", function (event) {
addThreeBall();
});

// 添加三维球标签
const addThreeBall = (componentId) => {
// 获取当前构件的包围盒中心
const positionCenter = component.getBox(["47043446_3uXpDSeP5A_gRI8FyJJmHi"]);
const center = [(positionCenter.max.x - positionCenter.min.x) / 2 - 1000, (positionCenter.max.y - positionCenter.min.y) / 2 - 1200, (positionCenter.max.z - positionCenter.min.z) / 2 + 750];

/**
* 该方法用来添加三维圆形标签
* @param [options] {object} 参数
* @param [options.color]{16进制颜色} 球形标签的颜色 例如0xff0000
* @param [options.depthTest]{boolen} 是否关闭球形标签的深度测试
* @param [options.position]{boolen} 球形标签的位置
* @params:[options.scale]{number} 球形标签的缩放比例
* @return: object 三维球标签对象
*/
const ballMarker = createThreeBallMark({
position: center,
scale: 0.1,
});
// 将创建好的三维球标签添加进场景
scene.add(ballMarker);
view.render();
};

const createThreeBallMark = function (options) {
var defaultSetting = {
color: 0x6495ed,
offsetX: 0,
offsetY: 0,
offsetZ: 0,
depthTest: false,
position: [0, 0, 0],
scale: 1,
key: "",
};
var option = {};
option = Object.assign(defaultSetting, options);
var ballMarkItem = new THREE.Object3D();
ballMarkItem.key = option.key;

var geometry1 = new THREE.SphereGeometry(700, 32, 32);
var material1 = new THREE.MeshBasicMaterial({
color: option.color,
side: THREE.DoubleSide,
});
var sphere = new THREE.Mesh(geometry1, material1);
sphere.position.set(0, 0, 750);
sphere.material.depthTest = option.depthTest;

ballMarkItem.add(sphere);
var geometry2 = new THREE.CylinderGeometry(700, -1, 1300, 32);
var material2 = new THREE.MeshBasicMaterial({
color: option.color,
side: THREE.DoubleSide,
});
var cylinder = new THREE.Mesh(geometry2, material2);
cylinder.position.set(0, 0, 0);
cylinder.rotation.x += Math.PI / 2;
cylinder.material.depthTest = option.depthTest;
ballMarkItem.add(cylinder);
const newPosition = option.position;
ballMarkItem.position.set(
newPosition[0],
newPosition[1],
newPosition[2]
);
ballMarkItem.scale.set(option.scale, option.scale, option.scale);

return ballMarkItem;
};

btnReset.onclick = function() {
view.resetScene();
}
});

示例效果如下:  

效果无法显示球形标签,不知道什么原因?

关注|0
回答问题
邀请回答
回答
邀请回答
分享
举报
0条回答

撰写答案