wangqiujuan0808
/
bw
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

。。

main
wangqiujuan0808 2023-12-02 22:40:12 +08:00
parent d0dbf4525c
commit 1165ebe19b
5 changed files with 253 additions and 164 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/views/bim/bimHome/components/BuildTree.vue
View File

@ -31,32 +31,18 @@ const data = reactive({
id: '0',
children: [
{
label: '原料糖化车间',
label: '原料糖化车间一',
id: '0-1',
url: '/jz/glb/jz.gltf'
},
{
label: '原料糖化车间',
label: '原料糖化车间二',
id: '0-2',
url: '/seraphine/scene.gltf'
},
],
},
{
label: '包装成品车间',
id: '1',
children: [
{
label: '原料糖化车间',
id: '1-1'
},
{
label: '原料糖化车间',
id: '1-2'
},
],
},
}
],
checkedkeys: ""
});

114
src/views/bim/bimHome/components/ThreeView.vue Normal file
View File

@ -0,0 +1,114 @@
<template>
<canvas id="three"></canvas>
</template>
<script setup>
import * as THREE from "three";
import { ref, onMounted } from "vue";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
// 引入轨道控制器:支持鼠标左中右键操作和键盘方向键操作
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader";
import {
CSS2DObject,
CSS2DRenderer,
} from "three/examples/jsm/renderers/CSS2DRenderer";
let scene = ref(null);
let renderer = ref(null);
let camera = ref(null);
let orbit = ref(null);
let group = ref(null);
let mouse = new THREE.Vector2();
let raycaster = new THREE.Raycaster();
let labelRenderer = new CSS2DRenderer(); //新建CSS2DRenderer
const props = defineProps({
background: { // 背景颜色
default: '#fff',
type: String
},
sceneUrl: { // 模型路径
default: '/jz/glb/jz.gltf',
type: String
},
light: {
default: '0xffffff',
type: String
}
})
watch(() => props.sceneUrl, val => {
console.log(123, val);
init();
loadSence();
});
onMounted(() => {
init();
loadSence();
// 启动动画
renderScene();
});
const init = () => {
scene = new THREE.Scene();
console.log(props.background);
scene.background = new THREE.Color(props.background);
const canvas = document.querySelector("#three");
var cubeLoader = new THREE.CubeTextureLoader();
// 创建一个渲染器并设置大小，WebGLRenderer将会使用电脑显卡来渲染场景
renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
camera = new THREE.PerspectiveCamera(
55,
window.innerWidth / window.innerHeight,
0.1,
20000
);
// 将摄像机对准场景的中心
camera.position.x = 100;
camera.position.y = 80;
camera.position.z = -150;
camera.lookAt(scene.position);
// 创建控件对象
orbit = new OrbitControls(camera, renderer.domElement);
orbit.autoRotate = true;
setTimeout(function () {
orbit.autoRotate = false;
}, 7000);
renderer.setClearColor(new THREE.Color("#0e0934"));
renderer.setSize(window.innerWidth, window.innerHeight);
// 环境光 光源颜色从0x444444更改为0x888888,可以看到threejs场景中的网格模型表面变的更亮。
// intensity 强度属性0.5
var alight = new THREE.AmbientLight(props.light, 0.5);
alight.name = "aLight";
scene.add(alight);
};
const loadSence = () => {
const gltfLoader = new GLTFLoader();
gltfLoader.load(props.sceneUrl, (gltf) => {
console.log(1, gltf);
var model = gltf.scene;
scene.add(model);
// 将模型的材质里的emssive设置为material.color，如果材质里有纹理，再把emissiveMap设置为material.map
// gltf.scene.traverse(function (child) {
// if (child.isMesh) {
// child.material.emissive = child.material.color;
// child.material.emissiveMap = child.material.map;
// }
// });
});
};
const renderScene = () => {
orbit.update(); // 拖动
// 使用requestAnimationFrame函数进行渲染
requestAnimationFrame(renderScene);
renderer.render(scene, camera);
// 写在requestAnimationFrame之后,否则会报错
labelRenderer.render(scene, camera);
};
</script>
<style lang='scss' scoped>
#three {
height: 100%;
width: 100%;
}
</style>

85
src/views/bim/bimHome/index.vue
View File

@ -1,34 +1,27 @@
<template>
<div class="app-container">
<div id="three">
<Renderer ref="renderer" antialias :orbit-ctrl="{ enableDamping: true }" resize>
<Camera :position="{ x: 100, y: 80, z: -150 }" />
<Scene background="#353535">
<AmbientLight></AmbientLight>
<GltfModel :src="bimUrl" @load="onReady" @progress="onProgress" @error="onError" />
</Scene>
</Renderer>
<!-- 底部菜单 -->
<MenuTab @changeMenu="changeMenu"></MenuTab>
<!-- 左侧建筑菜单 -->
<BuildTree v-if="activateIndex == 0" @handleNodeClick="handleBuildClick"></BuildTree>
<!-- 建筑信息 -->
<BuildInfo v-if="activateIndex == 0"></BuildInfo>
<!-- 资产信息 -->
<DevicePie v-if="activateIndex == 0"></DevicePie>
<!-- 左侧资产菜单 -->
<DeviceTree v-if="activateIndex == 1" @handleNodeClick="handleDeviceClick"></DeviceTree>
<!-- 资产信息 -->
<DeviceInfo v-if="activateIndex == 1"></DeviceInfo>
<!-- 资产事件 -->
<DeviceEvent v-if="activateIndex == 1"></DeviceEvent>
<!-- 左侧应用菜单 -->
<ApplicationTree v-if="activateIndex == 2" @handleNodeClick="handleApplicationClick"></ApplicationTree>
<!-- 设备信息 -->
<EquipmentInfo v-if="activateIndex == 2"></EquipmentInfo>
<!-- 实时数据 -->
<RealData v-if="activateIndex == 2"></RealData>
</div>
<!-- 模型 -->
<ThreeView background="#dcedff" :sceneUrl="sceneUrl"></ThreeView>
<!-- 底部菜单 -->
<MenuTab @changeMenu="changeMenu"></MenuTab>
<!-- 左侧建筑菜单 -->
<BuildTree v-if="activateIndex == 0" @handleNodeClick="handleBuildClick"></BuildTree>
<!-- 建筑信息 -->
<BuildInfo v-if="activateIndex == 0"></BuildInfo>
<!-- 资产信息 -->
<DevicePie v-if="activateIndex == 0"></DevicePie>
<!-- 左侧资产菜单 -->
<DeviceTree v-if="activateIndex == 1" @handleNodeClick="handleDeviceClick"></DeviceTree>
<!-- 资产信息 -->
<DeviceInfo v-if="activateIndex == 1"></DeviceInfo>
<!-- 资产事件 -->
<DeviceEvent v-if="activateIndex == 1"></DeviceEvent>
<!-- 左侧应用菜单 -->
<ApplicationTree v-if="activateIndex == 2" @handleNodeClick="handleApplicationClick"></ApplicationTree>
<!-- 设备信息 -->
<EquipmentInfo v-if="activateIndex == 2"></EquipmentInfo>
<!-- 实时数据 -->
<RealData v-if="activateIndex == 2"></RealData>
</div>
</template>
<script setup name="bimHome">
@ -42,32 +35,17 @@ import DeviceEvent from './components/DeviceEvent.vue';
import ApplicationTree from './components/ApplicationTree.vue';
import EquipmentInfo from './components/EquipmentInfo.vue';
import RealData from './components/RealData.vue';
import ThreeView from './components/ThreeView.vue';
import bimStore from '@/store/modules/bim';
import {
AmbientLight,
PointLight,
Camera,
GltfModel,
Renderer,
Scene,
} from 'troisjs';
const renderer = ref(null);
const data = reactive({
bimUrl: '/jz/glb/jz.gltf'
sceneUrl: '/jz/glb/jz.gltf'
});
const { bimUrl } = toRefs(data);
const { sceneUrl } = toRefs(data);
const activateIndex = computed(() =>
bimStore().activateIndex
);
onMounted(() => {
renderer.value.onBeforeRender(() => {
// box.rotation.x += 0.01;
});
});
const onReady = () => {
}
@ -79,8 +57,9 @@ const onProgress = () => {
}
const handleBuildClick = (value) => {
bimUrl.value = value.url;
console.log(value);
sceneUrl.value = value.url;
console.log(sceneUrl.value);
}
const handleDeviceClick = (value) => {
@ -92,13 +71,13 @@ const handleApplicationClick = (value) => {
}
const changeMenu = () => {
}
</script>
<style lang='scss' scoped>
#three {
height: 900px;
width: 100%;
.app-container {
position: relative;
width: 100%;
height: 900px;
}
</style>

94
src/views/bim/bimHome/index_three.vue
View File

@ -1,94 +0,0 @@
<template>
<div class="app-container">
<canvas id="three"></canvas>
</div>
</template>
<script setup name="bimHome">
import * as THREE from "three";
import { ref, onMounted } from "vue";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
// 引入轨道控制器:支持鼠标左中右键操作和键盘方向键操作
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader";
import {
CSS2DObject,
CSS2DRenderer,
} from "three/examples/jsm/renderers/CSS2DRenderer";
let scene = ref(null);
let renderer = ref(null);
let camera = ref(null);
let orbit = ref(null);
let group = ref(null);
let mouse = new THREE.Vector2();
let raycaster = new THREE.Raycaster();
let labelRenderer = new CSS2DRenderer(); //新建CSS2DRenderer
onMounted(() => {
init();
loadSence();
// 启动动画
renderScene();
});
const init = () => {
scene = new THREE.Scene();
scene.background = new THREE.Color("#eee");
const canvas = document.querySelector("#three");
var cubeLoader = new THREE.CubeTextureLoader();
// 创建一个渲染器并设置大小，WebGLRenderer将会使用电脑显卡来渲染场景
renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
camera = new THREE.PerspectiveCamera(
55,
window.innerWidth / window.innerHeight,
0.1,
20000
);
// 将摄像机对准场景的中心
camera.position.x = 100;
camera.position.y = 80;
camera.position.z = -150;
camera.lookAt(scene.position);
// 创建控件对象
orbit = new OrbitControls(camera, renderer.domElement);
orbit.autoRotate = true;
setTimeout(function () {
orbit.autoRotate = false;
}, 7000);
renderer.setClearColor(new THREE.Color("#0e0934"));
renderer.setSize(window.innerWidth, window.innerHeight);
// 环境光 光源颜色从0x444444更改为0x888888,可以看到threejs场景中的网格模型表面变的更亮。
// intensity 强度属性0.5
var alight = new THREE.AmbientLight(0xffffff, 0.5);
alight.name = "aLight";
scene.add(alight);
};
const loadSence = () => {
const gltfLoader = new GLTFLoader();
gltfLoader.load("/jz/glb/jz.gltf", (gltf) => {
console.log(1, gltf);
var model = gltf.scene;
scene.add(model);
// 将模型的材质里的emssive设置为material.color，如果材质里有纹理，再把emissiveMap设置为material.map
// gltf.scene.traverse(function (child) {
// if (child.isMesh) {
// child.material.emissive = child.material.color;
// child.material.emissiveMap = child.material.map;
// }
// });
});
};
const renderScene = () => {
orbit.update(); // 拖动
// 使用requestAnimationFrame函数进行渲染
requestAnimationFrame(renderScene);
renderer.render(scene, camera);
// 写在requestAnimationFrame之后,否则会报错
labelRenderer.render(scene, camera);
};
</script>
<style lang='scss' scoped>
#three {
height: 900px;
width: 100%;
}
</style>

104
src/views/bim/bimHome/index_trois.vue Normal file
View File

@ -0,0 +1,104 @@
<template>
<div class="app-container">
<div id="three">
<Renderer ref="renderer" antialias :orbit-ctrl="{ enableDamping: true }" resize>
<Camera :position="{ x: 100, y: 80, z: -150 }" />
<Scene background="#353535">
<AmbientLight></AmbientLight>
<GltfModel :src="bimUrl" @load="onReady" @progress="onProgress" @error="onError" />
</Scene>
</Renderer>
<!-- 底部菜单 -->
<MenuTab @changeMenu="changeMenu"></MenuTab>
<!-- 左侧建筑菜单 -->
<BuildTree v-if="activateIndex == 0" @handleNodeClick="handleBuildClick"></BuildTree>
<!-- 建筑信息 -->
<BuildInfo v-if="activateIndex == 0"></BuildInfo>
<!-- 资产信息 -->
<DevicePie v-if="activateIndex == 0"></DevicePie>
<!-- 左侧资产菜单 -->
<DeviceTree v-if="activateIndex == 1" @handleNodeClick="handleDeviceClick"></DeviceTree>
<!-- 资产信息 -->
<DeviceInfo v-if="activateIndex == 1"></DeviceInfo>
<!-- 资产事件 -->
<DeviceEvent v-if="activateIndex == 1"></DeviceEvent>
<!-- 左侧应用菜单 -->
<ApplicationTree v-if="activateIndex == 2" @handleNodeClick="handleApplicationClick"></ApplicationTree>
<!-- 设备信息 -->
<EquipmentInfo v-if="activateIndex == 2"></EquipmentInfo>
<!-- 实时数据 -->
<RealData v-if="activateIndex == 2"></RealData>
</div>
</div>
</template>
<script setup name="bimHome">
import MenuTab from './components/MenuTab.vue';
import BuildTree from './components/BuildTree.vue';
import BuildInfo from './components/BuildInfo.vue';
import DevicePie from './components/DevicePie.vue';
import DeviceTree from './components/DeviceTree.vue';
import DeviceInfo from './components/DeviceInfo.vue';
import DeviceEvent from './components/DeviceEvent.vue';
import ApplicationTree from './components/ApplicationTree.vue';
import EquipmentInfo from './components/EquipmentInfo.vue';
import RealData from './components/RealData.vue';
import bimStore from '@/store/modules/bim';
import {
AmbientLight,
PointLight,
Camera,
GltfModel,
Renderer,
Scene,
} from 'troisjs';
const renderer = ref(null);
const data = reactive({
bimUrl: '/jz/glb/jz.gltf'
});
const { bimUrl } = toRefs(data);
const activateIndex = computed(() =>
bimStore().activateIndex
);
onMounted(() => {
renderer.value.onBeforeRender(() => {
// box.rotation.x += 0.01;
});
});
const onReady = () => {
}
const onError = () => {
}
const onProgress = () => {
}
const handleBuildClick = (value) => {
bimUrl.value = value.url;
console.log(value);
}
const handleDeviceClick = (value) => {
console.log(value);
}
const handleApplicationClick = (value) => {
console.log(value);
}
const changeMenu = () => {
}
</script>
<style lang='scss' scoped>
#three {
height: 900px;
width: 100%;
position: relative;
}
</style>