THREE--demo9(形状)

15 篇文章 0 订阅
效果

在这里插入图片描述

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

梅花三

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值