Visioncraft3 NPM

visioncraft3.js

Install

npm i visioncraft3

Hello world

dom

<div id="container"></div>

style.css

#container {
  width: 100vw;
  height: 100vh;
  background: black;
  overflow: hidden;
}

script.js

import * as THREE from 'three';
import { MapScreen } from 'visioncraft3';
import { onMounted } from 'vue';
let screen;
const data = [
  {
    name: '上海市',
    value: 909347,
    title: '请求次数',
  },
  {
    name: '台湾省',
    value: 9347,
    title: '请求次数',
  }...
];
const conf = {
  MapConf: {
    autoLoop: false,
  },
  baseConf: {
    cameraConf: {
      far: 1000,
    },
  },
};
const assetsList = [
  {
    name: 'map',
    type: 'gltfModel',
    path: 'http://****/1692149741684china.glb',
  },
  {
    name: 'defaultTex',
    type: 'texture',
    path: 'http://****/1692150653983mapTu21.jpg',
  },
  {
    name: 'activeTex',
    type: 'texture',
    path: 'http://****/1692150673947mapTu22.jpg',
  },
  {
    name: 'tooltipTex',
    type: 'img',
    path: 'http://****/1692150631824tooltip.png',
  },
];
const hasLoad = () => {
  screen.loadData(
    data
  );
};
// 点击事件
const handleClick = (event) => {
  console.log(event.target, 'event00000');
};
onMounted(() => {
  screen = new MapScreen('container', conf);
  screen.loadAssets(assetsList, hasLoad, handleClick);
});

npm.io