99网
您的当前位置:首页vue3 threejs 结合element_plus 拾色器,实现车展换肤

vue3 threejs 结合element_plus 拾色器,实现车展换肤

来源:99网

效果展示:

特斯拉换色模型动画

threejs的初始知识点,我就不赘述了,网上和官方文档,都有很多,很详细的内容。大家感兴趣的可以自行阅读查看。

素材我是在这个网站下的

创意设计

修改区域:
<template>
	<div class="maskLoading" v-if="isLoading">
		<div class="loading">
			<div :style="{width : loadingWidth +'%' }"></div>
		</div>
		<div style="">{
   {
   parseInt(loadingWidth)}}%</div>
	</div>
	<div class="mask">
		<div class="top">
			<el-button @click="isAutoFun">转动车</el-button>
			<el-button @click="stop">停止</el-button>
			<div class="info">x : {
   {
   x}} y:{
   {
   y}} z :{
   {
   z}}</div>
		</div>
		<h2>创意设计</h2>
		<div>
			<h5>修改区域:</h5>
			<div class="part">
				<el-button :type="buttonIndex === index ? 'primary' : ''" v-for="(btn, index) in buttonList" @click="changePart(btn.key, index)">{
   {
    btn.label }}</el-button>
			</div>
		</div>
		<div>
			<h5>颜色选择:</h5>
			<div class="demo-color-block">
				<el-color-picker v-model="colorKey" @change="setCarColor" color-format="rgb" />
			</div>
		</div>
	</div

因篇幅问题不能全部显示,请点此查看更多更全内容