效果
源码
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