@anov/cesium-three
v1.0.5
Published
`NPM / YARN` 的方式安装。
Downloads
10
Maintainers
Keywords
Readme
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))