three加载模型

package.json

@@ -27,6 +27,7 @@
     "jsencrypt": "3.3.1",
     "nprogress": "0.2.0",
     "pinia": "2.0.22",
+    "three": "^0.148.0",
     "vue": "3.2.45",
     "vue-cropper": "1.0.3",
     "vue-router": "4.1.4"
@@ -36,9 +37,9 @@
     "@vue/compiler-sfc": "3.2.45",
     "sass": "1.56.1",
     "unplugin-auto-import": "0.11.4",
+    "unplugin-vue-setup-extend-plus": "0.4.9",
     "vite": "3.2.3",
     "vite-plugin-compression": "0.5.1",
-    "vite-plugin-svg-icons": "2.0.1",
-    "unplugin-vue-setup-extend-plus": "0.4.9"
+    "vite-plugin-svg-icons": "2.0.1"
   }
 }

src/views/bim/bimHome/index copy.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="app-container">
+    <div id="qmviewer_container">
+      <qmviewer
+        v-bind:modelName="modelName"
+        v-bind:isCompont="isCompont"
+        @callFather_loaded="callFather_loaded"
+      ></qmviewer>
+    </div>
+  </div>
+</template>
+<script setup name="bimHome">
+import Qmviewer from "@/components/Qmviewer";
+const data = reactive({
+  viewerDemo: null,
+  isLocal: true, // 本地为true
+  //你需要打开的模型名称放这里。
+  modelName: "static/gltf/01/revit2018-1.gltf", // 测试模型
+  // modelName: "static/gltf/bw/jz.gltf",
+  isCompont: true,
+  qmodel_container: null,
+});
+
+const { isLocal, modelName, isCompont, viewerDemo } = toRefs(data);
+
+const callFather_loaded = (parm) => {
+  viewerDemo.value = parm;
+  console.log("组件Demo", viewerDemo.value);
+  // 模型点击事件
+  qmodel.set_select_callback(function (id) {
+    var cmps = JSON.parse(id);
+    console.log(cmps);
+  });
+};
+</script>
+<style lang='scss' scoped>
+#qmviewer_container {
+  height: 900px;
+  background: #f8f8f9;
+}
+</style>

src/views/bim/bimHome/index.vue

@@ -1,41 +1,94 @@
 <template>
   <div class="app-container">
-    <div id="qmviewer_container">
-      <qmviewer
-        v-bind:modelName="modelName"
-        v-bind:isCompont="isCompont"
-        @callFather_loaded="callFather_loaded"
-      ></qmviewer>
-    </div>
+    <canvas id="three"></canvas>
   </div>
 </template>
 <script setup name="bimHome">
-import Qmviewer from "@/components/Qmviewer";
-const data = reactive({
-  viewerDemo: null,
-  isLocal: true, // 本地为true
-  //你需要打开的模型名称放这里。
-  modelName: "static/gltf/01/revit2018-1.gltf", // 测试模型
-  // modelName: "static/gltf/bw/jz.gltf",
-  isCompont: true,
-  qmodel_container: null,
+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 { isLocal, modelName, isCompont, viewerDemo } = toRefs(data);
-
-const callFather_loaded = (parm) => {
-  viewerDemo.value = parm;
-  console.log("组件Demo", viewerDemo.value);
-  // 模型点击事件
-  qmodel.set_select_callback(function (id) {
-    var cmps = JSON.parse(id);
-    console.log(cmps);
+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>
-#qmviewer_container {
+#three {
   height: 900px;
-  background: #f8f8f9;
+  width: 100%;
 }
 </style>