kubbo/kengee-data-screen
1
0
Fork 0
Code Pull Requests Actions Packages Projects Releases Wiki Activity

threejs升级了

Browse Source
This commit is contained in:
Kubbo
2024-07-10 01:58:51 +08:00
parent 62e9a2662a
commit bf1b275dec
5 changed files with 54 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
public/presource/datascreen/js/three/fonts/PingFang SC_Regular.json Normal file
View File

File diff suppressed because one or more lines are too long

2
src/utils/inject.js
View File

@@ -8,7 +8,7 @@ const libs = [
`${KENGEE_CDN_BASE}/js/pinyin.min.js`,
`${KENGEE_CDN_BASE}/js/dayjs.min.js`,
`${KENGEE_CDN_BASE}/js/Tween.js`,
`${KENGEE_CDN_BASE}/js/three/three.js`,
`${KENGEE_CDN_BASE}/js/three/three.min.js`,
`${KENGEE_CDN_BASE}/js/d3-array.min.js`,
`${KENGEE_CDN_BASE}/js/d3-geo.min.js`,
]

58
src/views/App3DMap.vue
View File

@@ -1,58 +0,0 @@
<script>
const KENGEE_CDN_BASE = "http://10.0.97.209/presource/datascreen/js/threejs"
const importMapScript = document.createElement('script');
importMapScript.type = 'importmap';
importMapScript.textContent = JSON.stringify({
imports: {
three: `${KENGEE_CDN_BASE}/three.module.js`,
OrbitControls: `${KENGEE_CDN_BASE}/jsm/controls/OrbitControls.js`,
'three/jsm/renderers/CSS3DRenderer': `${KENGEE_CDN_BASE}/jsm/renderers/CSS3DRenderer.js`,
}
});
document.head.appendChild(importMapScript);
const THREE = await import('three')
const {OrbitControls} = await import('OrbitControls')
const CSS3DRenderer = await import('three/jsm/renderers/CSS3DRenderer')
export default {
name: "App3DMap",
label: "vue3DModel地图",
data() {
return {
scene: null,
camera: null,
renderer: null
}
},
methods: {
animate() {
requestAnimationFrame(this.animate);
// 更新控制器
this.controls.update();
// 渲染场景
this.renderer.render(this.scene, this.camera);
}
},
mounted() {
this.scene = new THREE.Scene();
this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
this.camera.position.set(0, 0, 40);
this.camera.lookAt(new THREE.Vector3(0, 0, 0));
// this.renderer = new CSS3DRenderer();
this.scene.add(this.camera)
this.renderer = new THREE.WebGLRenderer({antialias: true});
this.renderer.setSize(this.$el.offsetWidth, this.$el.offsetHeight);
this.$el.appendChild(this.renderer.domElement);
this.controls = new OrbitControls(this.camera, this.renderer.domElement);
this.animate();
}
}
</script>
<template>
<section class="App3DMap"/>
</template>
<style scoped>
</style>

82
src/views/AppThreeMap.vue
View File

@@ -17,8 +17,8 @@ export default {
return $waitFor(THREE).then(() => Promise.all([
`http://10.0.97.209/presource/datascreen/js/three/js/controls/OrbitControls.js`,
`http://10.0.97.209/presource/datascreen/js/three/js/renderers/CSS3DRenderer.js`,
`http://10.0.97.209/presource/datascreen/js/three/js/renderers/CSS2DRenderer.js`,
`http://10.0.97.209/presource/datascreen/js/three/js/objects/Reflector.js`,
`http://10.0.97.209/presource/datascreen/js/three/js/loaders/FontLoader.js`,
`http://10.0.97.209/presource/datascreen/js/three/js/geometries/TextGeometry.js`,
].map(e => $loadScript('js', e))))
},
initMap() {
@@ -47,7 +47,7 @@ export default {
init() {
this.setScene();
this.setCamera();
// this.setAxes();
this.setAxes();
this.setRenderer();
this.setControl();
this.makeGround();
@@ -158,9 +158,7 @@ export default {
color: '#002240',
wireframe: false
});
const lineMaterial = new THREE.LineBasicMaterial({
color: '#97CAE6'
});
const lineMaterial = new THREE.LineBasicMaterial({color: '#97CAE6'});
const areas = []
data.forEach(function (areaData) {
let areaGroup = new THREE.Group();
@@ -170,8 +168,7 @@ export default {
// let mesh = new THREE.Mesh(geometry, [blockMaterial, blockSideMaterial]);
// areaGroup.add(mesh);
// Draw Line
let lineGeometry = new THREE.Geometry();
lineGeometry.vertices = areaItem;
let lineGeometry = new THREE.BufferGeometry().setFromPoints(areaItem);
let lineMesh = new THREE.Line(lineGeometry, lineMaterial);
lineMesh.position.z = 0.201;
areaGroup.add(lineMesh);
@@ -380,11 +377,7 @@ export default {
}
makeGround() {
let material = new THREE.MeshBasicMaterial({
opacity: 1,
transparent: true,
color: '#07193D'
});
const material = new THREE.MeshBasicMaterial({opacity: 0.5, transparent: true, color: '#07193D'});
const geometry = new THREE.PlaneGeometry(100, 100, 1, 1);
let ground = new THREE.Mesh(geometry, material);
ground.position.x = 0;
@@ -393,24 +386,51 @@ export default {
this.scene.add(ground);
ground.receiveShadow = true;
ground.castShadow = true;
const div = document.createElement("div");
div.style.color = "#fff";
div.style.width = "40px";
div.style.height = "25px";
div.style.borderWidth = "1px";
div.style.borderStyle = "solid";
div.style.borderColor = "#00ffc4";
div.style.borderRadius = "5px";
div.style.fontSize = "14px";
div.style.fontWeight = 600;
div.style.textShadow = "1px 1px 6px #fff";
div.style.textAlign = "center";
div.style.lineHeight = "25px";
div.textContent = `我操你大爷`;
const tip = new THREE.CSS2DObject(div);
tip.scale.set(0.01, 0.01, 0.01);
tip.position.set(0, 0, 1);
this.scene.add(tip);
const loader = new THREE.FontLoader();
loader.load('/presource/datascreen/js/three/fonts/PingFang SC_Regular.json', (font) => {
const textGeometry = new THREE.TextGeometry('郑州市', {
font: font,
size: 1,
height: 0.2,
curveSegments: 12,
bevelEnabled: true,
bevelThickness: 0.01,
bevelSize: 0.02,
bevelOffset: 0,
bevelSegments: 5
});
textGeometry.translate(1, 2, -3.2)
textGeometry.rotateX(Math.PI / 3)
textGeometry.rotateZ(Math.PI / 2)
textGeometry.computeTangents()
const textMaterial = new THREE.MeshPhongMaterial({color: '#fff'});
const text = new THREE.Mesh(textGeometry, textMaterial);
this.scene.add(text);
const planeGeometry = new THREE.PlaneGeometry(textGeometry.boundingBox.max.x, textGeometry.boundingBox.max.y);
const planeMaterial = new THREE.MeshBasicMaterial({color: '#07193D', side: THREE.DoubleSide});
const plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.position.copy(text.position).add(new THREE.Vector3(0, -textGeometry.boundingBox.max.y, 0));
plane.position.set(0, 0, 0);
this.scene.add(plane);
})
// const div = document.createElement("div");
// div.style.color = "#fff";
// div.style.width = "40px";
// div.style.height = "25px";
// div.style.borderWidth = "1px";
// div.style.borderStyle = "solid";
// div.style.borderColor = "#00ffc4";
// div.style.borderRadius = "5px";
// div.style.fontSize = "14px";
// div.style.fontWeight = 600;
// div.style.textShadow = "1px 1px 6px #fff";
// div.style.textAlign = "center";
// div.style.lineHeight = "25px";
// div.textContent = `我操你大爷`;
// const tip = new THREE.CSS3DObject(div);
// tip.scale.set(0.01, 0.01, 0.01);
// tip.position.set(0, 0, 1);
// this.scene.add(tip);
}
tipsSprite(areaData) {

6
vite.config.js
View File

@@ -40,16 +40,12 @@ export default defineConfig({
}
},
server: {
port: 9000,
port: 80,
proxy: {
'/data-boot': {
target: 'http://10.0.97.209',
changeOrigin: true,
},
'/presource': {
target: 'http://10.0.97.209',
changeOrigin: true,
}
}
}
})