troisjs demo

package.json

@@ -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",
+    "vue-router": "4.1.4"
-    "dayjs": "^1.11.10"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "3.1.0",

src/main.js

@@ -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)

src/router/index.js

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

src/views/bim/bimHome/index.vue

@@ -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,
+  AmbientLight,
-  CSS2DRenderer,
+  PointLight,
-} from "three/examples/jsm/renderers/CSS2DRenderer";
+  Camera,
-let scene = ref(null);
+  GltfModel,
-let renderer = ref(null);
+  Renderer,
-let camera = ref(null);
+  Scene,
-let orbit = ref(null);
+} from 'troisjs';
-let group = ref(null);
+const renderer = ref(null);
-let mouse = new THREE.Vector2();
-let raycaster = new THREE.Raycaster();
-let labelRenderer = new CSS2DRenderer(); //新建CSS2DRenderer
 onMounted(() => {
-  init();
+  renderer.value.onBeforeRender(() => {
-  loadSence();
+    // box.rotation.x += 0.01;
-  // 启动动画
-  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 {

src/views/bim/bimHome/index_three.vue

@@ -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>

src/views/index.vue

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