vite+vue3+ts+Threejs 实现web3D车展，并可切换颜色

<template><div><div class="header-box"><span>改变车身颜色：</span><el-color-picker v-model="cheshenColor" @change="changeCheShenColor" /></div><div class="container" ref="container"></div></div>
</template><script setup lang="ts">
import { ref, onMounted } from 'vue'
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
import { TextureLoader } from 'three'const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(90,window.innerWidth / window.innerHeight,0.1,100
)
camera.position.set(-2.8, 1.5, 2.8)const renderer = new THREE.WebGL1Renderer()
renderer.setSize(window.innerWidth, window.innerHeight)
const container = ref()
const cheshenColor = ref()
const allTexture: any = {}
let smart_cheshen: anyconst render = () => {renderer.render(scene, camera)requestAnimationFrame(render)
}const loadAllTexture = (cb: any) => {let loadIndex = 0const textures = ['skymap2','skymap','shache_occ','shache_nor','shache_col','neishi_occ','neishi_nor','mennei_col','luntai_nor','luntai_col','lungu_occ','lungu_nor','lungu_col','linjian_occ','linjian_nor','linjian_col','floor','deng_occ','deng_nor','deng_col','cheshen_occ','cheshen_nor','chejia_occ','chejia_nor','chedengzhao_nor']const loadNextTexture = () => {const textureName = textures[loadIndex]loadTexture(`./imgs/car/images/textures/${textureName}.jpg`,(texture: string) => {allTexture[textureName] = { texture: texture }if (loadIndex < textures.length - 1) {loadIndex++loadNextTexture()} else {if (cb) cb()}})}loadNextTexture()
}const loadTexture = (filepath: string, cb: any) => {const textureLoader = new TextureLoader()textureLoader.load(filepath, cb)
}const loadCarModel = () => {const loader = new GLTFLoader()// 导入模型loader.load('./imgs/car/images/model.gltf', (gltf) => {scene.add(gltf.scene)// 添加贴图for (let i = 0; i < gltf.scene.children[0].children.length; i++) {const child: any = gltf.scene.children[0].children[i]if (child.name == 'smart_lungu0' ||child.name == 'smart_lungu1' ||child.name == 'smart_lungu2' ||child.name == 'smart_lungu3') {child.material = new THREE.MeshStandardMaterial()child.material.map = allTexture['lungu_col'].texturechild.material.normalMap = allTexture['lungu_nor'].texturechild.material.aoMap = allTexture['lungu_occ'].texture} else if (child.name == 'smart_chelun0' ||child.name == 'smart_chelun1' ||child.name == 'smart_chelun2' ||child.name == 'smart_chelun3') {child.material = new THREE.MeshStandardMaterial()child.material.map = allTexture['luntai_col'].texturechild.material.normalMap = allTexture['luntai_nor'].texture} else if (child.name == 'smart_cheshen') {smart_cheshen = childchild.material = new THREE.MeshStandardMaterial()child.material.color = new THREE.Color(0x70631b)child.material.metalness = 0.44child.material.roughness = 0child.material.normalMap = allTexture['cheshen_nor'].texturechild.material.aoMap = allTexture['cheshen_occ'].texturechild.material.envMap = allTexture['skymap2'].texturechild.material.envMap.mapping = THREE.EquirectangularReflectionMappingchild.material.envMapIntensity = 1} else if (child.name == 'smart_chejia') {child.material = new THREE.MeshStandardMaterial()child.material.color = new THREE.Color(0x252929)child.material.metalness = 0.44child.material.roughness = 0.4child.material.normalMap = allTexture['chejia_nor'].texturechild.material.aoMap = allTexture['chejia_occ'].texture} else if (child.name == 'smart_boli') {child.material = new THREE.MeshPhongMaterial()child.material.color = new THREE.Color(0x333333)child.material.transparent = truechild.material.opacity = 0.2child.material.envMap = allTexture['skymap2'].texturechild.material.envMap.mapping = THREE.EquirectangularReflectionMappingchild.material.envMapIntensity = 1} else if (child.name == 'smart_tianchuang') {child.material = new THREE.MeshPhongMaterial()child.material.color = new THREE.Color(0x000000)child.material.transparent = truechild.material.opacity = 0.5child.material.envMap = allTexture['skymap2'].texturechild.material.envMap.mapping = THREE.EquirectangularReflectionMappingchild.material.envMapIntensity = 1} else if (child.name == 'smart_shachepan') {child.material = new THREE.MeshStandardMaterial()child.material.color = new THREE.Color(0xf2f2f2)child.material.emissive = new THREE.Color(0x000000)child.material.metalness = 0.5child.material.roughness = 0.62child.material.map = allTexture['shache_col'].texturechild.material.normalMap = allTexture['shache_nor'].texturechild.material.aoMap = allTexture['shache_occ'].texture} else if (child.name == 'smart_neishi' ||child.name == 'smart_neishi2') {//child.material = new THREE.MeshPhongMaterial()child.material.color = new THREE.Color(0x333333)child.material.emissive = new THREE.Color(0x000000)child.material.normalMap = allTexture['neishi_nor'].texturechild.material.aoMap = allTexture['neishi_occ'].texture} else if (child.name == 'smart_neibao') {child.material = new THREE.MeshPhongMaterial()child.material.color = new THREE.Color(0x2e2e2e)child.material.map = allTexture['mennei_col'].texture} else if (child.name == 'smart_linjian') {child.material = new THREE.MeshStandardMaterial()child.material.color = new THREE.Color(0x2e2e2e)child.material.metalness = 0.5child.material.roughness = 0.62child.material.map = allTexture['linjian_col'].texturechild.material.normalMap = allTexture['linjian_nor'].texturechild.material.aoMap = allTexture['linjian_occ'].texture} else if (child.name == 'smart_daochejing') {child.material = new THREE.MeshPhongMaterial()child.material.color = new THREE.Color(0xffffff)} else if (child.name == 'smart_bolinei') {child.material = new THREE.MeshPhongMaterial()child.material.color = new THREE.Color(0x333333)} else if (child.name == 'smart_chedeng' ||child.name == 'smart_shachedeng' ||child.name == 'smart_wudeng') {child.material = new THREE.MeshStandardMaterial()child.material.color = new THREE.Color(0xffffff)child.material.emissive = new THREE.Color(0x333333)child.material.metalness = 1.0child.material.roughness = 0.4child.material.normalMap = allTexture['deng_nor'].texture} else if (child.name == 'smart_chedengzhao') {child.material = new THREE.MeshPhongMaterial()child.material.color = new THREE.Color(0xffffff)child.material.emissive = new THREE.Color(0x000000)child.material.transparent = truechild.material.opacity = 0.3child.material.normalMap = allTexture['chedengzhao_nor'].texturechild.material.envMap = allTexture['skymap2'].texturechild.material.envMap.mapping = THREE.EquirectangularReflectionMappingchild.material.envMapIntensity = 1} else if (child.name == 'smart_shachedengzhao') {child.material = new THREE.MeshPhongMaterial()child.material.color = new THREE.Color(0xca0816)child.material.transparent = truechild.material.opacity = 0.4child.material.normalMap = allTexture['chedengzhao_nor'].texture} else if (child.name == 'smart_shangeshang') {child.material = new THREE.MeshStandardMaterial()child.material.color = new THREE.Color(0xf0f0f)child.material.emissive = new THREE.Color(0x000000)child.material.metalness = 1child.material.roughness = 0} else if (child.name == 'smart_shangexia') {child.material = new THREE.MeshPhongMaterial()child.material.color = new THREE.Color(0)child.material.metalness = 1child.material.roughness = 0} else if (child.name == 'smart_LOGO' ||child.name == 'smart_paiqiguan') {child.material = new THREE.MeshStandardMaterial()child.material.color = new THREE.Color(0x6c6c6c)child.material.emissive = new THREE.Color(0x444444)child.material.metalness = 1child.material.roughness = 0.32}}})
}// 添加灯光
const addLight = () => {const ambientLight = new THREE.AmbientLight(0xd5d5d5) // 环境光会均匀的照亮场景中的所有物体。ambientLight.intensity = 1.2 // 光照的强度。缺省值为 1scene.add(ambientLight)const bottomRightDirLight = new THREE.DirectionalLight() // 平行光bottomRightDirLight.position.x = 5bottomRightDirLight.position.y = 3bottomRightDirLight.position.z = -5bottomRightDirLight.intensity = 0.8// var helper=new THREE.DirectionalLightHelper(bottomRightDirLight,1);// scene.add( helper );scene.add(bottomRightDirLight)const frontDirLight = new THREE.DirectionalLight(0xffffff)frontDirLight.position.x = -5frontDirLight.position.y = 3frontDirLight.position.z = 5frontDirLight.intensity = 0.8//directionalLight.castShadow=true;// var helper=new THREE.DirectionalLightHelper(frontDirLight,1);// scene.add( helper );scene.add(frontDirLight)// 车子正前上方斜45度的灯结束
}const changeCheShenColor = (color: string) => {smart_cheshen.material.color = new THREE.Color(color)
}onMounted(() => {/*** OrbitControls( object : Camera, domElement : HTMLDOMElement ) 轨道控制器 可以使得相机围绕目标进行轨道运动* object: （必须）将要被控制的相机。该相机不允许是其他任何对象的子级，除非该对象是场景自身* domElement: 用于事件监听的HTML元素。*/const controls = new OrbitControls(camera, container.value)controls.enableDamping = truecontainer.value.appendChild(renderer.domElement)loadAllTexture(loadCarModel)addLight()render()
})
</script><style>
* {margin: 0;padding: 0;
}
.header-box {position: absolute;z-index: 2;color: #fff;display: flex;
}
.container {height: 100vh;width: 100vw;background-color: #f0f0f0;
}
</style>

参考文献
源码地址
Threejs 文档地址

vite+vue3+ts+Threejs 实现web3D车展，并可切换颜色相关推荐

vite+vue3+ts项目搭建之集成qiankun让其成为子应用模板(vite+vue3+ts+qiankun项目)—新增主应用在线地址可以进入vue2/vue3子应用
前言以下操作,是续接之前第四步 --即:vite+vue3+ts+pinia+element-plus项目已完成搭建好,可以直接业务开发了主应用技术栈:vue2+webpack+js 集成qia ...
vite + vue3 + ts集成Cesium
vite + vue3 + ts集成Cesium 安装cesium:npm i cesium vite-plugin-cesium vite -D 在vite.config.ts中进行相应的cesiu ...
vite+vue3+ts+element-plus项目搭建--超详细
vite+vue3+ts+element-plus项目搭建–超详细 vite 作用快速的冷启动:不需要等待打包操作: 即时的热模块更新:替换性能和模块数量的解耦让更新飞起: 真正的按需编译:不再等待 ...
vite+vue3+ts+ant design vue+tailwindcss搭建前端web应用（2）
回顾上篇文章地址:vite+vue3+ts+ant design vue+tailwindcss搭建前端web应用(1)_konsei的博客-CSDN博客上篇文章搭建了vue3项目,引入了ant ...
vite+vue3+ts框架搭建问题记录
404 按官网提示执行npm init vite@latest报错 node版本太低,更新node版本即可,window不能使用命令行更新,重新下载node安装包. 下载地址用下载 | Node.js ...
vite+vue3+ts使用i18n
vue3使用i18n必须使用9.*版本 "vue-i18n": "^9.2.2" 目录 1.下载使用 1.1.创建配置 1.2.基本使用 1.3.这时会有一个警 ...
vite+vue3+ts项目插件使用（提高开发效率vite+vue3插件使用）新增在线预览地址
在线预览 Link:https://wocwin.github.io/wocwin-admin/ 一.@vitejs/plugin-vue-jsx vite+vue3项目全面支持jsx语法 npm i ...
vite+vue3+TS项目引入antd-vue的问题记录
文章目录 1.vite创建的vue+TS项目引入antd-vue 2.antd-vue定制主题报错记录博,用于记录Vue3项目中遇到的问题 1.vite创建的vue+TS项目引入antd-vue 由 ...
用 Vite+Vue3+Ts 搭建通用后台管理系统
大厂技术高级前端 Node进阶点击上方程序员成长指北,关注公众号回复1,加入高级Node交流群通用后台管理系统整体架构方案(Vue) 项目创建,脚手架的选择(vite or vue-cl ...

vite+vue3+ts+Threejs 实现web3D车展，并可切换颜色

vite+vue3+ts+Threejs 实现web3D车展，并可切换颜色相关推荐

最新文章

热门文章