Auto commit

package.json

@@ -7,7 +7,10 @@
     "preview": "vite preview --port 4173"
   },
   "dependencies": {
+    "core-js": "^3.30.1",
+    "gsap": "^3.11.5",
     "guess": "^1.0.2",
+    "three": "^0.151.3",
     "vue": "^3.2.37"
   },
   "devDependencies": {

public/draco/README.md

+# Draco 3D Data Compression
+
+Draco is an open-source library for compressing and decompressing 3D geometric meshes and point clouds. It is intended to improve the storage and transmission of 3D graphics.
+
+[Website](https://google.github.io/draco/) | [GitHub](https://github.com/google/draco)
+
+## Contents
+
+This folder contains three utilities:
+
+* `draco_decoder.js` — Emscripten-compiled decoder, compatible with any modern browser.
+* `draco_decoder.wasm` — WebAssembly decoder, compatible with newer browsers and devices.
+* `draco_wasm_wrapper.js` — JavaScript wrapper for the WASM decoder.
+
+Each file is provided in two variations:
+
+* **Default:** Latest stable builds, tracking the project's [master branch](https://github.com/google/draco).
+* **glTF:** Builds targeted by the [glTF mesh compression extension](https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Khronos/KHR_draco_mesh_compression), tracking the [corresponding Draco branch](https://github.com/google/draco/tree/gltf_2.0_draco_extension).
+
+Either variation may be used with `THREE.DRACOLoader`:
+
+```js
+var dracoLoader = new THREE.DRACOLoader();
+dracoLoader.setDecoderPath('path/to/decoders/');
+dracoLoader.setDecoderConfig({type: 'js'}); // (Optional) Override detection of WASM support.
+```
+
+Further [documentation on GitHub](https://github.com/google/draco/tree/master/javascript/example#static-loading-javascript-decoder).
+
+## License
+
+[Apache License 2.0](https://github.com/google/draco/blob/master/LICENSE)

src/App.vue

-<script setup>
-import HelloWorld from './components/HelloWorld.vue'
-import TheWelcome from './components/TheWelcome.vue'
-</script>
-
 <template>
-  <header>
-    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
+  <div class="home">
+    <div class="canvas-container" ref="canvasDom"></div>
 
-    <div class="wrapper">
-      <HelloWorld msg="You did it!" />
+    <div class="home-content">
+      <!-- <span class="colorPicker">
+        <input
+          id="body-color"
+          type="color"
+          @change="changeColor"
+          value="#ff0000"
+        />
+        <br />Body</span
+      > -->
+      <div class="select">
+        <div
+          class="select-item"
+          v-for="(item, index) in colors"
+          :key="index"
+          @click="selectColor(item)"
+        >
+          <div
+            class="select-item-color"
+            :style="{ backgroundColor: item.color }"
+          ></div>
+          <div>{{ item.name }}</div>
+        </div>
       </div>
-  </header>
 
-  <main>
-    <TheWelcome />
-  </main>
+      <!-- <h2>选择贴膜材质</h2>
+      <div class="select">
+        <div
+          class="select-item"
+          v-for="(item, index) in materials"
+          :key="index"
+          @click="selectMaterial(index)"
+        >
+          <div class="select-item-text">{{ item.name }}</div>
+        </div>
+      </div> -->
+    </div>
+  </div>
 </template>
 
-<style scoped>
-header {
-  line-height: 1.5;
-}
+<script setup>
+import * as THREE from "three";
+import { onMounted, reactive, ref } from "vue";
+import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
+import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
+import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";
+let controls;
+let canvasDom = ref(null);
+// 创建场景
+const scene = new THREE.Scene();
+// 创建相机
+const camera = new THREE.PerspectiveCamera(
+  30,
+  window.innerWidth / window.innerHeight,
+  0.1,
+  100
+);
+camera.position.set(4.25, 1.4, 4.5);
+// 创建渲染器
+const renderer = new THREE.WebGLRenderer({
+  // 抗锯齿
+  antialias: true,
+});
+renderer.setSize(window.innerWidth, window.innerHeight);
 
-.logo {
-  display: block;
-  margin: 0 auto 2rem;
-}
+const render = () => {
+  renderer.render(scene, camera);
+  controls && controls.update();
+  requestAnimationFrame(render);
+};
 
-@media (min-width: 1024px) {
-  header {
-    display: flex;
-    place-items: center;
-    padding-right: calc(var(--section-gap) / 2);
+let wheels = [];
+let carBody, frontCar, hoodCar, glassCar;
+// 创建材质
+const bodyMaterial = new THREE.MeshPhysicalMaterial({
+  color: 0xff0000,
+  metalness: 1,
+  roughness: 0.5,
+  clearcoat: 1,
+  clearcoatRoughness: 0.03,
+  sheen: 0.5,
+});
+
+const frontMaterial = new THREE.MeshPhysicalMaterial({
+  color: 0xff0000,
+  metalness: 1,
+  roughness: 0.5,
+  clearcoat: 1,
+  clearcoatRoughness: 0,
+});
+const hoodMaterial = new THREE.MeshPhysicalMaterial({
+  color: 0xff0000,
+  metalness: 1,
+  roughness: 0.5,
+  clearcoat: 1,
+  clearcoatRoughness: 0,
+});
+const wheelsMaterial = new THREE.MeshPhysicalMaterial({
+  color: 0xff0000,
+  metalness: 1,
+  roughness: 0.1,
+});
+const glassMaterial = new THREE.MeshPhysicalMaterial({
+  color: 0xffffff,
+  metalness: 0.5,
+  roughness: 0,
+  transmission: 1,
+  transparent: true,
+});
+
+let colors = [
+  {
+    color: "#616268",
+    name: "GT银",
+  },
+  {
+    color: "red",
+    name: "宝石红",
+  },
+  {
+    color: "green",
+    name: "巨蟒绿",
+  },
+  {
+    color: "gray",
+    name: "凌空灰",
+  },
+  {
+    color: "orange",
+    name: "竞速黄",
+  },
+  {
+    color: "purple",
+    name: "黑夜紫",
+  },
+];
+
+let selectColor = (item) => {
+  bodyMaterial.color.set(item.color);
+  frontMaterial.color.set(item.color);
+  hoodMaterial.color.set(item.color);
+  wheelsMaterial.color.set(item.color);
+  // glassMaterial.color.set(item.color);
+};
+
+let changeColor = (e) => {
+  console.log(e.target.value);
+  bodyMaterial.color.set(e.target.value + "");
+};
+
+let materials = [
+  { name: "磨砂", value: 1 },
+  { name: "冰晶", value: 0 },
+];
+let selectMaterial = (index) => {
+  bodyMaterial.clearcoatRoughness = materials[index].value;
+  frontMaterial.clearcoatRoughness = materials[index].value;
+  hoodMaterial.clearcoatRoughness = materials[index].value;
+};
+
+onMounted(() => {
+  // 把渲染器插入到dom中
+  // console.log(canvasDom.value);
+  canvasDom.value.appendChild(renderer.domElement);
+  // 初始化渲染器，渲染背景
+  renderer.setClearColor("#000");
+  scene.background = new THREE.Color("#f2f2f2");
+  scene.environment = new THREE.Color("#f2f2f2");
+
+  render();
+
+  // 添加网格地面
+  // const gridHelper = new THREE.GridHelper(10, 10);
+  // gridHelper.material.opacity = 0.2;
+  // gridHelper.material.transparent = true;
+  // scene.add(gridHelper);
+
+  // 添加控制器
+  controls = new OrbitControls(camera, renderer.domElement);
+  controls.update();
+
+  // 添加gltf汽车模型
+  const loader = new GLTFLoader();
+  const dracoLoader = new DRACOLoader();
+  dracoLoader.setDecoderPath("./draco/gltf/");
+  loader.setDRACOLoader(dracoLoader);
+  loader.load("./model/porsche911.glb", (gltf) => {
+    const bmw = gltf.scene;
+    console.log(gltf);
+    bmw.traverse((child) => {
+      if (child.isMesh) {
+        console.log(child.name);
       }
+      // if (child.isMesh && child.name.includes("boot")) {
+      //   carBody=child
+      //   child.material = bodyMaterial;
+      // }
 
-  .logo {
-    margin: 0 2rem 0 0;
+      if (child.isMesh && child.name.includes("boot")) {
+        carBody = child;
+        child.material = bodyMaterial;
+      }
+      if (child.isMesh && child.name.includes("window")) {
+        child.material = glassMaterial;
+      }
+      //  if (child.isMesh && child.name.includes("bumper")) {
+      //     child.material = glassMaterial;
+      //   }
+      if (child.isMesh && child.name.includes("boot004_0")) {
+        child.material = null;
+        child.material = glassMaterial;
       }
 
-  header .wrapper {
-    display: flex;
-    place-items: flex-start;
-    flex-wrap: wrap;
+      // 判断是否是轮毂
+      if (child.isMesh && child.name.includes("轮毂")) {
+        child.material = wheelsMaterial;
+        wheels.push(child);
+      }
+      // 判断是否是车身
+      if (child.isMesh && child.name.includes("Mesh002")) {
+        carBody = child;
+        carBody.material = bodyMaterial;
       }
+      // 判断是否是前脸
+      if (child.isMesh && child.name.includes("前脸")) {
+        child.material = frontMaterial;
+        frontCar = child;
+      }
+      // 判断是否是引擎盖
+      if (child.isMesh && child.name.includes("引擎盖_1")) {
+        child.material = hoodMaterial;
+        hoodCar = child;
+      }
+      // 判断是否是挡风玻璃
+      if (child.isMesh && child.name.includes("挡风玻璃")) {
+        child.material = glassMaterial;
+        glassCar = child;
+      }
+    });
+    scene.add(bmw);
+  });
+
+  // 添加灯光
+  const light1 = new THREE.DirectionalLight(0xffffff, 1);
+  light1.position.set(0, 0, 10);
+  scene.add(light1);
+  const light2 = new THREE.DirectionalLight(0xffffff, 1);
+  light2.position.set(0, 0, -10);
+  scene.add(light2);
+  const light3 = new THREE.DirectionalLight(0xffffff, 1);
+  light3.position.set(10, 0, 0);
+  scene.add(light3);
+  const light4 = new THREE.DirectionalLight(0xffffff, 1);
+  light4.position.set(-10, 0, 0);
+  scene.add(light4);
+  const light5 = new THREE.DirectionalLight(0xffffff, 1);
+  light5.position.set(0, 10, 0);
+  scene.add(light5);
+  const light6 = new THREE.DirectionalLight(0xffffff, 0.3);
+  light6.position.set(5, 10, 0);
+  scene.add(light6);
+  const light7 = new THREE.DirectionalLight(0xffffff, 0.3);
+  light7.position.set(0, 10, 5);
+  scene.add(light7);
+  const light8 = new THREE.DirectionalLight(0xffffff, 0.3);
+  light8.position.set(0, 10, -5);
+  scene.add(light8);
+  const light9 = new THREE.DirectionalLight(0xffffff, 0.3);
+  light9.position.set(-5, 10, 0);
+  scene.add(light9);
+});
+</script>
+
+<style>
+* {
+  margin: 0;
+  padding: 0;
+}
+
+.home-content {
+  position: fixed;
+  top: 10px;
+  left: 50%;
+  transform: translateX(-50%);
+  /* position: absolute;
+  left: 50%; */
+}
+.select-item {
+  display: flex;
+  align-items: center;
+  flex-flow: column;
+  font-size: 16px;
+}
+
+.select-item-color {
+  width: 50px;
+  height: 50px;
+  margin: 10px;
+  display: inline-block;
+  cursor: pointer;
+  border-radius: 100%;
+}
+.select {
+  display: flex;
 }
 </style>

src/assets/main.css

 @import "./base.css";
 
-#app {
+/* #app {
   max-width: 1280px;
   margin: 0 auto;
   padding: 2rem;
-
   font-weight: normal;
-}
+} */
 
 a,
 .green {
@@ -30,6 +29,6 @@ a,
   #app {
     display: grid;
     grid-template-columns: 1fr 1fr;
-    padding: 0 2rem;
+    /* padding: 0 2rem; */
   }
 }