增加一个 汽车的展示 待优化

package.json

@@ -51,6 +51,7 @@
     "gl-matrix": "^3.4.3",
     "gsap": "3.12.5",
     "heatmap.js-fix": "^1.0.0",
+    "lamina": "^1.1.23",
     "oimophysics": "^1.2.2",
     "patch-package": "^8.0.0",
     "pinia": "^2.1.7",

src/plugins/industry4/components/carModel.vue

@@ -0,0 +1,49 @@
+<!--
+ * @Description: 
+ * @Version: 1.668
+ * @Autor: 地虎降天龙
+ * @Date: 2024-03-27 10:38:54
+ * @LastEditors: 地虎降天龙
+ * @LastEditTime: 2024-03-27 21:59:23
+-->
+<template>
+	<primitive :object="scene" />
+</template>
+
+<script setup>
+import { useGLTF } from '@tresjs/cientos'
+import * as THREE from 'three'
+// import { loadHDR } from 'PLS/skyBox/common/utils'
+
+const { scene, nodes, materials } = await useGLTF(
+	'https://opensource-1314935952.cos.ap-nanjing.myqcloud.com/model/industry4/911-transformed.glb',
+	{ draco: true, decoderPath: './draco/' })
+Object.values(nodes).forEach((node) => {
+	if (node.isMesh) {
+		node.receiveShadow = node.castShadow = true
+	}
+})
+materials.rubber.color = new THREE.Color('#222')
+materials.rubber.roughness = 0.6
+materials.rubber.roughnessMap = null
+materials.rubber.normalScale = [4, 4]
+
+materials.window.color = new THREE.Color('black')
+materials.window.roughness = 0
+materials.window.clearcoat = 0.1
+
+materials.coat.envMapIntensity = 4
+materials.coat.roughness = 0.5
+materials.coat.metalness = 1
+
+materials.paint.envMapIntensity = 2
+materials.paint.roughness = 0.45
+materials.paint.metalness = 0.8
+materials.paint.color = new THREE.Color('#555')
+
+// const pTexture = await loadHDR("https://opensource-1314935952.cos.ap-nanjing.myqcloud.com/images/skyBox/desert_1k.hdr")
+// Object.values(materials).forEach((ma) => {
+// 	console.log(ma)
+// 	ma.envMap = pTexture
+// })
+</script>

src/plugins/industry4/config.js

@@ -4,7 +4,7 @@
  * @Autor: 地虎降天龙
  * @Date: 2023-11-10 16:11:27
  * @LastEditors: 地虎降天龙
- * @LastEditTime: 2024-03-20 10:41:36
+ * @LastEditTime: 2024-03-27 22:07:42
  */
 
 export default {
@@ -22,6 +22,10 @@ export default {
 		{ "src": "plugins/industry4/preview/deviceLight.png", "type": "img", "name": "deviceLight", "title": "设备发光" },
 		{ "src": "plugins/industry4/preview/deviceLightReflector.png", "type": "img", "name": "deviceLightReflector", "title": "设备发光+镜面+表格说明" },
 		{ "src": "plugins/industry4/preview/planeClipping.png", "type": "img", "name": "planeClipping", "title": "飞机剖面" },
+		{
+			"src": "plugins/industry4/preview/showCar.png", "type": "img", "name": "showCar", "title": "车辆展示",
+			"referenceSource": { title: 'drei', url: 'https://codesandbox.io/p/sandbox/building-live-envmaps-forked-myjzt8' }
+		}
 		// { "src": "plugins/industry4/preview/deviceLight.png", "type": "img", "name": "deviceLightByComposerTres", "title": "发光后期useTres" },
 	]
 }

src/plugins/industry4/pages/showCar.vue

@@ -0,0 +1,56 @@
+<!--
+ * @Description: 
+ * @Version: 1.668
+ * @Autor: 地虎降天龙
+ * @Date: 2023-11-18 08:51:19
+ * @LastEditors: 地虎降天龙
+ * @LastEditTime: 2024-03-27 21:56:36
+-->
+<template>
+	<loading />
+	<TresCanvas v-bind="state" window-size>
+		<TresPerspectiveCamera :position="[5, 1, 5]" :fov="30" :near="1" :far="1000" />
+		<OrbitControls v-bind="controlsState" />
+		<TresAmbientLight color="#ffffff" intensity="2.5" />
+		<!-- <TresDirectionalLight color="#ffffff" intensity="10.5" position="[-1, 1, 1]" /> -->
+
+		<!-- <TresSpotLight :position="[0, 5, 0]" :angle="0.3" :penumbra="1" castShadow :intensity="2" :shadowBias="-0.0001" /> -->
+		<Suspense>
+			<carModel />
+		</Suspense>
+		<Suspense>
+			<reflectorShaderMesh v-bind="configState" :position="[0, -0.6, 0]" />
+		</Suspense>
+
+		<environmentForLightformers />
+	</TresCanvas>
+</template>
+
+
+<script setup lang="ts">
+import { reactive } from 'vue'
+import { OrbitControls } from '@tresjs/cientos'
+
+import reflectorShaderMesh from 'PLS/floor/components/reflectorShaderMesh.vue'
+import { randomLoading as loading } from 'PLS/UIdemo'
+import { environmentForLightformers } from 'PLS/skyBox'
+import carModel from '../components/carModel.vue'
+
+
+
+const configState = reactive({
+	reflectivity: 0.1,
+	mirror: 0.92,	// 去除纹理 镜面化 
+	mixStrength: 36,
+	showGridHelper: false,
+})
+
+const state = reactive({
+	clearColor: '#000',
+	shadows: true,
+})
+const controlsState = reactive({
+	autoRotate: true,
+})
+
+</script>

src/plugins/skyBox/common/lightFormer.ts

@@ -0,0 +1,28 @@
+import * as THREE from "three"
+
+class lightFormer {
+	constructor(config: { color?: string, form?: "circle" | "ring" | "rect", intensity?: number } = {}) {
+		const { color = "white", form = "rect", intensity = 1 } = config
+
+		const geometry = {
+			circle: new THREE.RingGeometry(0, 1, 64),
+			ring: new THREE.RingGeometry(0.5, 1, 64),
+			rect: new THREE.PlaneGeometry(),
+		}[form]
+
+		const material = new THREE.MeshBasicMaterial({
+			side: THREE.DoubleSide,
+			color: new THREE.Color(color),
+		})
+
+		material.color.multiplyScalar(intensity)
+		this.material = material
+		const mesh = new THREE.Mesh(geometry, material)
+		this.mesh = mesh
+	}
+
+	material: THREE.MeshBasicMaterial
+	mesh: THREE.Mesh
+}
+
+export { lightFormer }

src/plugins/skyBox/components/environmentForLightformers.vue

@@ -0,0 +1,103 @@
+<template></template>
+<script setup>
+import { watchEffect } from 'vue'
+import * as THREE from 'three'
+import { useTresContext, useRenderLoop } from '@tresjs/core'
+import { LayerMaterial, Depth, Color } from 'lamina/vanilla'
+import { lightFormer } from '../common/lightFormer'
+
+// 离屏材质渲染器
+let pmremGenerator = null
+
+// 外层的环境包围盒
+// const environmentMesh = new THREE.Mesh(
+// 	new THREE.BoxGeometry(100, 100, 100),
+// 	new THREE.MeshBasicMaterial(),
+// )
+const environmentMesh = new THREE.Group()
+
+const envObject = new lightFormer()
+envObject.mesh.scale.set(10, 10, 1)
+envObject.mesh.position.set(0, 5, -9)
+envObject.mesh.rotation.x = Math.PI / 2
+
+const envObject2 = new lightFormer({ intensity: 4 })
+envObject2.mesh.scale.set(20, 0.1, 1)
+envObject2.mesh.position.set(-5, 1, -1)
+envObject2.mesh.rotation.y = Math.PI / 2
+
+const envObject3 = new lightFormer()
+envObject3.mesh.scale.set(20, 0.5, 1)
+envObject3.mesh.position.set(-5, -1, -1)
+envObject3.mesh.rotation.y = Math.PI / 2
+
+const envObject4 = new lightFormer()
+envObject4.mesh.scale.set(20, 1, 1)
+envObject4.mesh.position.set(10, 1, 0)
+envObject4.mesh.rotation.y = -Math.PI / 2
+
+// 红光 待动效
+const envObject5 = new lightFormer({ form: 'ring', color: 'red' })
+envObject5.mesh.scale.set(10, 10, 10)
+envObject5.mesh.position.set(-15, 4, -18)
+
+environmentMesh.add(envObject.mesh, envObject2.mesh, envObject3.mesh, envObject4.mesh, envObject5.mesh)
+
+// 一排灯
+const lightFormerGrouprotaion = new THREE.Group()
+lightFormerGrouprotaion.rotation.set(0, 0.5, 0)
+
+const lightFormerGroup = new THREE.Group()
+lightFormerGrouprotaion.add(lightFormerGroup)
+
+const lightFormerPositions = [2, 0, 2, 0, 2, 0, 2, 0]
+lightFormerPositions.forEach((x, index) => {
+	const envObjectTmp = new lightFormer({ form: 'circle', intensity: 2 })
+	envObjectTmp.mesh.rotation.x = Math.PI / 2
+	envObjectTmp.mesh.scale.set(3, 1, 1)
+	envObjectTmp.mesh.position.set(x, 4, index * 4)
+	lightFormerGroup.add(envObjectTmp.mesh)
+})
+environmentMesh.add(lightFormerGrouprotaion)
+
+//外部Background
+const backgroundGeometry = new THREE.SphereGeometry(1, 64, 64)
+const backgroundMaterial = new LayerMaterial({
+	side: THREE.BackSide,
+	layers: [
+		new Color({
+			color: '#444',
+			mode: 'normal',
+			alpha: 1,
+		}),
+		new Depth({
+			colorA: 'blue',
+			colorB: 'black',
+			alpha: 0.5,
+			mode: 'normal',
+			near: 0,
+			far: 300,
+			origin: new THREE.Vector3(100, 100, 100),
+		}),
+	],
+})
+const backgroundMesh = new THREE.Mesh(backgroundGeometry, backgroundMaterial)
+backgroundMesh.scale.set(100, 100, 100)
+environmentMesh.add(backgroundMesh)
+
+const { scene, renderer, sizes } = useTresContext()
+watchEffect(() => {
+	if (sizes.width.value) {
+		pmremGenerator = new THREE.PMREMGenerator(renderer.value)
+		pmremGenerator.compileCubemapShader()
+	}
+})
+const { onBeforeLoop } = useRenderLoop()
+onBeforeLoop(({ delta }) => {
+	if (scene.value) {
+		(lightFormerGroup.position.z += delta * 10) > 20 && (lightFormerGroup.position.z = -60)
+		scene.value.environment = pmremGenerator.fromScene(environmentMesh).texture
+		// scene.value.background = scene.value.environment
+	}
+})
+</script>

src/plugins/skyBox/components/skyBoxEmesh.vue

@@ -1,3 +1,11 @@
+<!--
+ * @Description: 
+ * @Version: 1.668
+ * @Autor: 地虎降天龙
+ * @Date: 2024-01-26 16:14:33
+ * @LastEditors: 地虎降天龙
+ * @LastEditTime: 2024-03-27 17:15:33
+-->
 <!--
  * @Description: 
  * @Version: 1.668

src/plugins/skyBox/index.js

@@ -0,0 +1,4 @@
+
+import environmentForLightformers from './components/environmentForLightformers.vue'
+
+export { environmentForLightformers, }