THREE--demo9（形状）

效果

源码

import * as T from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import { useEffect, useRef } from 'react'
import worldJson from '@/assets/world.json'

const Demo9 = () => {
    let scene, camera, renderer, orbitControls, axes

    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 renderMap = () => {
        worldJson.features.map((hitem, hindex) => {
            const len = hitem.geometry.coordinates.length
            const isMore = len > 1 ? true : false
            // 中心定位
            const x = 108
            const y = 34
            hitem.geometry.coordinates.map((vitem, vindex) => {
                if(isMore) {
                    if(vitem.length && vitem[0].length == 2) {
                        transition3d(drawShape(vitem, x, y), `${hindex}${vindex}`)
                    }
                    if(vitem.length && vitem[0].length > 2) {
                        vitem.map((kitem, kindex) => {
                            transition3d(drawShape(kitem, x, y), `${hindex}${vindex}${kindex}`)
                        })
                    }
                } else {
                    const country = vitem.length > 1 ? vitem : vitem[0]
                    if(country) {
                        transition3d(drawShape(country, x, y), `${hindex}${vindex}`)
                    }
                }
            })
        })
    }

    const drawShape = (poi, x, y) => {
        const shape = new T.Shape()
        // 缩放比例
        const average = 1
        shape.moveTo((poi[0][0] - x) * average, (poi[0][1] - y) * average)
        poi.map(item => {
            shape.lineTo((item[0] - x) * average, (item[1] - y) * average)
        })
        return shape
    }

    const transition3d = (obj, identify) => {
        const opt = {
            depth: 0.3,
            steps: 0,
            bevelEnabled: true,
            bevelThickness: 0,
            bevelSize: 0,
            bevelSegments: 0,
            curveSegments: 0
        }
        const geometry = new T.ExtrudeGeometry(obj, opt)
        const material1 = new T.MeshBasicMaterial({
            color: '#1890ff',
            transparent: true,
            opacity: 0.5
        })
        const material2 = new T.MeshBasicMaterial({
            color: '#ff0000',
            transparent: true,
            opacity: 1
        })
        const shape = new T.Mesh(geometry, [material1, material2])
        scene.add(shape)
    }

    // 渲染场景
    const renderScene = () => {
        scene.traverse(e => {
            if(e.name == 'fontMesh') {
                e.rotation.y += 0.01
            } else if(e.name == 'canvasMesh') {
                e.material.map.offset.x += 0.005
            }
        })
        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()
        renderMap()
        renderScene()
        resize()
    }

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

export default Demo9