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

troisjs demo

main
wangqiujuan0808 2023-12-01 23:25:09 +08:00
parent 6b3eb0dca9
commit 0730aae140
7 changed files with 125 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
package.json
View File

@ -19,6 +19,7 @@
"@vueup/vue-quill": "1.2.0",
"@vueuse/core": "9.5.0",
"axios": "0.27.2",
"dayjs": "^1.11.10",
"echarts": "5.4.0",
"element-plus": "2.2.27",
"file-saver": "2.0.5",
@ -27,11 +28,11 @@
"jsencrypt": "3.3.1",
"nprogress": "0.2.0",
"pinia": "2.0.22",
"three": "^0.148.0",
"three": "^0.134.0",
"troisjs": "^0.3.4",
"vue": "3.2.45",
"vue-cropper": "1.0.3",
"vue-router": "4.1.4",
"dayjs": "^1.11.10"
"vue-router": "4.1.4"
},
"devDependencies": {
"@vitejs/plugin-vue": "3.1.0",

4
src/main.js
View File

@ -42,6 +42,9 @@ import ImagePreview from "@/components/ImagePreview"
import TreeSelect from '@/components/TreeSelect'
// 字典标签组件
import DictTag from '@/components/DictTag'
// troisjs
import { TroisJSVuePlugin } from 'troisjs';
const app = createApp(App)
@ -65,6 +68,7 @@ app.component('ImagePreview', ImagePreview)
app.component('RightToolbar', RightToolbar)
app.component('Editor', Editor)
app.use(TroisJSVuePlugin)
app.use(router)
app.use(store)
app.use(plugins)

1
src/router/index.js
View File

@ -62,6 +62,7 @@ export const constantRoutes = [{
path: '',
component: LayoutMain,
redirect: '/index',
hidden: true,
children: [{
path: '/index',
component: () => import('@/views/index'),

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

@ -1,90 +1,32 @@
<template>
<div class="app-container">
<canvas id="three"></canvas>
<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="/jz/glb/jz.gltf" @load="onReady" @progress="onProgress" @error="onError" />
</Scene>
</Renderer>
</div>
</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
AmbientLight,
PointLight,
Camera,
GltfModel,
Renderer,
Scene,
} from 'troisjs';
const renderer = ref(null);
onMounted(() => {
init();
loadSence();
// 启动动画
renderScene();
renderer.value.onBeforeRender(() => {
// box.rotation.x += 0.01;
});
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 {

0
src/views/bim/bimHome/index copy.vue → src/views/bim/bimHome/index_qmodel.vue
View File

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

@ -0,0 +1,94 @@
<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>

2
src/views/index.vue
View File

@ -22,6 +22,8 @@ const sidebarRouters = computed(() =>
return !item.hidden;
})
);
console.log(1,sidebarRouters);
const gotoPage = (item) => {
useTagsViewStore().delAllViews();
localStorage.setItem("CURRENT_MENU", item.path);