@anov/cesium-three

cesium-three

1、安装

NPM / YARN 的方式安装。

npm i @anov/3d-core
npm i @anov/cesium-three
-------------------------
yarn add @anov/3d-core
yarn add @anov/cesium-three

安装后在相关使用文件中引入使用即可

import * as ANOVMAP from "@anov/cesium-three";
import {
  PerspectiveCamera,
  WebGLRenderer,
  Scene,
  OrbitControls
} from "@anov/3d-core";

2、配置alias

（暂时需要，后续升级版本后则无需配置） 下面是vite中配置实例，其他同理

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@anov/3d-core': path.resolve(__dirname, './node_modules/@anov/3d-core/dist'),
    }
  },
})

3、快速上手

//3D
const sceneControl = new SceneControl({
    rendererOps: {
        antialias: true,
        logarithmicDepthBuffer: true,
        shadowMap: true
    },
    orbitControls: false,
    defCameraOps: {
        position: new Vector3(0, 800, 1000),
        fov: 60,
        aspect: window.innerWidth / window.innerHeight,
        near: 0.001,
        far: 10000000
    }
});
sceneControl.render(document.querySelector('#container')!)
//GIS
const scene = sceneControl.scene;
const camera = sceneControl.camera;
const renderer = sceneControl.renderer;
const mapViewer = new Viewer('container', {
    threeModule: {
        scene, camera, renderer
    },
    origin: [121.462, 31.162, 0],
    imageryProvider: new TdtImageryTileProvider({
        style: "aerial",
        requestTileImageInWorker: false,
    })
});
camera.lookAt(new Vector3(0, 0, 0))