Threejs 实现3D 地图(04)3d 地图的柱状图和文字显示

3d 地图的数据展示

代码仓库:

King/threejs-3d-map

核心代码:

复制代码
function createText(feature, level, font) {
    if (feature.properties.name) {
        const [x_XYZ, y_XYZ] = handleProject(feature.properties.center)
        // 缺点:首次渲染很慢 无法使用中文已经中文标点符号 需要特殊处理(自行百度)
        // 优点:清晰
        const geometry = new TextGeometry(`GDP:32632`, {
            font: font,
            size: !level ? 10 : 6, // 字体大小
            depth: 0,
            curveSegments: 4,
        });
        const materials = new THREE.MeshBasicMaterial({
            color: 0xffffffff,
            transparent: true,
            opacity: 0.5,
        })
        const textMesh = new THREE.Mesh(geometry, materials)
        textMesh.position.set(x_XYZ - 20, -y_XYZ, 150);
        return textMesh

        // 缺点:使用的是贴图 会导致比较模糊
        // 优点:首次渲染很快 能使用中文已经中文标点符号
        // const canvas = document.createElement('canvas');
        // const context = canvas.getContext('2d');
        // // 设置 Canvas 的尺寸
        // canvas.width = 512;
        // canvas.height = 256;
        //
        // // 设置字体样式
        // context.font = '50px Arial';
        // context.fillStyle = 'white';  // 设置文字颜色
        // context.textAlign = 'center'; // 文字居中
        // context.textBaseline = 'middle'; // 文字垂直居中
        // // 绘制文字到 Canvas 中心
        // context.fillText('GDP 总额:20000亿', canvas.width / 2, canvas.height / 2);
        //
        // const texture = new THREE.CanvasTexture(canvas);
        // const material = new THREE.MeshBasicMaterial({ map: texture });
        // const geometry = new THREE.PlaneGeometry(50, 10);
        // const textMesh = new THREE.Mesh(geometry, material);
        // textMesh.position.set(x_XYZ, -y_XYZ, 150);
        // return textMesh
    }
}

function createCylinder(feature, level) {
    const tb = level === 0 ? 10 : 6
    if (feature.properties.center) {
        const [x_XYZ, y_XYZ] = handleProject(feature.properties.center)
        // 随机生成20 - 100 之间的正整数
        const random = Math.floor(Math.random() * 80) + 20
        // 创建一个柱体
        let geometry_g = new THREE.CylinderGeometry(tb, tb, random, 32);
        let material_g = new THREE.MeshBasicMaterial({
            color: '#0DEAF8',
            transparent: true,
            opacity: 0.8
        });
        let cylinder = new THREE.Mesh(geometry_g, material_g);
        cylinder.position.set(x_XYZ, -y_XYZ, 16 + (random / 2));
        cylinder.rotateX(Math.PI / 2);
        return cylinder
    }

}

下一篇:

Threejs 实现3D 地图(05)3d 地图进场动画和地图边缘动画-CSDN博客

相关推荐
爱电摇的小码农2 小时前
【深度探究系列(5)】:前端开发打怪升级指南:从踩坑到封神的解决方案手册
前端·javascript·css·vue.js·node.js·html5·xss
ykjhr_3d2 小时前
3D 演示动画在汽车培训与教育领域中的应用
3d·汽车
Tttian6223 小时前
npm init vue@latestnpm error code ETIMEDOUT
前端·vue.js·npm
元气小嘉3 小时前
前端技术小结
开发语言·前端·javascript·vue.js·人工智能
cccyi74 小时前
Vue3基础知识
javascript·vue.js
江城开朗的豌豆4 小时前
Vue计算属性:为什么我的代码突然变优雅了?
前端·javascript·vue.js
拾光拾趣录5 小时前
虚拟DOM超详细流程
前端·vue.js·dom
拾光拾趣录5 小时前
Vue 项目监听页面 Hash 变化
前端·vue.js·vue-router
梨子同志5 小时前
Vue Options API vs Composition API
前端·vue.js
三月的一天6 小时前
React Three Fiber 实现 3D 模型点击高亮交互的核心技巧
3d·webgl·threejs·reactthreefiber