this.signChart.on('finished',function () {
var spriteMap = new
THREE.TextureLoader().load(signFihishchart.getDataURL() );
var spriteMaterial = new THREE.SpriteMaterial({
map: spriteMap,
side: THREE.DoubleSide
});
var sprite = new THREE.Sprite( spriteMaterial );
sprite.scale.set(250, 250, 1)
sprite.position.set(option.Position.X, y, option.Position.Z);
store3D.addObject(sprite);
})
eg:
function StoreSign(option,store3D) {
let optionCube = {
length: option.Length, // 仓库的长
width: option.Width, // 仓库的宽
height: option.Height, // 仓库的高
position: { // 仓库的位置
x: option.Position.X,
y: option.Position.Y,
z: option.Position.Z
},
style: { // 仓库的样式
transparent:1,
opacity:0.2,
color: 0x17CEBC,
depthTest:0
},
};
let div=document.createElement("div"); // 创建标签
div.style.width="400px"; // 设置创建元素的宽
div.style.height="400px"; // 设置创建元素的高
this.signChart=echarts.init(div); // 初始化eCharts图表
let optionChart = {
title: { // 中间的文字
text: option.Name, // 仓库的名称
textStyle: { // 文字的样式
color: '#fff', // 颜色白色
fontSize: 30, // 文字大小 30
fontWeight: 'bold' // 字体加粗
},
left: 'center', // 设置title位置 左右居中
bottom: '42%', // 距离下面有42%的距离
},
tooltip: {
show: false, // 是否显示工具栏
},
series: [{ // 设置具体的轴
type: 'pie', // 饼图
radius: [0, "35%"], // 饼图的半径，内半径和外半径
data: [{ // 数据
value: 0, // 数据 这里没有数据 只是使用了title
itemStyle: {
normal: {
color: "rgba(20,198,249,1)" // 设置底图
}
}
}, ]
},
]
};
this.signChart.setOption(optionChart); // 生成图表
/**
* 下面就是要将图表的图片作为精灵系统的材质
*/
let signFihishchart=this.signChart;
window.onresize = function(){
signFihishchart.resize();
}
this.signChart.on('finished',function () { // 当图表加载完成之后,
// 获取这个图表的图片作为纹理贴图
var spriteMap = new THREE.TextureLoader().load(signFihishchart.getDataURL() );
// 作为精灵系统的材质
var spriteMaterial = new THREE.SpriteMaterial({
transparent: true,
map: spriteMap,
side: THREE.DoubleSide
});
var sprite = new THREE.Sprite( spriteMaterial );
sprite.type='StoreSign';
sprite.scale.set(250, 250, 1) // 设置精灵系统的大小
let y= option.Height+50;
sprite.position.set(option.Position.X, y, option.Position.Z); // 设置精灵系统的位置
store3D.objectLockPointer.push(sprite);
store3D.addObject(sprite); // 放入场景中
})
}
