THREE--demo10（地球坐标）

效果

源码

import * as T from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import { FontLoader } from 'three/examples/jsm/loaders/FontLoader'
import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry'
import optimerBoldJson from 'three/examples/fonts/optimer_regular.typeface.json'
import { useEffect, useRef } from 'react'

const Demo10 = () => {
    let scene, camera, renderer, orbitControls, axes
    const radius = 100

    const areas = [
        {
            name: 'China',
            coordinates: [116.20, 39.55]
        },
        {
            name: 'Australia',
            coordinates: [149.08, -35.15]
        },
        {
            name: 'Brazil',
            coordinates: [-47.55, -15.47]
        },
        {
            name: 'Canada',
            coordinates: [-75.42, 45.27]
        },
        {
            name: 'French',
            coordinates: [2.20, 48.50]
        },
        {
            name: 'Germany',
            coordinates: [13.25, 52.30]
        },
        {
            name: 'India',
            coordinates: [77.13, 28.37]
        },
        {
            name: 'Russia',
            coordinates: [37.35, 55.45]
        },
        {
            name: 'United States',
            coordinates: [-77.02, 39.91]
        },
        {
            name: 'Britain',
            coordinates: [-0.05, 51.36]
        },
    ]

    const fontLoader = new FontLoader()
    const font = fontLoader.parse(optimerBoldJson)

    useEffect(() => {
        init()
    }, [])

    const ThreeContainer = useRef()

    // 场景，作为容器，保存并跟踪所有渲染的物体
    const initScene = () => {
        scene = new T.Scene()
    }

    // 相机
    const initCamera = () => {
        // 透视相机，参数：视场，长宽比，近面，远面
        camera = new T.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000)
        camera.position.z = 200
        camera.lookAt(scene.position)
    }

    // 渲染器，计算指定相机角度下，浏览器中scene的样子
    const initRenderer = () => {
        renderer = new T.WebGLRenderer()
        renderer.setClearColor(0xeeeeee)
        renderer.setSize(window.innerWidth, window.innerHeight)
        // 将render的输出挂载到HTML页面框架中的元素上
        ThreeContainer.current.append(renderer.domElement)
    }

    // 坐标轴
    const initAxes = () => {
        axes = new T.AxesHelper(20)
        scene.add(axes)
    }

    // 轨道控制器
    const initOrbitControls = () => {
        orbitControls = new OrbitControls(camera, renderer.domElement)
    }

    // 地球
    const createEarth = () => {
        const geometry = new T.SphereGeometry(radius, 500, 500)
        const material = new T.MeshBasicMaterial({
            map: new T.TextureLoader().load('/static/1.jpeg'),
            // transparent: true,
            depthWrite: false,
            side: T.DoubleSide,
            // opacity: 0.8,
        })
        const mesh = new T.Mesh(geometry, material)
        mesh.name = 'earth'
        scene.add(mesh)
    }

    // 创建标绘
    const createPoint = () => {
        const len = areas.length
        for (let i = 0; i < len; i++) {
            const lonLat = lonLat2xyz(areas[i].coordinates)
            createMark(lonLat, areas[i].name)
        }
    }

    // 经纬度转xyz坐标
    const lonLat2xyz = lonLat => {
        // Spherical 球坐标，radius 半径，phi 与y (up) 轴的极角（以弧度为单位），theta 绕 y (up) 轴的赤道角(方位角)（以弧度为单位）
        const theta = (90 + lonLat[0]) * (Math.PI / 180)
        const phi = (90 - lonLat[1]) * (Math.PI / 180)
        // setFromSpherical 从球坐标中设置该向量
        return (new T.Vector3()).setFromSpherical(new T.Spherical(100, phi, theta))
    }

    const createMark = (lonLat, name) => {
        // 圆形
        let geometry = new T.CircleGeometry(1, 32)
        let material = new T.MeshBasicMaterial({
            color: 0xff4d4f,
            side: T.DoubleSide,
            // opacity: 0.5
        })
        let mesh = new T.Mesh(geometry, material)
        mesh.position.set(lonLat.x, lonLat.y - 2, lonLat.z)
        mesh.lookAt(new T.Vector3(0, 0, 0))
        scene.add(mesh);

        // 文字
        const textGeometry = new TextGeometry(name, {
            font,
            size: 5,
            height: 1
        })
        textGeometry.computeBoundingBox()
        // 居中
        const centerOffset = -0.5 * (textGeometry.boundingBox.max.x - textGeometry.boundingBox.min.x)
        textGeometry.translate(centerOffset, 0, 0)
        const textMaterial = new T.MeshBasicMaterial({
            color: 0x0ff00
        })
        const text = new T.Mesh(textGeometry, textMaterial)
        text.position.set(lonLat.x, lonLat.y, lonLat.z)
        text.lookAt(new T.Vector3(0, 0, 0))
        scene.add(text);
    }

    // 渲染场景
    const renderScene = () => {
        scene.traverse(e => {

        })
        requestAnimationFrame(renderScene)
        renderer.render(scene, camera)
    }

    const resize = () => {
        window.addEventListener('resize', () => {
            camera.aspect = window.innerWidth / window.innerHeight
            camera.updateProjectionMatrix()
            renderer.setSize(window.innerWidth, window.innerHeight)
        }, false)
    }

    // 初始化
    const init = () => {
        initScene()
        initCamera()
        initRenderer()
        initOrbitControls()
        initAxes()
        createEarth()
        createPoint()
        renderScene()
        resize()
    }

    return (
        <div ref={ThreeContainer} />
    )
}

export default Demo10