Three.js项目 智慧城市(四)
概述
如有不明白的可以加QQ:2354528292;wx: aichitudousien
更多教学视频请访问:https://space.bilibili.com/236087412
我们接着上一篇文章接着向下做,此时我们已经成功创建了场景,加载模型和天空盒,车流,现在我们来创建一些文本,效果
智慧城市项目录制视频
科技风版本:
智慧城市二期视频
创建文本
想要创建文本,我这边使用得方案是canvas贴图,当然使用css3DRender这些都可以
- 首先我们先创建html
<div class="sprite-canvas">
<span class="sprite-layer">${name}</span>
</div>
<style lang="less">
.sprite-canvas {
position: absolute;
width: 1024px;
height: 1024px;
font-size: 128px;
top: 0;
box-sizing: border-box;
background-color: transparent;
color: #fff;
text-align: center;
.sprite-layer {
margin-top: 60%;
background-color: blue;
padding: 1% 2%;
}
}
</style>
- 使用htmlCanvas来创建成canvas
export function createSprite(group, name, position) {
const html = `
<div class="sprite-canvas">
<span class="sprite-layer">${name}</span>
</div>`;
document.body.insertAdjacentHTML("beforeend", html);
const element = document.body.lastChild;
element.style.zIndex = -1;
html2canvas(element, {
backgroundColor: "transparent"
}).then(canvas => {
let texture = new THREE.Texture(canvas);
texture.needsUpdate = true;
let spriteMaterial = new THREE.SpriteMaterial({
map: texture
});
let sprite = new THREE.Sprite(spriteMaterial);
sprite.name = name;
sprite.position.set(...position);
sprite.scale.set(60, 60, 60);
group.add(sprite);
document.body.removeChild(element);
});
}
- 导入数据创建精灵贴图
address.forEach((item) => {
createSprite(cavasHtmlGroup, item.name, item.position);
});
此时看到得效果是
4. 最后添加上小精灵飞行调用函数
// 点击精灵飞行
app.initRaycaster((obj) => {
if (obj.isSprite) {
address.forEach((item) => {
if (item.name === obj.name) {
app.flyTo({
position: item.cameraPosition,
duration: 1500,
});
}
});
}
});
完成最后效果!
在结尾我们在添加一些报表和标题来丰富我们得场景,这个就不一一写了,本此项目就结束了!