【Threejs】——案例实践笔记

原创已于 2025-12-12 16:32:34 修改 · 868 阅读

28 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

收录于

【数字孪生】学习笔记

于 2025-09-11 20:54:08 首次发布

该文章已生成可运行项目，

1. 圣诞贺卡

1.1. 项目搭建

安装库

安装threejs

npm install three 或 yarn add three 或 pnpm install three

安装gsap

npm install gsap 或 yarn add gsap 或 pnpm install gsap

项目初始化

准备：

准备场景模型scene.glb，并放置相应目录
准备解压器文件夹draco，并放置相应目录

初始代码

导入依赖，定义变量关联元素

import { ref, onMounted } from 'vue'
import * as THREE from "three"
import gsap from 'gsap' // 导入动画gsap
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js"  // 轨道控制器
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js' // 导入Draco加载器
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js' // 导入gltf加载器
const demo = ref(null)

静态页面配置

<template>
  <div ref="demo" />
</template>

<style scoped>
* {
  margin: 0;
  padding: 0;
}

canvas {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
}
</style>

threejs初始化配置

// 1. --- 创建场景 ---
const scene = new THREE.Scene()

// 2. --- 创建相机 ---
const camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
)
camera.position.set(-3.23, 2.98, 4) // 相机位置
camera.updateProjectionMatrix()

// 3. --- 创建渲染器 ---
const renderer = new THREE.WebGLRenderer({
    antialias: true, // 开启抗锯齿
})
renderer.setSize(window.innerWidth, window.innerHeight)
demo.value.appendChild(renderer.domElement)

// 4. --- 轨道控制器 ---
const controls = new OrbitControls(camera, renderer.domElement)
controls.enableDamping = true // 设置阻尼
controls.dampingFactor = 0.05

// 5. --- 模型加载 ---
const dracoLoader = new DRACOLoader() // 实例化draco加载器
dracoLoader.setDecoderPath("./draco/") // 设置draco解压器路径
const gltfLoader = new GLTFLoader() // 实例化gltf加载器
gltfLoader.setDRACOLoader(dracoLoader) // gltf加载器关联draco解压器
gltfLoader.load(
    "../public/model/scene.glb",
    (gltf) => scene.add(gltf.scene)
)

// 6. --- 添加光源 ---
const light = new THREE.DirectionalLight(0xffffff, 1)
light.position.set(0, 50, 0)
scene.add(light)

// 7. --- 渲染 ---
const render = () => {
    requestAnimationFrame(render) // 请求动画帧
    renderer.render(scene, camera)
    controls.update()
}
render()

// 窗口大小调整
window.addEventListener("resize", () => {
    renderer.setSize(window.innerWidth, window.innerHeight)
    camera.aspect = window.innerWidth / window.innerHeight
    camera.updateProjectionMatrix()
})

onMounted(() => {
    demo.value.appendChild(renderer.domElement)
})

效果图：

在这里插入图片描述

1.2. 水面与天空

准备环境纹理贴图sky.hdr，并放置相应目录

加载环境纹理

import { RGBELoader } from 'three/examples/jsm/Addons.js' // 导入加载器
...
// 加载环境纹理
const rgbeLoader = new RGBELoader()
rgbeLoader.load(
    '/texture/hdr/sky.hdr',
    (texture) => {
        texture.mapping = THREE.EquirectangularReflectionMapping  // 设置纹理映射
        scene.background = texture
        scene.environment = texture
    },
)
// 设置色调映射
renderer.toneMapping = THREE.ACESFilmicToneMapping
controls.enableDamping = true

效果图：

在这里插入图片描述

设置水面效果

import { Water } from 'three/examples/jsm/objects/Water2.js' // 导入自带水面库
...
// 设置水面效果
const waterGeometry = new THREE.CircleGeometry(300, 32)
const water = new Water(waterGeometry, {
    textureWidth: 1024,
    textureHeight: 1024,
    color: 0xeeeeff,
    flowDirection: new THREE.Vector2(1, 1), //  waves direction
    scale: 100, //  wavesize
})
water.rotation.x = -Math.PI / 2
water.position.y = -0.4
scene.add(water)

效果图：

在这里插入图片描述

1.3. 场景光源

给小木屋添加点光源

注意开启阴影要对渲染器、物体、光源分别进行设置

// 设置色调映射
...
renderer.shadowMap.enabled = true;  // 1.渲染器开启阴影
renderer.physicallyCorrectLights = true;
...
gltfLoader.load("/model/scene.glb",
    (gltf) => {
      const model = gltf.scene
      model.traverse((child) => {
        ...
        // 2.物体允许接收后投射阴影
        if (child.isMesh) {
          child.castShadow = true;
          child.receiveShadow = true;
        }
      })
	...
    }
  )

// 点光源
const pointLight = new THREE.PointLight(0xffffff, 10)
pointLight.position.set(0.1, 2.4, 0)
pointLight.castShadow = true // 3.点光源开启阴影
scene.add(pointLight)

效果图：

在这里插入图片描述

循环创建发光小球并绑定点光源，组成点光源组

// 创建点光源
const pointLight = new THREE.PointLight(0xffffff, 50)
pointLight.position.set(0.1, 2.4, 0)
pointLight.castShadow = true

// 创建点光源组
const pointLightGroup = new THREE.Group()
pointLightGroup.position.set(-8, 2.5, -1.5)
const radius = 3
const pointLightList = []
for (let i = 0; i < 3; i++) {
    // 创建球体用于绑定光源 
    const sphereGeometry = new THREE.SphereGeometry(0.2, 32, 32)
    const sphereMaterial = new THREE.MeshStandardMaterial({
        color: 0xffffff,
        emissive: 0xffffff,
        emissiveIntensity: 10 // 亮度
    })
    const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial)
    pointLightList.push(sphere);
    sphere.position.set(
        radius * Math.cos(i * 2 * Math.PI / 3),
        Math.cos(i * 2 * Math.PI / 3),
        radius * Math.sin(i * 2 * Math.PI / 3),
    )
    const pointLight = new THREE.PointLight(0xffffff, 50)
    sphere.add(pointLight) // 绑定点光源
    pointLightGroup.add(sphere)
}
scene.add(pointLightGroup)

这里来解释这段代码：

代码：radius * Math.cos(i * 2 * Math.PI / 3)

圆为2π（即2 * Math.PI），我们有三个小球，那么每个小球就应该相隔 (2 / 3)π，那么每个小球的位置应该是i * (2 /3)π，即分别为0，(2 / 3)π ，(4 /3)* π
pointLightList是干啥用的？：

这里只是往pointLightList添加小球，小球绑定了点光源，那么后面的gsap动画就直接操作小球就可以了（这里threejs应该在底层做了优化，不然 pointLightList.push(sphere)，应该写在最后一行的）

使点光源组运动

// 使用补间函数，从0到2π，使小球旋转运动
const options = {
    angle: 0,
};
gsap.to(options, {
    angle: Math.PI * 2,
    duration: 10,
    repeat: -1,
    ease: "linear", // 这里要用双引号，不然要报错
    onUpdate: () => {
        pointLightGroup.rotation.y = options.angle;
        // 让球上下摆动
        pointLightList.forEach((item, index) => {
            item.position.set(
                radius * Math.cos(index * 2 * Math.PI / 3),
                Math.cos(index * 2 * Math.PI / 3 + options.angle * 5),
                radius * Math.sin(index * 2 * Math.PI / 3)
            )
        });
    },
})

效果图：

光源组运动

1.4. 相机与文字

监听鼠标滚轮事件

const index = ref(0)
window.addEventListener('wheel', (e) => {
  if (e.deltaY > 0) {
    index.value++
    if (index.value >= scenes.length) {
      index.value = 0
    }
  }
  scenes[index.value].callback()
},
  false
)

利用数组存储数据即交互逻辑

const scenes = [
  {
    text: '《认真的白学》',
    callback: () => {
      // 切换对应位置
      translateCamera(
        new THREE.Vector3(-3.23, 3, 4.06),
        new THREE.Vector3(-8, 2, 0)
      )
      console.log(111);
    }
  }, {

    text: '学下得那么深',
    callback: () => {
      // 切换对应位置
      translateCamera(
        new THREE.Vector3(7, 0, 23),
        new THREE.Vector3(0, 0, 0)
      )
      console.log(222);
    }
  }, {
    text: '学得那么认真',
    callback: () => {
      // 切换对应位置
      translateCamera(
        new THREE.Vector3(10, 3, 0),
        new THREE.Vector3(5, 2, 0)
      )
      console.log(333);
    }
  }, {
    text: '倒映出我躺在学中的伤痕',
    callback: () => {
      // 切换对应位置
      translateCamera(
        new THREE.Vector3(7, 0, 23),
        new THREE.Vector3(0, 0, 0)
      )
      console.log(444);
    }
  }, {
    text: '完',
    callback: () => {
      // 切换对应位置
      translateCamera(
        new THREE.Vector3(-20, 1.3, 6.6),
        new THREE.Vector3(5, 2, 0)
      )
      console.log(555);
    }
  }
]

微调一下结构样式，添加相应文字

<template>
  <div ref="demo">
    <h1 style="padding: 100px 50px; font-size: 50px; color: #fff" class="text">
      {{ scenes[index].text }}
    </h1>
  </div>

</template>

<style scoped>
* {
  margin: 0;
  padding: 0;
}

canvas {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1;
}

.text {
  position: fixed;
  z-index: 2;
}
</style>

使用补间动画移动相机

let timeLine1 = gsap.timeline()
let timeLine2 = gsap.timeline()

// 相机的移动(position：移动的目标位置, target：看向的位置)
const translateCamera = (position, target) => {
  timeLine1.to(camera.position, {
    x: position.x,
    y: position.y,
    z: position.z,
    duration: 1,
    ease: "power2.inOut",
  })

  timeLine2.to(controls.target, {
    x: target.x,
    y: target.y,
    z: target.z,
    duration: 1,
    ease: "power2.inOut",
  })
}

1.5. 星与心

创建星实例并随即分布到天上

// 实例化满天星
const starsInstance = new THREE.InstancedMesh(
  new THREE.SphereGeometry(0.1, 32, 32),
  sphereMaterial,
  100
)

// 随机分布到天上
const starsArr = []
const endArr = []
for (let i = 0; i < 100; i++) {
  const x = (Math.random() - 0.5) * 100
  const y = (Math.random() - 0.5) * 100
  const z = (Math.random() - 0.5) * 100
  starsArr.push(new THREE.Vector3(x, y, z))
  const matrix = new THREE.Matrix4()
  matrix.setPosition(x, y, z)
  starsInstance.setMatrixAt(i, matrix)
}
scene.add(starsInstance)

创建爱心路径并获取点

// 创建爱心路径
const heartPath = new THREE.Shape()
heartPath.moveTo(25, 25)
heartPath.bezierCurveTo(25, 25, 20, 0, 0, 0)
heartPath.bezierCurveTo(-30, 0, -30, 35, -30, 35)
heartPath.bezierCurveTo(-30, 55, -10, 77, 25, 95)
heartPath.bezierCurveTo(60, 77, 80, 55, 80, 35)
heartPath.bezierCurveTo(80, 35, 80, 0, 50, 0)
heartPath.bezierCurveTo(35, 0, 25, 25, 25, 25)

// 根据爱心路径获取点
const center = new THREE.Vector3(0, 2, 10)
for (let i = 0; i < 100; i++) {
  const point = heartPath.getPoint(i / 100)
  endArr.push(new THREE.Vector3(
    point.x * 0.1 + center.x,
    point.y * 0.1 + center.y,
    center.z))
}

创建满天星和爱心的切换动画

// 创建爱心动画
const makeHeart = () => {
  const params = {
    time: 0
  }
  gsap.to(params, {
    time: 1,
    duration: 1,
    onUpdate: () => {
      for (let i = 0; i < 100; i++) {
        const x = starsArr[i].x + (endArr[i].x - starsArr[i].x) * params.time
        const y = starsArr[i].y + (endArr[i].y - starsArr[i].y) * params.time
        const z = starsArr[i].z + (endArr[i].z - starsArr[i].z) * params.time
        const matrix = new THREE.Matrix4()
        matrix.setPosition(x, y, z)
        starsInstance.setMatrixAt(i, matrix)
      }
      starsInstance.instanceMatrix.needsUpdate = true
    }
  })
}

// 爱心复原
const restoreHeart = () => {
  const params = {
    time: 0,
  }
  gsap.to(params, {
    time: 1,
    duration: 1,
    onUpdate: () => {
      for (let i = 0; i < 100; i++) {
        const x = endArr[i].x + (starsArr[i].x - endArr[i].x) * params.time
        const y = endArr[i].y + (starsArr[i].y - endArr[i].y) * params.time
        const z = endArr[i].z + (starsArr[i].z - endArr[i].z) * params.time
        const matrix = new THREE.Matrix4()
        matrix.setPosition(x, y, z)
        starsInstance.setMatrixAt(i, matrix)
      }
      starsInstance.instanceMatrix.needsUpdate = true
    }
  })
}

1.6. 代码奉上

代码差异
1. 资源路径可能不同，按照实际路径修改几款
2. 部分静态页面实现不同，我的文字使用固定定位和层级处理，切换相机没有动画
3. 我的水面代码好像有问题，没有波光粼粼的感觉

1.6.1. 最终效果

1.6.2. 我的代码

<script setup>
import { ref, onMounted } from 'vue'
import * as THREE from "three"
import gsap from 'gsap' // 导入动画gsap
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js"  // 轨道控制器
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js' // 导入Draco加载器
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js' // 导入gltf加载器
import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader'
import { Water } from 'three/examples/jsm/objects/Water2.js'

const demo = ref(null)
// 1. --- 创建场景 ---
const scene = new THREE.Scene()

// 2. --- 创建相机 ---
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
)
camera.position.set(-3.23, 2.98, 4) // 相机位置
camera.updateProjectionMatrix()

// 3. --- 创建渲染器 ---
const renderer = new THREE.WebGLRenderer({
  antialias: true, // 开启抗锯齿
})
renderer.setSize(window.innerWidth, window.innerHeight)

// 设置色调映射
renderer.outputEncoding = THREE.sRGBEncoding;
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 0.5;
renderer.shadowMap.enabled = true;  // 渲染器开启阴影
renderer.physicallyCorrectLights = true;

// 4. --- 轨道控制器 ---
const controls = new OrbitControls(camera, renderer.domElement)
// controls.enableDamping = true // 设置阻尼

// 5. --- 模型加载 ---
const dracoLoader = new DRACOLoader() // 实例化draco加载器
dracoLoader.setDecoderPath("./draco/") // 设置draco解压器路径
const gltfLoader = new GLTFLoader() // 实例化gltf加载器
gltfLoader.setDRACOLoader(dracoLoader) // gltf加载器关联draco解压器
gltfLoader.load("/model/scene.glb",
  (gltf) => {
    const model = gltf.scene
    model.traverse((child) => {
      if (child.name === "Plane") {
        child.visible = false
      }
      // 物体允许接收后投射阴影
      if (child.isMesh) {
        child.castShadow = true;
        child.receiveShadow = true;
      }
    })
    scene.add(model)
  }
)

// 加载环境纹理
const rgbeLoader = new RGBELoader()
rgbeLoader.load(
  '/texture/hdr/sky.hdr',
  (texture) => {
    texture.mapping = THREE.EquirectangularReflectionMapping  // 设置纹理映射
    scene.background = texture
    scene.environment = texture
  },
)
// 设置水面效果
const waterGeometry = new THREE.CircleGeometry(300, 32)
const water = new Water(waterGeometry, {
  textureWidth: 1024,
  textureHeight: 1024,
  color: 0xeeeeff,
  flowDirection: new THREE.Vector2(1, 1), //  waves direction
  scale: 100, //  wavesize
})
water.rotation.x = -Math.PI / 2
water.position.y = -0.4
scene.add(water)

// 6. --- 添加光源 ---
const light = new THREE.DirectionalLight(0xffffff, 1)
light.position.set(0, 50, 0)
scene.add(light)

// 创建点光源
const pointLight = new THREE.PointLight(0xffffff, 50)
pointLight.position.set(0.1, 2.4, 0)
pointLight.castShadow = true

// 创建点光源组
const pointLightGroup = new THREE.Group()
pointLightGroup.position.set(-8, 2.5, -1.5)
const radius = 3
const pointLightList = []

// 创建球体用于绑定光源 
const sphereGeometry = new THREE.SphereGeometry(0.2, 32, 32)
const sphereMaterial = new THREE.MeshStandardMaterial({
  color: 0xffffff,
  emissive: 0xffffff,
  emissiveIntensity: 10 // 亮度
})
for (let i = 0; i < 3; i++) {

  const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial)
  pointLightList.push(sphere);
  sphere.position.set(
    radius * Math.cos(i * 2 * Math.PI / 3),
    Math.cos(i * 2 * Math.PI / 3),
    radius * Math.sin(i * 2 * Math.PI / 3),
  )
  const pointLight = new THREE.PointLight(0xffffff, 50)
  sphere.add(pointLight) // 绑定点光源
  pointLightGroup.add(sphere)
}
scene.add(pointLightGroup)

// 使用补间函数，从0到2π，使小球旋转运动
const options = {
  angle: 0,
};
gsap.to(options, {
  angle: Math.PI * 2,
  duration: 10,
  repeat: -1,
  ease: "linear", // 这里要用双引号，不然要报错
  onUpdate: () => {
    pointLightGroup.rotation.y = options.angle;
    // 让球上下摆动
    pointLightList.forEach((item, index) => {
      item.position.set(
        radius * Math.cos(index * 2 * Math.PI / 3),
        Math.cos(index * 2 * Math.PI / 3 + options.angle * 5),
        radius * Math.sin(index * 2 * Math.PI / 3)
      )
    });
  },
})

// 7. --- 渲染 ---
const render = () => {
  requestAnimationFrame(render) // 请求动画帧
  renderer.render(scene, camera)
  controls.update()
}
render()

// 数组存储数据即交互逻辑
const scenes = [
  {
    text: '《认真的白学》',
    callback: () => {
      // 切换对应位置
      translateCamera(
        new THREE.Vector3(-3.23, 3, 4.06),
        new THREE.Vector3(-8, 2, 0)
      )
    }
  }, {

    text: '学下得那么深',
    callback: () => {
      // 切换对应位置
      translateCamera(
        new THREE.Vector3(7, 0, 23),
        new THREE.Vector3(0, 0, 0)
      )
    }
  }, {
    text: '学得那么认真',
    callback: () => {
      // 切换对应位置
      translateCamera(
        new THREE.Vector3(10, 3, 0),
        new THREE.Vector3(5, 2, 0)
      )
    }
  }, {
    text: '倒映出我躺在学中的伤痕',
    callback: () => {
      // 切换对应位置
      translateCamera(
        new THREE.Vector3(7, 0, 23),
        new THREE.Vector3(0, 0, 0)
      )
      // 爱心
      makeHeart()
    }
  }, {
    text: '完',
    callback: () => {
      // 切换对应位置
      translateCamera(
        new THREE.Vector3(-20, 1.3, 6.6),
        new THREE.Vector3(5, 2, 0)
      )
    }
  }
]

const index = ref(0)
// 监听鼠标滚轮事件
window.addEventListener('wheel', (e) => {
  if (e.deltaY > 0) {
    index.value++
    if (index.value >= scenes.length) {
      index.value = 0
      restoreHeart() // 复原
    }
  }
  scenes[index.value].callback()
},
  false
)

// 使用补间动画移动相机
let timeLine1 = gsap.timeline()
let timeLine2 = gsap.timeline()

// 相机的移动(position：移动的目标位置, target：看向的位置)
const translateCamera = (position, target) => {
  timeLine1.to(camera.position, {
    x: position.x,
    y: position.y,
    z: position.z,
    duration: 1,
    ease: "power2.inOut",
  })

  timeLine2.to(controls.target, {
    x: target.x,
    y: target.y,
    z: target.z,
    duration: 1,
    ease: "power2.inOut",
  })
}
console.log(scenes);

// 实例化满天星
const starsInstance = new THREE.InstancedMesh(
  new THREE.SphereGeometry(0.1, 32, 32),
  sphereMaterial,
  100
)

// 随机分布到天上
const starsArr = []
const endArr = []
for (let i = 0; i < 100; i++) {
  const x = (Math.random() - 0.5) * 100
  const y = (Math.random() - 0.5) * 100
  const z = (Math.random() - 0.5) * 100
  starsArr.push(new THREE.Vector3(x, y, z))
  const matrix = new THREE.Matrix4()
  matrix.setPosition(x, y, z)
  starsInstance.setMatrixAt(i, matrix)
}
scene.add(starsInstance)

// 创建爱心路径
const heartPath = new THREE.Shape()
heartPath.moveTo(25, 25)
heartPath.bezierCurveTo(25, 25, 20, 0, 0, 0)
heartPath.bezierCurveTo(-30, 0, -30, 35, -30, 35)
heartPath.bezierCurveTo(-30, 55, -10, 77, 25, 95)
heartPath.bezierCurveTo(60, 77, 80, 55, 80, 35)
heartPath.bezierCurveTo(80, 35, 80, 0, 50, 0)
heartPath.bezierCurveTo(35, 0, 25, 25, 25, 25)

// 根据爱心路径获取点
const center = new THREE.Vector3(0, 2, 10)
for (let i = 0; i < 100; i++) {
  const point = heartPath.getPoint(i / 100)
  endArr.push(new THREE.Vector3(
    point.x * 0.1 + center.x,
    point.y * 0.1 + center.y,
    center.z))
}

// 创建爱心动画
const makeHeart = () => {
  const params = {
    time: 0
  }

  gsap.to(params, {
    time: 1,
    duration: 1,
    onUpdate: () => {
      for (let i = 0; i < 100; i++) {
        const x = starsArr[i].x + (endArr[i].x - starsArr[i].x) * params.time
        const y = starsArr[i].y + (endArr[i].y - starsArr[i].y) * params.time
        const z = starsArr[i].z + (endArr[i].z - starsArr[i].z) * params.time
        const matrix = new THREE.Matrix4()
        matrix.setPosition(x, y, z)
        starsInstance.setMatrixAt(i, matrix)
      }
      starsInstance.instanceMatrix.needsUpdate = true
    }
  }
  )
}

// 爱心复原
const restoreHeart = () => {
  const params = {
    time: 0,
  };
  gsap.to(params,{
    time: 1,
    duration: 1,
    onUpdate: () => {
      for (let i = 0; i < 100; i++) {
        const x = starsArr[i].x + (starsArr[i].x - endArr[i].x) * params.time
        const y = starsArr[i].y + (starsArr[i].y - endArr[i].y) * params.time
        const z = starsArr[i].z + (starsArr[i].z - endArr[i].z) * params.time
        const matrix = new THREE.Matrix4()
        matrix.setPosition(x, y, z)
        starsInstance.setMatrixAt(i, matrix)
      }
      starsInstance.instanceMatrix.needsUpdate = true
    }
  })
}

onMounted(() => {
  demo.value.appendChild(renderer.domElement)
})

</script>

<template>
  <div ref="demo">
    <h1 style="padding: 100px 50px; font-size: 50px; color: #fff" class="text">
      {{ scenes[index].text }}
    </h1>
  </div>

</template>

<style scoped>
* {
  margin: 0;
  padding: 0;
}

canvas {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1;
}

.text {
  position: fixed;
  z-index: 2;
}
</style>

1.6.3. 老陈打码

<template>
  <div class="scenes" style="
      position: fixed;
      left: 0;
      top: 0;
      z-index: 10;
      pointer-events: none;
      transition: all 1s;
    " :style="{
      transform: `translate3d(0, ${-index * 100}vh, 0)`,
    }">
    <div v-for="item in scenes" style="width: 100vw; height: 100vh">
      <h1 style="padding: 100px 50px; font-size: 50px; color: #fff">
        {{ item.text }}
      </h1>
    </div>
  </div>
</template>

<script setup>
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";
import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader";
import { Water } from "three/examples/jsm/objects/Water2";
import gsap from "gsap";
import { ref } from "vue";

// 初始化场景
const scene = new THREE.Scene();
// 初始化相机
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);
camera.position.set(-3.23, 2.98, 4.06);
camera.updateProjectionMatrix();
// 初始化渲染器
const renderer = new THREE.WebGLRenderer({
  // 设置抗锯齿
  antialias: true,
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 设置色调映射
renderer.outputEncoding = THREE.sRGBEncoding;
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 0.5;
renderer.shadowMap.enabled = true;
renderer.physicallyCorrectLights = true;
// 设置水面效果

// 初始化控制器
const controls = new OrbitControls(camera, renderer.domElement);
controls.target.set(-8, 2, 0);
controls.enableDamping = true;

// 初始化loader
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath("./draco/");
const gltfLoader = new GLTFLoader();
gltfLoader.setDRACOLoader(dracoLoader);

// 加载环境纹理
let rgbeLoader = new RGBELoader();
rgbeLoader.load("./textures/sky.hdr", (texture) => {
  texture.mapping = THREE.EquirectangularReflectionMapping;
  scene.background = texture;
  scene.environment = texture;
});

// 加载模型
gltfLoader.load("./model/scene.glb", (gltf) => {
  const model = gltf.scene;
  model.traverse((child) => {
    if (child.name === "Plane") {
      child.visible = false;
    }
    if (child.isMesh) {
      child.castShadow = true;
      child.receiveShadow = true;
    }
  });
  scene.add(model);
});

// 创建水面
const waterGeometry = new THREE.CircleGeometry(300, 32);
const water = new Water(waterGeometry, {
  textureWidth: 1024,
  textureHeight: 1024,
  color: 0xeeeeff,
  flowDirection: new THREE.Vector2(1, 1),
  scale: 100,
});
water.rotation.x = -Math.PI / 2;
water.position.y = -0.4;
scene.add(water);

// 添加平行光
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(0, 50, 0);
scene.add(light);

// 添加点光源
const pointLight = new THREE.PointLight(0xffffff, 50);
pointLight.position.set(0.1, 2.4, 0);
pointLight.castShadow = true;
scene.add(pointLight);

// 创建点光源组
const pointLightGroup = new THREE.Group();
pointLightGroup.position.set(-8, 2.5, -1.5);
let radius = 3;
let pointLightArr = [];
for (let i = 0; i < 3; i++) {
  // 创建球体当灯泡
  const sphereGeometry = new THREE.SphereGeometry(0.2, 32, 32);
  const sphereMaterial = new THREE.MeshStandardMaterial({
    color: 0xffffff,
    emissive: 0xffffff,
    emissiveIntensity: 10,
  });
  const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
  pointLightArr.push(sphere);
  sphere.position.set(
    radius * Math.cos((i * 2 * Math.PI) / 3),
    Math.cos((i * 2 * Math.PI) / 3),
    radius * Math.sin((i * 2 * Math.PI) / 3)
  );

  let pointLight = new THREE.PointLight(0xffffff, 50);
  sphere.add(pointLight);

  pointLightGroup.add(sphere);
}
scene.add(pointLightGroup);

// 使用补间函数，从0到2π，使灯泡旋转
let options = {
  angle: 0,
};
gsap.to(options, {
  angle: Math.PI * 2,
  duration: 10,
  repeat: -1,
  ease: "linear",
  onUpdate: () => {
    pointLightGroup.rotation.y = options.angle;
    pointLightArr.forEach((item, index) => {
      item.position.set(
        radius * Math.cos((index * 2 * Math.PI) / 3),
        Math.cos((index * 2 * Math.PI) / 3 + options.angle * 5),
        radius * Math.sin((index * 2 * Math.PI) / 3)
      );
    });
  },
});
function render() {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
  controls.update();
}
render();

// 使用补间动画移动相机
let timeLine1 = gsap.timeline();
let timeline2 = gsap.timeline();

// 定义相机移动函数
function translateCamera(position, target) {
  timeLine1.to(camera.position, {
    x: position.x,
    y: position.y,
    z: position.z,
    duration: 1,
    ease: "power2.inOut",
  });

  timeline2.to(controls.target, {
    x: target.x,
    y: target.y,
    z: target.z,
    duration: 1,
    ease: "power2.inOut",
  });
}

let scenes = [
  {
    text: "圣诞快乐",
    callback: () => {
      // 执行函数切换位置
      translateCamera(
        new THREE.Vector3(-3.23, 3, 4.06),
        new THREE.Vector3(-8, 2, 0)
      );
    },
  },
  {
    text: "感谢在这么大的世界里遇见了你",
    callback: () => {
      // 执行函数切
      translateCamera(new THREE.Vector3(7, 0, 23), new THREE.Vector3(0, 0, 0));
    },
  },
  {
    text: "愿与你探寻世界的每一个角落",
    callback: () => {
      // 执行函数切
      translateCamera(new THREE.Vector3(10, 3, 0), new THREE.Vector3(5, 2, 0));
    },
  },
  {
    text: "愿将天上的星星送给你",
    callback: () => {
      // 执行函数切
      translateCamera(new THREE.Vector3(7, 0, 23), new THREE.Vector3(0, 0, 0));
      makeHeart();
    },
  },
  {
    text: "愿疫情结束，大家健康快乐！",
    callback: () => {
      // 执行函数切
      translateCamera(
        new THREE.Vector3(-20, 1.3, 6.6),
        new THREE.Vector3(5, 2, 0)
      );
    },
  },
];

let index = ref(0);
let isAnimate = false;
// 监听鼠标滚轮事件
window.addEventListener(
  "wheel",
  (e) => {
    if (isAnimate) return;
    isAnimate = true;
    if (e.deltaY > 0) {
      index.value++;
      if (index.value > scenes.length - 1) {
        index.value = 0;
        restoreHeart();
      }
    }
    scenes[index.value].callback();
    setTimeout(() => {
      isAnimate = false;
    }, 1000);
  },
  false
);

// 实例化创建漫天星星
let starsInstance = new THREE.InstancedMesh(
  new THREE.SphereGeometry(0.1, 32, 32),
  new THREE.MeshStandardMaterial({
    color: 0xffffff,
    emissive: 0xffffff,
    emissiveIntensity: 10,
  }),
  100
);

// 星星随机到天上
let starsArr = [];
let endArr = [];

for (let i = 0; i < 100; i++) {
  let x = Math.random() * 100 - 50;
  let y = Math.random() * 100 - 50;
  let z = Math.random() * 100 - 50;
  starsArr.push(new THREE.Vector3(x, y, z));

  let matrix = new THREE.Matrix4();
  matrix.setPosition(x, y, z);
  starsInstance.setMatrixAt(i, matrix);
}
scene.add(starsInstance);

// 创建爱心路径
let heartShape = new THREE.Shape();
heartShape.moveTo(25, 25);
heartShape.bezierCurveTo(25, 25, 20, 0, 0, 0);
heartShape.bezierCurveTo(-30, 0, -30, 35, -30, 35);
heartShape.bezierCurveTo(-30, 55, -10, 77, 25, 95);
heartShape.bezierCurveTo(60, 77, 80, 55, 80, 35);
heartShape.bezierCurveTo(80, 35, 80, 0, 50, 0);
heartShape.bezierCurveTo(35, 0, 25, 25, 25, 25);

// 根据爱心路径获取点
let center = new THREE.Vector3(0, 2, 10);
for (let i = 0; i < 100; i++) {
  let point = heartShape.getPoint(i / 100);
  endArr.push(
    new THREE.Vector3(
      point.x * 0.1 + center.x,
      point.y * 0.1 + center.y,
      center.z
    )
  );
}

// 创建爱心动画
function makeHeart() {
  let params = {
    time: 0,
  };

  gsap.to(params, {
    time: 1,
    duration: 1,
    onUpdate: () => {
      for (let i = 0; i < 100; i++) {
        let x = starsArr[i].x + (endArr[i].x - starsArr[i].x) * params.time;
        let y = starsArr[i].y + (endArr[i].y - starsArr[i].y) * params.time;
        let z = starsArr[i].z + (endArr[i].z - starsArr[i].z) * params.time;
        let matrix = new THREE.Matrix4();
        matrix.setPosition(x, y, z);
        starsInstance.setMatrixAt(i, matrix);
      }
      starsInstance.instanceMatrix.needsUpdate = true;
    },
  });
}

function restoreHeart() {
  let params = {
    time: 0,
  };

  gsap.to(params, {
    time: 1,
    duration: 1,
    onUpdate: () => {
      for (let i = 0; i < 100; i++) {
        let x = endArr[i].x + (starsArr[i].x - endArr[i].x) * params.time;
        let y = endArr[i].y + (starsArr[i].y - endArr[i].y) * params.time;
        let z = endArr[i].z + (starsArr[i].z - endArr[i].z) * params.time;
        let matrix = new THREE.Matrix4();
        matrix.setPosition(x, y, z);
        starsInstance.setMatrixAt(i, matrix);
      }
      starsInstance.instanceMatrix.needsUpdate = true;
    },
  });
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
}

canvas {
  width: 100vw;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
}
</style>

2. 汽车展示

2.1. 项目搭建

基础代码

<script setup>
import { ref, onMounted } from 'vue'
import * as THREE from "three"
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js"  // 轨道控制器

const demo = ref(null)
// 1. --- 创建场景 ---
const scene = new THREE.Scene()

// 2. --- 创建相机 ---
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
)
camera.position.set(0, 2, 6) // 相机位置
camera.updateProjectionMatrix() // 更新投影矩阵

// 3. --- 创建渲染器 ---
const renderer = new THREE.WebGLRenderer({
  antialias: true, // 开启抗锯齿
})
renderer.setSize(window.innerWidth, window.innerHeight)
// 渲染函数
const render = () => {
  renderer.render(scene, camera)
  controls && controls.update()
  requestAnimationFrame(render) // 渲染下一帧
}
// 挂载到dom中
onMounted(() => {
  demo.value.appendChild(renderer.domElement) // 将渲染器添加到场景中
  renderer.setClearColor("#000")
  scene.background = new THREE.Color("#ccc")
  scene.environment = new THREE.Color("#ccc")
  const grid = new THREE.GridHelper(10, 10)// 添加网格地面 
  grid.material.transparent = true
  grid.material.opacity = 0.2
  scene.add(grid)
  render() // 调用渲染函数
})

// 4. --- 添加控制器 ---
const controls = new OrbitControls(camera, renderer.domElement)
controls.update()

// 5. ---窗口大小调整 ---
window.addEventListener("resize", () => {
  renderer.setSize(window.innerWidth, window.innerHeight)
  camera.aspect = window.innerWidth / window.innerHeight
  camera.updateProjectionMatrix()
})

</script>

<template>
  <div ref="demo"></div>
</template>

<style scoped>
* {
  margin: 0;
  padding: 0;
}

canvas {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1;
}
</style>

模型准备
1. 准备draco文件夹，将其复制到public文件夹下
2. 准备汽车模型car.glb，放到相应文件夹下
效果图：

2.2. 模型与灯光

模型加载

import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js' // 导入Draco加载器
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js' // 导入gltf加载器
...
// 模型载入
const loader = new GLTFLoader()
const dracoLoader = new DRACOLoader()
dracoLoader.setDecoderPath("/draco/") // 设置draco解码器路径
loader.setDRACOLoader(dracoLoader) // 绑定draco解码器
loader.load("/model/car.glb", (gltf) => {
  scene.add(gltf.scene)
})

效果图：

在这里插入图片描述

因为模型为物理材质，需要光才能看见模型颜色

添加灯光

// 添加灯光
const light1 = new THREE.DirectionalLight(0xffffff, 1)  
light1.position.set(0, 0, 10)
const light2 = new THREE.DirectionalLight(0xffffff, 1)  
light2.position.set(0, 0, -10)
const light3 = new THREE.DirectionalLight(0xffffff, 1)  
light3.position.set(10, 0, 0)
const light4 = new THREE.DirectionalLight(0xffffff, 1)  
light4.position.set(-10, 0, 0)
const light5 = new THREE.DirectionalLight(0xffffff, 1)  
light5.position.set(0, 10, 0)
const light6 = new THREE.DirectionalLight(0xffffff, 1)  
light6.position.set(5, 10, 0)
const light7 = new THREE.DirectionalLight(0xffffff, 1) 
light7.position.set(0, 10, 5)
const light8 = new THREE.DirectionalLight(0xffffff, 1)  
light8.position.set(0, 10,-5)
const light9 = new THREE.DirectionalLight(0xffffff, 1)  
light9.position.set(-5, 10, 0)
scene.add(light1, light2, light3, light4, light5, light6, light7, light8, light9)

效果图：

在这里插入图片描述

2.3. 车身材质

模型组成

打印gltf.scene，发现汽车是由66个模型组成，接下来我们对这些物体进行设置，来完成对模型的操作
```
loader.load("/model/car.glb", (gltf) => {
  scene.add(gltf.scene)
  console.log(gltf);
})
```

获取模型名字（仅作为参考，最好在3D建模软件导出时就取好名字）

loader.load("/model/car.glb", (gltf) => {
  const car = gltf.scene
  car.traverse((child) => {
    if (child.isMesh) {
      console.log(child.name);
    }
  })
  scene.add(car)
})

在这里插入图片描述

创建变量存储材质

// - 创建材质 -
// 车身材质
const bodyMaterial = new THREE.MeshPhysicalMaterial({
  color: 0xff0000,
  metalness: 1,
  roughness: 0.5,
  clearcoat: 1,
  clearcoatRoughness: 0
})
// 前部车身材质
const frontMaterial = new THREE.MeshPhysicalMaterial({
  color: 0xff0000,
  metalness: 1,
  roughness: 0.5,
  clearcoat: 1,
  clearcoatRoughness: 0
})

// 车的轮毂
const wheelMaterial = new THREE.MeshPhysicalMaterial({
  color: 0xff0000,
  metalness: 1,
  roughness: 0.1,
})

// 车玻璃
const glassMaterial = new THREE.MeshPhysicalMaterial({
  color: 0xffffff,
  metalness: 0,
  roughness: 0,
  transmission: 1,
  transparent: true
})

// 引擎盖
const hoodMaterial = new THREE.MeshPhysicalMaterial({
  color: 0xff0000,
  metalness: 1,
  roughness: 0.5,
  clearcoat: 1,
  clearcoatRoughness: 0
})

对车的各个部位模型进行赋值

loader.load("/model/car.glb", (gltf) => {
  const car = gltf.scene
  car.traverse((child) => {
    if (child.isMesh) {
      // 判断是否是轮毂
      if (child.name.includes("轮毂")) {
        child.material = wheelMaterial
        wheels.push(child)
      }
      // 判断是否是车身主体
      else if (child.name.includes("Mesh002")) {
        carBody = child
        carBody.material = bodyMaterial
      }
      // 判断是否是前部车身
      else if (child.name.includes("前脸")) {
        frontCar = child
        frontCar.material = frontMaterial
      }
      // 是否是引擎盖
      else if (child.name.includes("引擎盖_1")) {
        hoodCar = child
        hoodCar.material = hoodMaterial
      }
      // 是否是挡风玻璃
      else if (child.name.includes("挡风玻璃")) {
        glassCar = child
        glassCar.material = glassMaterial
      }
    }
  })
  scene.add(car)
})

效果图：

在这里插入图片描述

2.4. 材质切换

静态页面改变(我用了scss，如果要像我这样使用，请安装相应依赖)

<template>
  <div ref="demo">
    <div class="menu">
      <div class="title">
        <h1>汽车展示与选配</h1>
      </div>
      <!-- 车身颜色 -->
      <h2>请选择车身颜色</h2>
      <div class="select">
        <div class="option" v-for="(item, index) in colors" :key="index" @click="selectColor(index)">
          <div class="option-color" :style="{ background: item }" />
        </div>
      </div>
      <!-- 贴膜材质 -->
      <h2>请选择贴膜材质</h2>
      <div class="select">
        <div class="option" v-for="(item, index) in materials" :key="index" @click="selectMaterial(index)">
          <button class="option-material" :style="{ background: item }">{{ item.name }}</button>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
* {
  margin: 0;
  padding: 0;
}

canvas {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1;
}

.menu {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 2;

  .select {
    display: inline-block;
    display: flex;

    .option {
      display: flex;

      .option-color {
        width: 30px;
        height: 30px;
        border: 1px solid #ccc;
        margin: 10px;
        display: inline-block;
        cursor: pointer;
        border-radius: 10px;
      }
    }
  }
}
</style>

颜色切换

// 设置颜色数组
const colors = ["red", "yellow", "blue", "green",
  "orange", "pink", "purple", "white", "black", "gray"]
...

// 颜色选择函数
const selectColor = (index) => {
  bodyMaterial.color.set(colors[index])
  frontMaterial.color.set(colors[index])
  glassMaterial.color.set(colors[index])
  hoodMaterial.color.set(colors[index])
  wheelMaterial.color.set(colors[index])
}

贴膜材质切换

// 设置贴膜数组
const materials = [
  { name: '磨砂', value: 1 },
  { name: '冰晶', value: 0 }
]
...
// 材质选择函数
const selectMaterial = (index) => {
  bodyMaterial.clearcoatRoughness = materials[index].value
  frontMaterial.clearcoatRoughness = materials[index].value
  hoodMaterial.clearcoatRoughness = materials[index].value
  wheelMaterial.clearcoatRoughness = materials[index].value
}

效果图：

黄色冰晶
绿色磨砂

2.5. 源码奉上

2.5.1.我的代码

<script setup>
import { ref, onMounted } from 'vue'
import * as THREE from "three"
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js"  // 轨道控制器
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js' // 导入Draco加载器
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js' // 导入gltf加载器

const demo = ref(null)
// 1. --- 创建场景 ---
const scene = new THREE.Scene()

// - 模型 -
const wheels = [] // 轮子
let carBody,  // 主体车身
  frontCar, // 前部车身
  hoodCar,  // 引擎盖
  glassCar // 挡风玻璃

// - 创建材质 -
// 车身材质
const bodyMaterial = new THREE.MeshPhysicalMaterial({
  color: 0xff0000,
  metalness: 1,
  roughness: 0.5,
  clearcoat: 1,
  clearcoatRoughness: 0
})

// 设置颜色数组
const colors = ["red", "yellow", "blue", "green",
  "orange", "pink", "purple", "white", "black", "gray"]

// 设置贴膜数组
const materials = [
  { name: '磨砂', value: 1 },
  { name: '冰晶', value: 0 }
]

// 前部车身材质
const frontMaterial = new THREE.MeshPhysicalMaterial({
  color: 0xff0000,
  metalness: 1,
  roughness: 0.5,
  clearcoat: 1,
  clearcoatRoughness: 0
})

// 车的轮毂
const wheelMaterial = new THREE.MeshPhysicalMaterial({
  color: 0xff0000,
  metalness: 1,
  roughness: 0.1,
})

// 车玻璃
const glassMaterial = new THREE.MeshPhysicalMaterial({
  color: 0xffffff,
  metalness: 0,
  roughness: 0,
  transmission: 1,
  transparent: true
})

// 引擎盖
const hoodMaterial = new THREE.MeshPhysicalMaterial({
  color: 0xff0000,
  metalness: 1,
  roughness: 0.5,
  clearcoat: 1,
  clearcoatRoughness: 0
})


// 2. --- 创建相机 ---
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
)
camera.position.set(0, 2, 6) // 相机位置
camera.updateProjectionMatrix() // 更新投影矩阵

// 3. --- 创建渲染器 ---
const renderer = new THREE.WebGLRenderer({
  antialias: true, // 开启抗锯齿
})
renderer.setSize(window.innerWidth, window.innerHeight)
// 渲染函数
const render = () => {
  renderer.render(scene, camera)
  controls && controls.update()
  requestAnimationFrame(render) // 渲染下一帧
}
// 挂载到dom中
onMounted(() => {
  demo.value.appendChild(renderer.domElement) // 将渲染器添加到场景中
  renderer.setClearColor("#000")
  scene.background = new THREE.Color("#ccc")
  scene.environment = new THREE.Color("#ccc")
  const grid = new THREE.GridHelper(10, 10)// 添加网格地面 
  grid.material.transparent = true
  grid.material.opacity = 0.2
  scene.add(grid)
  render() // 调用渲染函数
})

// 4. --- 添加控制器 ---
const controls = new OrbitControls(camera, renderer.domElement)
controls.update()

// 模型载入
const loader = new GLTFLoader()
const dracoLoader = new DRACOLoader()
dracoLoader.setDecoderPath("/draco/") // 设置draco解码器路径
loader.setDRACOLoader(dracoLoader) // 绑定draco解码器
loader.load("/model/car.glb", (gltf) => {
  const car = gltf.scene
  car.traverse((child) => {
    if (child.isMesh) {
      // 判断是否是轮毂
      if (child.name.includes("轮毂")) {
        child.material = wheelMaterial
        wheels.push(child)
      }
      // 判断是否是车身主体
      else if (child.name.includes("Mesh002")) {
        carBody = child
        carBody.material = bodyMaterial
      }
      // 判断是否是前部车身
      else if (child.name.includes("前脸")) {
        frontCar = child
        frontCar.material = frontMaterial
      }
      // 是否是引擎盖
      else if (child.name.includes("引擎盖_1")) {
        hoodCar = child
        hoodCar.material = hoodMaterial
      }
      // 是否是挡风玻璃
      else if (child.name.includes("挡风玻璃")) {
        glassCar = child
        glassCar.material = glassMaterial
      }
    }
  })
  scene.add(car)
})

// 添加灯光
const light1 = new THREE.DirectionalLight(0xffffff, 1)
light1.position.set(0, 0, 10)
const light2 = new THREE.DirectionalLight(0xffffff, 1)
light2.position.set(0, 0, -10)
const light3 = new THREE.DirectionalLight(0xffffff, 1)
light3.position.set(10, 0, 0)
const light4 = new THREE.DirectionalLight(0xffffff, 1)
light4.position.set(-10, 0, 0)
const light5 = new THREE.DirectionalLight(0xffffff, 1)
light5.position.set(0, 10, 0)
const light6 = new THREE.DirectionalLight(0xffffff, 1)
light6.position.set(5, 10, 0)
const light7 = new THREE.DirectionalLight(0xffffff, 1)
light7.position.set(0, 10, 5)
const light8 = new THREE.DirectionalLight(0xffffff, 1)
light8.position.set(0, 10, -5)
const light9 = new THREE.DirectionalLight(0xffffff, 1)
light9.position.set(-5, 10, 0)
scene.add(light1, light2, light3, light4, light5, light6, light7, light8, light9)

// 5. ---窗口大小调整 
window.addEventListener("resize", () => {
  renderer.setSize(window.innerWidth, window.innerHeight)
  camera.aspect = window.innerWidth / window.innerHeight
  camera.updateProjectionMatrix()
})

// 颜色选择函数
const selectColor = (index) => {
  bodyMaterial.color.set(colors[index])
  frontMaterial.color.set(colors[index])
  glassMaterial.color.set(colors[index])
  hoodMaterial.color.set(colors[index])
  wheelMaterial.color.set(colors[index])
}

// 材质选择函数
const selectMaterial = (index) => {
  bodyMaterial.clearcoatRoughness = materials[index].value
  frontMaterial.clearcoatRoughness = materials[index].value
  hoodMaterial.clearcoatRoughness = materials[index].value
  wheelMaterial.clearcoatRoughness = materials[index].value
}
</script>

<template>
  <div ref="demo">
    <div class="menu">
      <div class="title">
        <h1>汽车展示与选配</h1>
      </div>
      <!-- 车身颜色 -->
      <h2>请选择车身颜色</h2>
      <div class="select">
        <div class="option" v-for="(item, index) in colors" :key="index" @click="selectColor(index)">
          <div class="option-color" :style="{ background: item }" />
        </div>
      </div>
      <!-- 贴膜材质 -->
      <h2>请选择贴膜材质</h2>
      <div class="select">
        <div class="option" v-for="(item, index) in materials" :key="index" @click="selectMaterial(index)">
          <button class="option-material" :style="{ background: item }">{{ item.name }}</button>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
* {
  margin: 0;
  padding: 0;
}

canvas {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1;
}

.menu {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 2;

  .title {}

  .select {
    display: inline-block;
    display: flex;


    .option {
      display: flex;

      .option-color {
        width: 30px;
        height: 30px;
        border: 1px solid #ccc;
        margin: 10px;
        display: inline-block;
        cursor: pointer;
        border-radius: 10px;
      }
    }
  }
}
</style>

2.5.2.老陈打码

<template>
  <div class="home">
    <div class="canvas-container" ref="canvasDom"></div>

    <div class="home-content">
      <div class="home-content-title">
        <h1>汽车展示与选配</h1>
      </div>
      <h2>选择车身颜色</h2>
      <div class="select">
        <div
          class="select-item"
          v-for="(item, index) in colors"
          :key="index"
          @click="selectColor(index)"
        >
          <div
            class="select-item-color"
            :style="{ backgroundColor: item }"
          ></div>
        </div>
      </div>

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

<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(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);
camera.position.set(0, 2, 6);
// 创建渲染器
const renderer = new THREE.WebGLRenderer({
  // 抗锯齿
  antialias: true,
});
renderer.setSize(window.innerWidth, window.innerHeight);

const render = () => {
  renderer.render(scene, camera);
  controls && controls.update();
  requestAnimationFrame(render);
};

let wheels = [];
let carBody, frontCar, hoodCar, glassCar;
// 创建材质
const bodyMaterial = new THREE.MeshPhysicalMaterial({
  color: 0xff0000,
  metalness: 1,
  roughness: 0.5,
  clearcoat: 1,
  clearcoatRoughness: 0,
});

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,
  roughness: 0,
  transmission: 1,
  transparent: true,
});

let colors = ["red", "blue", "green", "gray", "orange", "purple"];

let selectColor = (index) => {
  bodyMaterial.color.set(colors[index]);
  frontMaterial.color.set(colors[index]);
  hoodMaterial.color.set(colors[index]);
  wheelsMaterial.color.set(colors[index]);
  // glassMaterial.color.set(colors[index]);
};

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("#ccc");
  scene.environment = new THREE.Color("#ccc");
  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/bmw01.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("轮毂")) {
        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: 0;
  right: 20px;
}

.select-item-color {
  width: 50px;
  height: 50px;
  border: 1px solid #ccc;
  margin: 10px;
  display: inline-block;
  cursor: pointer;
  border-radius: 10px;
}
.select {
  display: flex;
}
</style>