<div id="messageTag" style="visibility:hidden;width:500px;height:400px;position: absolute;color: #fff;z-index: 2;font-size: 16px;">
<div style="position:relative;">
<div style="position: absolute;left: 0px;top: 0px;">
<img src="./assets/信息背景.png" alt="" style="width:400px;opacity: 1.0;">
</div>
<div id="granaryName" style="position:absolute;left:25px;top:40px;font-size:16px">平房仓 P_01</div>
<div style="position:absolute;left:290px;top:25px">
<img src="./assets/温度.png" alt="" style="width:50px;">
</div>
<div style="position:absolute;left:330px;top:40px">
<span id="temperature">19</span>℃
</div>
<div id="grain" style="position:absolute;left:170px;top:50px">
<span id="grain">红豆</span>(吨)
</div>
<div style="position:absolute;left:80px;top:85px;font-size:60px;color:#00ffff;vertical-align:middle">
<img id="grainImg" src="./assets/豆子/红豆.png" alt="" style="width:60px;">
</div>
<div style="position:absolute;left:155px;top:80px;font-size:60px;color:#00ffff;vertical-align:middle">
<span id="weight">3600</span>t
</div>
<div style="position:absolute;left:70px;top:170px;padding:8px 25px;border-radius:30px;border:1px solid #00ffff;">
仓高—<span id="granaryHeight">12</span>m</div>
<div style="position:absolute;left:225px;top:170px;padding:8px 25px;">
粮高— <span id="grainHeight">5</span> m
</div>
</div>
</div>
/
/
/
/
/
var granaryArr = [];
loader.load("./scene/model.glb", function(gltf) {
gltf.scene.traverse(function(object) {
if (object.type === 'Mesh') {
// 批量更改所有Mesh的材质
object.material = new THREE.MeshLambertMaterial({
map: object.material.map, //获取原来材质的颜色贴图属性值
color: object.material.color, //读取原来材质的颜色
})
}
})
// 所有粮仓模型的父对象名称:'粮仓'
var group = gltf.scene.getObjectByName('粮仓');
console.log('粮仓', group);
group.traverse(function(obj) {
if (obj.type === 'Mesh') {
granaryArr.push(obj);
}
})
model.add(gltf.scene);
})
scene.add(model);
import {
CSS2DRenderer,
CSS2DObject
} from '../../../three.js-r123/examples/jsm/renderers/CSS2DRenderer.js';
// 创建一个HTML标签对象
function tag(domID) {
var dom = document.getElementById(domID);
var label = new CSS2DObject(dom);
dom.style.pointerEvents = 'none';
return label;
}
// 创建一个CSS2渲染器CSS2DRenderer
var labelRenderer = new CSS2DRenderer();
labelRenderer.setSize(window.innerWidth, window.innerHeight);
labelRenderer.domElement.style.position = 'absolute';
labelRenderer.domElement.style.top = '200px';
labelRenderer.domElement.style.left = '250px';
labelRenderer.domElement.style.pointerEvents = 'none';
document.body.appendChild(labelRenderer.domElement);
// 鼠标单击射线拾取meshArr中的某个粮仓Mesh
var chooseMesh = null
var mainCanvas = document.querySelector('body>canvas')
function choose(event, messageTag) {
if (chooseMesh) {
chooseMesh.material.color.set(0xffffff); // 把上次选中的mesh设置为原来的颜色
}
var Sx = event.clientX;
var Sy = event.clientY;
var x = ((event.clientX - mainCanvas.getBoundingClientRect().left) / mainCanvas.offsetWidth) * 2 - 1;
var y = -((event.clientY - mainCanvas.getBoundingClientRect().top) / mainCanvas.offsetHeight) * 2 + 1;
var raycaster = new THREE.Raycaster();
raycaster.setFromCamera(new THREE.Vector2(x, y), camera);
var intersects = raycaster.intersectObjects(granaryArr);
// console.log("射线器返回的对象", intersects);
// console.log("射线投射器返回的对象 点point", intersects[0].point);
// console.log("射线投射器的对象 几何体",intersects[0].object.geometry.vertices)
// intersects.length大于0说明,说明选中了模型
if (intersects.length > 0) {
chooseMesh = intersects[0].object;
chooseMesh.material.color.set(0x00ffff); //选中改变颜色,这样材质颜色贴图.map和color颜色会相乘
chooseMesh.point = intersects[0].point;
} else {
chooseMesh = null;
}
}
addEventListener('click', choose); // 监听窗口鼠标单击事件,鼠标单击选中某个国家Mesh
// addEventListener('mousemove', choose);//鼠标滑动事件
var messageTag = tag("messageTag"); //创建粮仓标注的标签
scene.add(messageTag); //id"messageTag"对应的HTML元素作为three.js标签
import messageData from './messageData.js' //粮仓数据模拟
// 内容需要改变的HTML元素对应的id
var idArr = ["granaryName", "temperature",
"grain", "grainImg", "weight", "granaryHeight", "grainHeight"
];
// click mousemove
addEventListener('click', function() {
if (chooseMesh) {
messageTag.element.style.visibility = 'hidden'; //隐藏标签
}
choose(event, messageTag); //执行射线拾取的代码
// 选中不同粮仓,HTML标签信息跟着改变
if (chooseMesh) {
//批量更新粮仓chooseMesh的标签信息
idArr.forEach(function(id) {
var dom = document.getElementById(id);
dom.innerHTML = messageData[chooseMesh.name][id];
})
messageTag.element.style.visibility = 'visible';
// messageTag.position.copy(chooseMesh.getWorldPosition()); //通过粮仓世界坐标设置标签位置
messageTag.position.copy(chooseMesh.point); //射线在粮仓表面拾取坐标
}
});
function render() {
labelRenderer.render(scene, camera); //渲染HTML标签对象
renderer.render(scene, camera); //执行渲染操作
requestAnimationFrame(render); //请求再次执行渲染函数render,渲染下一帧
}
render();
/
/
/
/
/
var messageDaa = {
L_01:{
granaryName:"L_01",
temperature:"35.3",
grain:"aaa",
grainImg:"./imh.png",
weight:6700,
granaryHeight:36,
grainHeight:"25.0"
},
L_02:{
granaryName:"L_02",
temperature:"35.3",
grain:"aaa",
grainImg:"./imh.png",
weight:6700,
granaryHeight:36,
grainHeight:"25.0"
},
L_03:{
granaryName:"L_03",
temperature:"35.3",
grain:"aaa",
grainImg:"./imh.png",
weight:6700,
granaryHeight:36,
grainHeight:"25.0"
}
}