• 3D模型下载地址 https://www.3dxy.com/3dmodel/pt-7.html

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

<script>
import * as Three from 'Three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js'
import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader.js'
import { ColladaLoader } from 'three/examples/jsm/loaders/ColladaLoader'
import { GUI } from 'three/examples/jsm/libs/dat.gui.module.js'
export default {
  data () {
    return {

    }
  },
  setup () {
    let mesh
    let meshDAE
    let plane
    let camera
    let scene
    let gui
    let renderer

    // 创建场景
    const createScene = () => {
      scene = new Three.Scene()
    }
    // 加载OBJ模型
    const loadOBJ = () => {
      const mtlLoader = new MTLLoader()
      const loader = new OBJLoader()
      mtlLoader.load('/model/obj/file.mtl', function (material) {
        // 预加载
        material.preload()

        // 设置当前加载的纹理
        loader.setMaterials(material)
        loader.load('/model/obj/file.obj', loadedMesh => {
          // 创建材质 覆写材质可改变颜色
          /* const material = new Three.MeshStandardMaterial({
            color: '#F3F3F3',
            metalness: 0.4,
            roughness: 0.1
          })
          // 给几何体成员赋该材质
          loadedMesh.children.forEach(child => {
            child.material = material
            child.geometry.computeFaceNormals()
            child.geometry.computeVertexNormals()
          }) */
          mesh = loadedMesh
          // 添加到场景
          scene.add(mesh)
        }, (xhr) => {
          // 加载进度
          if (xhr.lengthComputable) {
            const percentComplete = xhr.loaded / xhr.total * 100
            console.log(Math.round(percentComplete, 2) + '%')
          }
        })
      })

      // 地板
      plane = new Three.Mesh(new Three.PlaneBufferGeometry(2000, 2000), new Three.MeshPhongMaterial({ color: 0xffffff, depthWrite: false }))
      plane.rotation.x = -Math.PI / 2
      plane.receiveShadow = true
      scene.add(plane)
    }

    // 加载dae模型
    const loadDAE = () => {
      const loader = new ColladaLoader()

      loader.load('/model/dae/file.dae', function (result) {
        meshDAE = result.scene.children[0].clone()
        scene.add(meshDAE)
      }, (xhr) => {
        // 加载进度
        if (xhr.lengthComputable) {
          const percentComplete = xhr.loaded / xhr.total * 100
          console.log(Math.round(percentComplete, 2) + '%--DEA')
        }
      })
    }

    // 初始化dat.GUI简化试验流程
    const initGui = () => {
      // 声明一个保存需求修改的相关数据的对象
      gui = {
      }
      const datGui = new GUI()
      console.log(datGui, gui)
      // 将设置属性添加到gui当中，gui.add(对象，属性，最小值，最大值）
    }

    // 创建光源
    const createLight = () => {
      // 环境光
      const ambientLight = new Three.AmbientLight(0xffffff, 0.3) // 创建环境光
      scene.add(ambientLight) // 将环境光添加到场景

      const spotLight = new Three.SpotLight('#ffffff', 0.7) // 创建聚光灯
      spotLight.position.set(1600, 1660, 100)
      spotLight.castShadow = true
      scene.add(spotLight)
    }
    // 创建相机
    const createCamera = () => {
      const width = window.innerWidth // 窗口宽度
      const height = window.innerHeight // 窗口高度
      const k = width / height // 窗口宽高比
      camera = new Three.PerspectiveCamera(75, k, 0.1, 1000)

      camera.position.set(400, 400, 100)
      camera.lookAt(scene.position)
      scene.add(camera)
    }
    // 创建渲染器
    const createRender = () => {
      renderer = new Three.WebGLRenderer({ antialias: true, alpha: true })
      renderer.setSize(window.innerWidth, window.innerHeight)
      renderer.shadowMap.enabled = true // 显示阴影
      renderer.shadowMap.type = Three.PCFSoftShadowMap
      renderer.setClearColor('#000000') // 设置背景颜色
      document.body.appendChild(renderer.domElement)
    }

    const render = () => {
      // if (mesh) {
      //   mesh.rotation.y += 0.005
      // }
      renderer.render(scene, camera)
      requestAnimationFrame(render)
    }
    // 创建控件对象
    const createControls = () => {
      // eslint-disable-next-line no-new
      new OrbitControls(camera, renderer.domElement)
    }

    // 窗口自适应
    const resize = () => {
      window.addEventListener('resize', () => {
        // 初始化摄像机
        camera.aspect = window.innerWidth / window.innerHeight
        camera.updateProjectionMatrix()

        // 初始化渲染器尺寸
        renderer.setSize(window.innerWidth, window.innerHeight)
      })
    }

    // 初始化
    const init = () => {
      createScene() // 创建场景
      initGui() // 试验流程
      loadOBJ() // 加载OBJ模型
      loadDAE() // 加载DAE模型
      createCamera() // 创建相机
      createLight() // 创建光源
      createRender() // 创建渲染器
      createControls() // 创建控件对象
      render() // 渲染
      resize() // 自适应
    }
    init()
  }
}
</script>

这里还存在一些问题 就是材质上的雪花斑 还有对应 轮胎材质的颜色纹理 还不知道如何加载上去