升级 three到最新版本剩余su7 这个场景存在问题

2025-04-05 06:22:43 +08:00 · 2024-07-18 17:23:24 +08:00 · 2024-07-18 17:23:24 +08:00 · 4f89f74b99
commit 4f89f74b99
parent 2c656edddd
8 changed files with 208 additions and 205 deletions
--- a/package.json
+++ b/package.json
@ -78,7 +78,7 @@
    "postinstall-postinstall": "^2.1.0",
    "postprocessing": "^6.35.6",
    "simplex-noise": "^4.0.2",
-    "three": "^0.162.0",
+    "three": "^0.166.1",
    "three-bvh-csg": "^0.0.16",
    "three-custom-shader-material": "^5.4.0",
    "three-mesh-bvh": "^0.7.6",
@ -93,4 +93,4 @@
    "vue3-lazyload": "^0.3.8"
  },
  "private": true
-}
+}
--- a/src/plugins/basic/components/forCientos/Lightformer/index.vue
+++ b/src/plugins/basic/components/forCientos/Lightformer/index.vue
@ -1,55 +1,56 @@
+<!--
+ * @Description: 
+ * @Version: 1.668
+ * @Autor: 地虎降天龙
+ * @Date: 2024-04-15 21:03:54
+ * @LastEditors: 地虎降天龙
+ * @LastEditTime: 2024-07-18 17:22:13
+-->
 <script setup lang="ts">
-import { defineProps, ref, watchEffect } from 'vue'
+import { defineProps, ref, watchEffect, onMounted } from 'vue'
 import type { MeshBasicMaterial, Texture } from 'three'
 import { Color, DoubleSide } from 'three'

-const props = withDefaults(defineProps<{
-  args?: any[]
-  from?: 'circle' | 'ring' | 'rect' | any
-  toneMapped?: boolean
-  map?: Texture
-  intensity?: number
-  color?: any
-}>(), {
-  args: null as any,
-  from: 'rect',
-  toneMapped: false,
-  map: null as any,
-  intensity: 1,
-  color: new Color(0xffffff),
-})
+const props = withDefaults(
+    defineProps<{
+        args?: any[]
+        from?: 'circle' | 'ring' | 'rect' | any
+        toneMapped?: boolean
+        map?: Texture
+        intensity?: number
+        color?: any
+    }>(),
+    {
+        args: null as any,
+        from: 'rect',
+        toneMapped: false,
+        map: null as any,
+        intensity: 1,
+        color: new Color(0xffffff),
+    },
+)

 const material = ref<MeshBasicMaterial>()
 watchEffect(() => {
-  if (material.value) {
-    material.value.color.multiplyScalar(props.intensity)
-    material.value.needsUpdate = true
-  }
+    if (material.value) {
+        debugger
+        material.value.color.multiplyScalar(props.intensity)
+        material.value.needsUpdate = true
+    }
+})
+onMounted(() => {
+    debugger
+    // material.value.color.multiplyScalar(props.intensity)
 })
 </script>

 <template>
-  <TresMesh>
-    <TresRingGeometry
-      v-if="props.from === 'circle'"
-      :args="[0, 1, 64]"
-    />
-    <TresRingGeometry
-      v-else-if="props.from === 'ring'"
-      :args="[0.5, 1, 64]"
-    />
-    <TresPlaneGeometry v-else-if="props.from === 'rect'" />
-    <props.from
-      v-else
-      :args="props"
-    />
+    <TresMesh>
+        <TresRingGeometry v-if="props.from === 'circle'" :args="[0, 1, 64]" />
+        <TresRingGeometry v-else-if="props.from === 'ring'" :args="[0.5, 1, 64]" />
+        <TresPlaneGeometry v-else-if="props.from === 'rect'" />
+        <props.from v-else :args="props" />

-    <TresMeshBasicMaterial
-      ref="material"
-      :toneMapped="toneMapped"
-      :map="map"
-      :side="DoubleSide"
-      :color="color"
-    />
-  </TresMesh>
+        <TresMeshBasicMaterial ref="material" :toneMapped="toneMapped" :map="map" :side="DoubleSide" :color="color" />
+    </TresMesh>
 </template>
--- a/src/plugins/basic/pages/materials/clippingMaterial.vue
+++ b/src/plugins/basic/pages/materials/clippingMaterial.vue
@ -4,7 +4,7 @@
 * @Autor: 地虎降天龙
 * @Date: 2024-01-05 09:23:48
 * @LastEditors: 地虎降天龙
- * @LastEditTime: 2024-03-05 18:51:05
+ * @LastEditTime: 2024-07-18 16:22:55
 -->

 <script setup lang="ts">
@ -18,65 +18,64 @@ const tcRef = ref()

 const meshList = [] as number[]
 for (let index = 1; index < 30; index += 2) {
-	meshList.push(index)
+    meshList.push(index)
 }

-const clipPlanes = [
-	new Plane(new Vector3(1, 0, 0), 0),
-	new Plane(new Vector3(0, - 1, 0), 0),
-	new Plane(new Vector3(0, 0, - 1), 0)
-];
+const clipPlanes = [new Plane(new Vector3(1, 0, 0), 0), new Plane(new Vector3(0, -1, 0), 0), new Plane(new Vector3(0, 0, -1), 0)]
 const params = {
-	clipIntersection: true,
-	planeConstant: 0,
-	showHelpers: false
-};
+    clipIntersection: true,
+    planeConstant: 0,
+    showHelpers: false,
+}

 watchEffect(() => {
-	if (tcRef.value) {
-		const renderer = tcRef.value.context.renderer.value
-		renderer.localClippingEnabled = true
-	}
+    if (tcRef.value) {
+        const renderer = tcRef.value.context.renderer.value
+        renderer.localClippingEnabled = true
+    }
 })

 const paneControl = new Pane({
-	title: '裁剪参数',
-	expanded: true,
-});
+    title: '裁剪参数',
+    expanded: true,
+})
 paneControl.addBinding(clipPlanes[0], 'constant', {
-	label: 'x',
-	min: -1,
-	max: 1,
-	step: 0.1,
+    label: 'x',
+    min: -1,
+    max: 1,
+    step: 0.1,
 })
 paneControl.addBinding(clipPlanes[1], 'constant', {
-	label: 'y',
-	min: -1,
-	max: 1,
-	step: 0.1,
+    label: 'y',
+    min: -1,
+    max: 1,
+    step: 0.1,
 })
 paneControl.addBinding(clipPlanes[2], 'constant', {
-	label: 'z',
-	min: -1,
-	max: 1,
-	step: 0.1,
+    label: 'z',
+    min: -1,
+    max: 1,
+    step: 0.1,
 })
-
 </script>

 <template>
-	<TresCanvas ref="tcRef" window-size>
-		<TresPerspectiveCamera :fov="40" :near="0.1" :far="200" :position="[-1.5, 2.5, 3.0]" />
-		<TresGridHelper :args="[2, 10]" />
-		<TresHemisphereLight :args="[0xffffff, 0x080808, 4.5]" :position="[-1.25, 1, 1.25]" />
-		<OrbitControls />
+    <TresCanvas ref="tcRef" window-size>
+        <TresPerspectiveCamera :fov="40" :near="0.1" :far="200" :position="[-1.5, 2.5, 3.0]" />
+        <TresGridHelper :args="[2, 10]" />
+        <TresHemisphereLight :args="[0xffffff, 0x080808, 4.5]" :position="[-1.25, 1, 1.25]" />
+        <OrbitControls />

-		<TresGroup>
-			<TresMesh v-for="i in meshList " :key="i">
-				<TresSphereGeometry :args="[i / 30, 48, 24]" />
-				<TresMeshLambertMaterial :color="[MathUtils.randInt(0.1, 1), MathUtils.randInt(0, 1), MathUtils.randInt(0, 1)]"
-					:side="DoubleSide" :clippingPlanes="clipPlanes" :clipIntersection="params.clipIntersection" />
-			</TresMesh>
-		</TresGroup>
-	</TresCanvas>
+        <TresGroup>
+            <TresMesh v-for="i in meshList" :key="i">
+                <TresSphereGeometry :args="[i / 30, 48, 24]" />
+                <TresMeshLambertMaterial
+                    :color="[MathUtils.randInt(0.1, 1), MathUtils.randInt(0, 1), MathUtils.randInt(0, 1)]"
+                    :side="DoubleSide"
+                    :clippingPlanes="clipPlanes"
+                    :clipIntersection="params.clipIntersection"
+                />
+            </TresMesh>
+        </TresGroup>
+    </TresCanvas>
 </template>
--- a/src/plugins/eCommerce/pages/stencilMask.vue
+++ b/src/plugins/eCommerce/pages/stencilMask.vue
@ -7,34 +7,32 @@
 * @LastEditTime: 2024-03-13 20:51:44
 -->
 <script setup>
-
 import { OrbitControls } from '@tresjs/cientos'
 import skyBox from 'PLS/skyBox/components/skyBoxDmesh.vue'
 import { randomLoading as loading } from 'PLS/UIdemo'
 import stencilMaskMesh from '../components/stencilMaskBox.vue'
 import stencilMaskModels from '../components/stencilMaskModels.vue'
-
 </script>
 <template>
-	<loading />
-	<TresCanvas ref="canvasRef" window-size clear-color="#111">
-		<TresPerspectiveCamera :position="[-1, 0, 2]" :fov="45" :aspect="1" :near="0.1" :far="1000" />
-		<OrbitControls auto-rotate />
+    <loading />
+    <TresCanvas ref="canvasRef" window-size clear-color="#111" stencil>
+        <TresPerspectiveCamera :position="[-1, 0, 2]" :fov="45" :aspect="1" :near="0.1" :far="1000" />
+        <OrbitControls auto-rotate />

-		<Suspense>
-			<skyBox texture="https://opensource-1314935952.cos.ap-nanjing.myqcloud.com/images/skyBox/workshop_blur.jpg" />
-		</Suspense>
+        <Suspense>
+            <skyBox texture="https://opensource-1314935952.cos.ap-nanjing.myqcloud.com/images/skyBox/workshop_blur.jpg" />
+        </Suspense>

-		<Suspense>
-			<stencilMaskMesh />
-		</Suspense>
+        <Suspense>
+            <stencilMaskMesh />
+        </Suspense>

-		<Suspense>
-			<stencilMaskModels />
-		</Suspense>
+        <Suspense>
+            <stencilMaskModels />
+        </Suspense>

-		<TresPointLight :position="[0, 0, 1]" :intensity="1" />
-		<TresDirectionalLight :position="[1, 1, 1]" :intensity="3" />
-		<TresAmbientLight :intensity="2" />
-	</TresCanvas>
-</template>
+        <TresPointLight :position="[0, 0, 1]" :intensity="1" />
+        <TresDirectionalLight :position="[1, 1, 1]" :intensity="3" />
+        <TresAmbientLight :intensity="2" />
+    </TresCanvas>
+</template>
--- a/src/plugins/floor/components/reflectorMipMap.vue
+++ b/src/plugins/floor/components/reflectorMipMap.vue
@ -4,27 +4,25 @@
 * @Autor: 地虎降天龙
 * @Date: 2024-04-15 09:59:36
 * @LastEditors: 地虎降天龙
- * @LastEditTime: 2024-07-18 12:05:53
+ * @LastEditTime: 2024-07-18 16:54:43
 -->
-<template></template>
+<template>
+</template>

 <script lang="ts" setup>
 import * as THREE from 'three'
 import { useTresContext, useRenderLoop } from '@tresjs/core'
 import { useFBO } from 'PLS/basic'
-import { PackedMipMapGenerator } from '../common/csmMipmap/PackedMipMapGenerator'
+import { PackedMipMapGenerator } from "../common/csmMipmap/PackedMipMapGenerator"

-const props = withDefaults(
-    defineProps<{
-        parent: THREE.Mesh
-        resolution?: number
-        ignoreObjects?: THREE.Object3D[]
-    }>(),
-    {
-        resolution: 512,
-        ignoreObjects: [] as THREE.Object3D[],
-    },
-)
+const props = withDefaults(defineProps<{
+	parent: THREE.Mesh
+	resolution?: number
+	ignoreObjects?: THREE.Object3D[]
+}>(), {
+	resolution: 512,
+	ignoreObjects: [] as THREE.Object3D[]
+})

 const reflectPlane = new THREE.Plane()
 const reflectMatrix = new THREE.Matrix4()
@ -32,87 +30,92 @@ const camera = new THREE.PerspectiveCamera()

 const mipMaper = new PackedMipMapGenerator()
 const renderTarget = useFBO({
-    width: props.resolution,
-    height: props.resolution,
-    settings: {
-        type: THREE.UnsignedByteType,
-    },
+	width: props.resolution, height: props.resolution, settings: {
+		type: THREE.UnsignedByteType,
+	}
 })
 const renderTargetMipMap = useFBO({
-    width: props.resolution,
-    height: props.resolution,
-    settings: {
-        type: THREE.UnsignedByteType,
-    },
+	width: props.resolution, height: props.resolution, settings: {
+		type: THREE.UnsignedByteType,
+	}
 })
 const { camera: baseCamera, renderer, scene } = useTresContext()

 const beforeRender = () => {
-    if (!baseCamera.value) {
-        return
-    }
-    reflectPlane.set(new THREE.Vector3(0, 1, 0), 0)
-    reflectPlane.applyMatrix4(props.parent.matrixWorld)
-    camera.copy(baseCamera.value as THREE.PerspectiveCamera)
-    const r = new THREE.Vector3(0, 0, 1).clone().negate()
-    const o = baseCamera.value.getWorldPosition(new THREE.Vector3())
-    r.reflect(reflectPlane.normal)
-    const p = new THREE.Vector3()
-    reflectPlane.projectPoint(o, p)
-    const y = p.clone()
-    y.sub(o), y.add(p), camera.position.copy(y)
-    const d = new THREE.Vector3(0, 0, -1)
-    d.applyQuaternion(baseCamera.value.getWorldQuaternion(new THREE.Quaternion()))
-    d.add(o)
-    const E = new THREE.Vector3()
-    props.parent.getWorldPosition(E)
-    E.sub(d)
-    E.reflect(reflectPlane.normal).negate()
-    E.add(props.parent.getWorldPosition(new THREE.Vector3()))
-    camera.up.set(0, 1, 0)
-    camera.applyQuaternion(baseCamera.value.getWorldQuaternion(new THREE.Quaternion()))
-    camera.up.reflect(reflectPlane.normal)
-    camera.lookAt(E)
-    camera.updateMatrixWorld()
-    const L = new THREE.Matrix4()
-    L.set(0.5, 0, 0, 0.5, 0, 0.5, 0, 0.5, 0, 0, 0.5, 0.5, 0, 0, 0, 1)
-    L.multiply(camera.projectionMatrix)
-    L.multiply(camera.matrixWorldInverse)
-    reflectMatrix.copy(L)
-    reflectPlane.applyMatrix4(camera.matrixWorldInverse)
-    const k = new THREE.Vector4(reflectPlane.normal.x, reflectPlane.normal.y, reflectPlane.normal.z, reflectPlane.constant)
-    const X = camera.projectionMatrix
-    const $ = new THREE.Vector4()
-    $.x = (Math.sign(k.x) + X.elements[8]) / X.elements[0]
-    $.y = (Math.sign(k.y) + X.elements[9]) / X.elements[5]
-    $.z = -1
-    $.w = (1 + X.elements[10]) / X.elements[14]
-    k.multiplyScalar(2 / k.dot($))
-    X.elements[2] = k.x
-    X.elements[6] = k.y
-    X.elements[10] = k.z + 1
-    X.elements[14] = k.w
-    const Z = renderer.value.getRenderTarget()
-    renderer.value.setRenderTarget(renderTarget.value)
-    renderer.value.state.buffers.depth.setMask(true)
-    renderer.value.autoClear === false && renderer.value.clear()
-    props.ignoreObjects.forEach((be) => (be.visible = false))
-    renderer.value.render(scene.value, camera)
-    props.ignoreObjects.forEach((be) => (be.visible = true))
-    renderer.value.setRenderTarget(Z)
+	if (!baseCamera.value) {
+		return
+	}
+	reflectPlane.set(new THREE.Vector3(0, 1, 0), 0)
+	reflectPlane.applyMatrix4(props.parent.matrixWorld)
+	camera.copy(baseCamera.value as THREE.PerspectiveCamera)
+	const r = new THREE.Vector3(0, 0, 1).clone().negate()
+	const o = baseCamera.value.getWorldPosition(new THREE.Vector3())
+	r.reflect(reflectPlane.normal)
+	const p = new THREE.Vector3()
+	reflectPlane.projectPoint(o, p)
+	const y = p.clone()
+	y.sub(o), y.add(p), camera.position.copy(y)
+	const d = new THREE.Vector3(0, 0, -1)
+	d.applyQuaternion(
+		baseCamera.value.getWorldQuaternion(new THREE.Quaternion())
+	)
+	d.add(o)
+	const E = new THREE.Vector3();
+	props.parent.getWorldPosition(E)
+	E.sub(d)
+	E.reflect(reflectPlane.normal).negate()
+	E.add(props.parent.getWorldPosition(new THREE.Vector3()))
+	camera.up.set(0, 1, 0)
+	camera.applyQuaternion(
+		baseCamera.value.getWorldQuaternion(new THREE.Quaternion())
+	);
+	camera.up.reflect(reflectPlane.normal)
+	camera.lookAt(E)
+	camera.updateMatrixWorld()
+	const L = new THREE.Matrix4()
+	L.set(0.5, 0, 0, 0.5, 0, 0.5, 0, 0.5, 0, 0, 0.5, 0.5, 0, 0, 0, 1)
+	L.multiply(camera.projectionMatrix)
+	L.multiply(camera.matrixWorldInverse)
+	reflectMatrix.copy(L)
+	reflectPlane.applyMatrix4(camera.matrixWorldInverse)
+	const k = new THREE.Vector4(
+		reflectPlane.normal.x,
+		reflectPlane.normal.y,
+		reflectPlane.normal.z,
+		reflectPlane.constant
+	)
+	const X = camera.projectionMatrix
+	const $ = new THREE.Vector4()
+	$.x = (Math.sign(k.x) + X.elements[8]) / X.elements[0]
+	$.y = (Math.sign(k.y) + X.elements[9]) / X.elements[5]
+	$.z = -1
+	$.w = (1 + X.elements[10]) / X.elements[14]
+	k.multiplyScalar(2 / k.dot($))
+	X.elements[2] = k.x
+	X.elements[6] = k.y
+	X.elements[10] = k.z + 1
+	X.elements[14] = k.w
+	const Z = renderer.value.getRenderTarget()
+	renderer.value.setRenderTarget(renderTarget.value)
+	renderer.value.state.buffers.depth.setMask(true)
+	renderer.value.autoClear === false && renderer.value.clear()
+	props.ignoreObjects.forEach((be) => (be.visible = false))
+	renderer.value.render(scene.value, camera)
+	props.ignoreObjects.forEach((be) => (be.visible = true))
+	renderer.value.setRenderTarget(Z)
 }

 const { onBeforeLoop } = useRenderLoop()

 onBeforeLoop(() => {
-    beforeRender()
-    if (renderTarget.value && renderTargetMipMap.value && renderer.value) {
-        mipMaper.update(renderTarget.value.texture, renderTargetMipMap.value, renderer.value)
-    }
+	beforeRender()
+	if (renderTarget.value && renderTargetMipMap.value && renderer.value) {
+		mipMaper.update(renderTarget.value.texture, renderTargetMipMap.value, renderer.value)
+	}
 })

 defineExpose({
-    matrix: reflectMatrix,
-    renderTarget: renderTargetMipMap,
+	matrix: reflectMatrix,
+	renderTarget: renderTargetMipMap,
 })
-</script>
+</script>
--- a/src/plugins/industry4/components/su7/startroom.vue
+++ b/src/plugins/industry4/components/su7/startroom.vue
@ -4,7 +4,7 @@
 * @Autor: 地虎降天龙
 * @Date: 2024-03-27 10:38:54
 * @LastEditors: 地虎降天龙
- * @LastEditTime: 2024-07-18 14:54:28
+ * @LastEditTime: 2024-07-18 16:55:49
 -->
 <template>
    <primitive :object="scene" ref="tresMesh" />
@ -35,7 +35,7 @@ const pTexture = await useTexture([
    './plugins/industry4/texture/t_startroom_light.raw.jpg',
    './plugins/industry4/texture/t_startroom_ao.raw.jpg',
    './plugins/industry4/texture/t_floor_roughness.webp',
-    './plugins/industry4/texture/t_floor_normal.webp'
+    './plugins/industry4/texture/t_floor_normal.webp',
 ])
 pTexture[2].colorSpace = THREE.LinearSRGBColorSpace
 pTexture[2].wrapS = pTexture[2].wrapT = THREE.RepeatWrapping
@ -66,7 +66,10 @@ floorMat.roughnessMap = pTexture[2]
 floorMat.normalMap = pTexture[3]
 floorMat.aoMap = pTexture[1]
 floorMat.lightMap = pTexture[0]
+
+floorMat.envMap = pTexture[2]
 floorMat.envMapIntensity = 0
+
 floorMat.transparent = true

 floor.name = 'floorBtm'
@ -78,26 +81,28 @@ watch(
    (newVal) => {
        floor.material = makeCustomShaderMaterial(floor, newVal.value) as any
    },
-    { deep: true }
+    { deep: true },
 )

 watch(
    () => props.hide,
    (newVal) => {
        if (newVal) {
-            floor.material.envMapIntensity = 0.5
+            floor.material.envMap = null
+            floor.material.envMapIntensity = 1
            floor.material.opacity = 0
            lightMat.opacity = 0
        } else {
+            floor.material.envMap = pTexture[2]
            floor.material.envMapIntensity = 0
            lightMat.opacity = 1
        }
-    }
+    },
 )

 const tresMesh = ref<THREE.Mesh>()
 defineExpose({
    meshList: [light, floor],
-    tresMesh
+    tresMesh,
 })
 </script>
--- a/src/plugins/industry4/pages/showCar.vue
+++ b/src/plugins/industry4/pages/showCar.vue
@ -4,14 +4,14 @@
 * @Autor: 地虎降天龙
 * @Date: 2023-11-18 08:51:19
 * @LastEditors: 地虎降天龙
- * @LastEditTime: 2024-07-18 11:42:46
+ * @LastEditTime: 2024-07-18 16:25:40
 -->
 <template>
    <loading />
    <TresCanvas v-bind="state" window-size>
        <TresPerspectiveCamera :position="[5, 1, 15]" :fov="30" :near="1" :far="1000" />
        <OrbitControls v-bind="controlsState" />
-        <TresAmbientLight :intensity="2" />
+        <TresAmbientLight :intensity="3" />
        <TresDirectionalLight color="#ffffff" :intensity="5" castShadow :position="[0, 3, 0]" />
        <TresSpotLight
            ref="spotLight"
--- a/src/plugins/industry4/pages/su7.vue
+++ b/src/plugins/industry4/pages/su7.vue
@ -4,7 +4,7 @@
 * @Autor: 地虎降天龙
 * @Date: 2023-11-18 08:51:19
 * @LastEditors: 地虎降天龙
- * @LastEditTime: 2024-07-18 14:59:33
+ * @LastEditTime: 2024-07-18 16:58:18
 -->
 <template>
    <Suspense>
@ -16,9 +16,6 @@
            <TresPerspectiveCamera :position="[0, 5, 8]" :fov="45" :near="0.1" :far="500" />
        </Levioso>
        <OrbitControls v-bind="controlsState" />
-        <!-- <TresAmbientLight color="#ffffff" :intensity="0.5" />
-        <TresDirectionalLight :position="[0, 2, -4]" :intensity="0.2" /> -->
-
        <Suspense>
            <car :run="showSpeedup" />
        </Suspense>
@ -32,8 +29,8 @@
        </Suspense>

        <Suspense>
-            <Environment :blur="0" :far="1000" :useDefaultScene="showSpeedup">
-                <Lightformer :intensity="0.66" :rotation-x="Math.PI / 2" :position="[0, 5, 0]" :scale="[10, 10, 1]" />
+            <Environment :blur="0" :far="10000" :useDefaultScene="showSpeedup">
+                <Lightformer :intensity="6" :rotation-x="Math.PI / 2" :position="[0, 7, 0]" :scale="[10, 10, 2]" />
            </Environment>
        </Suspense>