[three] | 基于 react + ts的三维组件开发示例

说明

抽空把cesium和threejs的api功能系统性的封装一下，抽象出几个组件供以后项目调用。

目前只封装了一些基础效果，还有一些高级分析，体渲染以及借鉴gis引擎的功能后面加进来。

新的  示例地址​​​​​​​ ​​​​​​​​​​​​​​目前没有开放（被扒怕了）

效果示例 ​​​​​​​

import React, { useEffect } from 'react'
import * as THREE from "three";
import Viewer from '../components/zt-three'

export default () => {


    const createApp = () => {

        const LoadScene = () => {

            const { sceneManager, resourceManager, graphicsManager } = viewer

            sceneManager.setSceneBackGround(resourceManager.SkyBox.Dark)

            sceneManager.setCustomGround({
                position: new THREE.Vector3(0, -1, 0)
            })

            graphicsManager.createLightTowerGraphics({
                position: new THREE.Vector3(0, 0, 0),
                color: new THREE.Color("yellow"),
                scale: 1
            })

        }

        const viewer = new Viewer({

            mapId: "map", // 容器id

            viewerType: "", // gis视图

            center: [120, 30], // 参考中心点

            logarithmicDepthBuffer: false, // 深度缓存

            controlsAnimation: false, // 相机旋转

            effectState: false, // 后处理

            datState: false, // dat.gui

            transformControlsState: false, // 拖动控件

            axesState: true, // 坐标轴,

            animation: (dalte) => { // 循环渲染回调函数

                console.log(dalte)
            },

            load: () => { // 初始化load场景

                viewer.cameraManager.updateCameraPosition({

                    position: new THREE.Vector3(50, 50, 50)
                })

                viewer.camera.lookAt(new THREE.Vector3(0, 0, 0));

                LoadScene()
            }
        })

        console.log(viewer)
    }

    useEffect(() => {
        createApp()
    })

    return <div id="map" style={{ width: '100vw', height: '100vh' }} > </div>
}