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);
});

版本更新记录

[1.2.7] - 2024-10-25

新增

• 增加了粒子波浪场景类,噪声扩散场景类

[1.2.6] - 2024-07-22

改进

• 修改了旋转球场景类，小球的绘制流程

[1.2.4] - 2024-07-17

改进

• 修改了地图场景类colors的逻辑，格式变成了数组
• 增加了destoryall时，清除canvas的逻辑
• 修改了场景大小使用的windows没用this.height的bug

[1.2.1] - 2023-09-07

新增

• 增加了建筑场景预制类相关代码

[1.1.1] - 2023-08-23

新增

• 增加了旋转球场景相关内容
• 增加了说明文档大部分中文注释

[1.0.6] - 2023-08-16

改进

• 修改了README.md

[1.0.4] - 2023-08-16

新增

• 加入版本记录

[1.0.3] - 2023-08-16

修复

• img图片跨域问题，同时发现使用时项目本地需要统一版本的three