Threejs项目实战之一：汽车外观换肤效果三维展示

目录

• 最终效果
• 1 创建项目
• 2 安装插件
• 3 编写代码
• • 3.1 准备工作
  • 3.2 代码编写
  • • 3.2.1 在template标签中构建html页面
    • 3.2.2 在style标签中构建页面样式文件
    • 3.2.3 在script标签中编写js代码

最终效果

先看下最终实现的效果

在这里插入图片描述

接下来，我们就从创建项目开始，一步一步实现这个效果

1 创建项目

• D盘Project文件夹下新建一个文件夹vite-vue-bmw，鼠标右键点击新建的文件夹，使用vscode打开
• 在vscode中使用快捷键Ctrl+Shift+~打开终端，在终端中使用vite构建工具创建项目，输入pnpm create vite bmw-app --template vue创建项目
• 创建成功后，在终端中输入cd bmw-app进入文件夹
• 输入pnpm i 安装依赖包
• 安装完成后，输入pnpm run div 启动项目，打开浏览器，可以看到系统默认的页面，说明项目环境搭建成功

在这里插入图片描述

2 安装插件

在控制终端中输入pnpm i three安装threejs插件，安装完成后，我们可以通过在App.vue中使用import引入threejs，然后通过控制台打印的方式验证threejs是否安装成功 引用代码如下：在script标签中添加如下代码

<script setup> 
import * as THREE from 'three'//导入three.js核心库
console.log(THREE) 
</script>

刷新浏览器，打开开发者工具，可以看到控制台已经输出了Module对象，说明threejs已经正确安装，可以在项目中使用了

在这里插入图片描述

3 编写代码

3.1 准备工作

删除vite构建工具为我们自动创建的代码，清空App.vue中的style标签样式

清空style.css中的样式，设置如下像素

*{
     
  margin: 0;
  padding: 0;
  list-style: none;
}

删除vite构建工具为我们创建的components文件夹下的HelloWorld.vue文件

3.2 代码编写

3.2.1 在template标签中构建html页面

在components文件夹下新建CarView.vue文件

在CarView.vue文件的template标签中创建HTML标签，构建HTML页面

在template标签中创建一个div，设置id为scene，作为threejs的容器

<template>
<div id="scene"></div>
</template>

创建5个div标签，作为车辆颜色选择的按钮使用，代码如下

<template>
  <div id="scene"></div>
  <div class="car-color">
    <div class="color1">
      <div class="color-white" @click="setCarColor('#c0c0c0')"> 
      </div>
      <span>亮银色</span>
    </div>
    <div class="color1">
      <div class="color-blank" @click="setCarColor('#222')"> 
      </div>
      <span>星际黑</span>
    </div>
    <div class="color1">
      <div class="color-red" @click="setCarColor('#ff0000')"> 
      </div>
      <span>中国红</span>
    </div>
    <div class="color1">
      <div class="color-green" @click="setCarColor('#9dc209')"