mirror of
https://gitee.com/ice-gl/icegl-three-vue-tres.git
synced 2025-04-05 06:22:43 +08:00
剩余：
stencilMask su7 两个场景的优化
This commit is contained in:
hawk86104
parent
bc6668c34f
commit
727dae34dd
@ -4,7 +4,7 @@
|
||||
* @Autor: 地虎降天龙
|
||||
* @Date: 2024-03-08 15:06:29
|
||||
* @LastEditors: 地虎降天龙
|
||||
* @LastEditTime: 2024-03-13 20:55:06
|
||||
* @LastEditTime: 2024-07-18 10:45:33
|
||||
-->
|
||||
<script setup lang="ts">
|
||||
import { bubbleLoading as loading } from 'PLS/UIdemo'
|
||||
@ -19,83 +19,83 @@ import particalPass from '../components/particalPass.vue'
|
||||
const progress = ref(0)
|
||||
|
||||
watchEffect(() => {
|
||||
console.log('jaime ~ progress:', progress.value)
|
||||
console.log('jaime ~ progress:', progress.value)
|
||||
})
|
||||
|
||||
const gl = {
|
||||
clearColor: '#000',
|
||||
outputColorSpace: SRGBColorSpace,
|
||||
windowSize: true,
|
||||
disableRender: true,
|
||||
powerPreference: "high-performance",
|
||||
antialias: false,
|
||||
alpha: false,
|
||||
useLegacyLights: false,
|
||||
physicallyCorrectLights: true,
|
||||
clearColor: '#000',
|
||||
outputColorSpace: SRGBColorSpace,
|
||||
windowSize: true,
|
||||
renderMode: 'manual',
|
||||
powerPreference: 'high-performance',
|
||||
antialias: false,
|
||||
alpha: false,
|
||||
useLegacyLights: false,
|
||||
physicallyCorrectLights: true,
|
||||
}
|
||||
const paneState = reactive({
|
||||
pass: true,
|
||||
color: '#ffaa00'
|
||||
pass: true,
|
||||
color: '#ffaa00',
|
||||
})
|
||||
const paneControl = new Pane({
|
||||
title: '参数',
|
||||
expanded: true
|
||||
title: '参数',
|
||||
expanded: true,
|
||||
})
|
||||
paneControl.addBinding(paneState, 'pass', {
|
||||
label: '后处理'
|
||||
label: '后处理',
|
||||
})
|
||||
paneControl.addBinding(paneState, 'color', {
|
||||
label: '颜色'
|
||||
label: '颜色',
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<loading :styleNum="4" />
|
||||
<TresCanvas v-bind="gl">
|
||||
<TresPerspectiveCamera :position="[0, 0, -4]" :fov="45" :near="0.1" :far="1000" :look-at="[0, 0, 0]" />
|
||||
<loading :styleNum="4" />
|
||||
<TresCanvas v-bind="gl">
|
||||
<TresPerspectiveCamera :position="[0, 0, -4]" :fov="45" :near="0.1" :far="1000" :look-at="[0, 0, 0]" />
|
||||
|
||||
<particalPass :use="paneState.pass" />
|
||||
<ScrollControls v-model="progress" :distance="10" :smooth-scroll="0.1" html-scroll>
|
||||
<Suspense>
|
||||
<particalFBO :progress="progress" :color="paneState.color" />
|
||||
</Suspense>
|
||||
</ScrollControls>
|
||||
</TresCanvas>
|
||||
<main>
|
||||
<section>
|
||||
<h1>关羽 - GuanYu</h1>
|
||||
</section>
|
||||
<section>
|
||||
<h1 style="margin-left: -11em;margin-bottom: -10em;">大脑 - Brain</h1>
|
||||
</section>
|
||||
<section>
|
||||
<h1 style="margin-left: 11em;margin-bottom: -10em;">设备 - Device</h1>
|
||||
</section>
|
||||
</main>
|
||||
<particalPass :use="paneState.pass" />
|
||||
<ScrollControls v-model="progress" :distance="10" :smooth-scroll="0.1" html-scroll>
|
||||
<Suspense>
|
||||
<particalFBO :progress="progress" :color="paneState.color" />
|
||||
</Suspense>
|
||||
</ScrollControls>
|
||||
</TresCanvas>
|
||||
<main>
|
||||
<section>
|
||||
<h1>关羽 - GuanYu</h1>
|
||||
</section>
|
||||
<section>
|
||||
<h1 style="margin-left: -11em; margin-bottom: -10em">大脑 - Brain</h1>
|
||||
</section>
|
||||
<section>
|
||||
<h1 style="margin-left: 11em; margin-bottom: -10em">设备 - Device</h1>
|
||||
</section>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
main {
|
||||
background-color: transparent;
|
||||
position: relative;
|
||||
/* z-index: 1; */
|
||||
background-color: transparent;
|
||||
position: relative;
|
||||
/* z-index: 1; */
|
||||
}
|
||||
|
||||
section {
|
||||
min-height: 100vh;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
min-height: 100vh;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #f7f7f7;
|
||||
margin-left: 6em;
|
||||
font-size: 3em;
|
||||
text-align: center;
|
||||
color: #f7f7f7;
|
||||
margin-left: 6em;
|
||||
font-size: 3em;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.tp-dfwv {
|
||||
position: fixed !important;
|
||||
position: fixed !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,44 +1,58 @@
|
||||
<template>
|
||||
<TresFog v-if="props.type === 'Fog'" :color="props.color" :near="props.near" :far="props.far" />
|
||||
</template>
|
||||
<!--
|
||||
* @Description:
|
||||
* @Version: 1.668
|
||||
* @Autor: 地虎降天龙
|
||||
* @Date: 2023-12-12 11:40:48
|
||||
* @LastEditors: 地虎降天龙
|
||||
* @LastEditTime: 2024-07-18 11:02:29
|
||||
-->
|
||||
<template></template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useTresContext } from '@tresjs/core'
|
||||
import { Color, FogExp2 } from 'three'
|
||||
import { Color, FogExp2, Fog } from 'three'
|
||||
import { watch } from 'vue'
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
type?: String
|
||||
color?: String
|
||||
density?: Number
|
||||
near?: Number
|
||||
far?: Number
|
||||
}>(), {
|
||||
type: 'Fog',
|
||||
color: "#000",
|
||||
density: 0.01,
|
||||
near: 100,
|
||||
far: 4000
|
||||
})
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
type?: String
|
||||
color?: String
|
||||
density?: Number
|
||||
near?: Number
|
||||
far?: Number
|
||||
}>(),
|
||||
{
|
||||
type: 'Fog',
|
||||
color: '#000',
|
||||
density: 0.01,
|
||||
near: 100,
|
||||
far: 4000,
|
||||
},
|
||||
)
|
||||
|
||||
const { scene } = useTresContext()
|
||||
watch(
|
||||
() => props.type,
|
||||
(nv, ov) => {
|
||||
// console.log(nv, ov)
|
||||
if (nv === 'FogExp2') {
|
||||
scene.value.fog = new FogExp2(props.color, 0.0010)
|
||||
}
|
||||
})
|
||||
() => props.type,
|
||||
(nv) => {
|
||||
if (nv === 'FogExp2') {
|
||||
scene.value.fog = new FogExp2(props.color, props.density)
|
||||
} else {
|
||||
scene.value.fog = new Fog(props.color, props.near, props.far)
|
||||
}
|
||||
},
|
||||
{ immediate: true },
|
||||
)
|
||||
|
||||
watch(() => props.color,
|
||||
(nv, ov) => {
|
||||
scene.value.fog.color = new Color(props.color)
|
||||
}
|
||||
watch(
|
||||
() => [props.color, props.near, props.far, props.density],
|
||||
([color, near, far, density]) => {
|
||||
scene.value.fog.color = new Color(color)
|
||||
if (props.type === 'Fog') {
|
||||
scene.value.fog.near = near
|
||||
scene.value.fog.far = far
|
||||
} else {
|
||||
scene.value.fog.density = density
|
||||
}
|
||||
},
|
||||
)
|
||||
watch(() => props.density,
|
||||
(nv, ov) => {
|
||||
scene.value.fog.density = props.density
|
||||
}
|
||||
)
|
||||
</script>
|
||||
</script>
|
||||
|
||||
@ -4,17 +4,16 @@
|
||||
* @Autor: 地虎降天龙
|
||||
* @Date: 2023-12-11 11:20:54
|
||||
* @LastEditors: 地虎降天龙
|
||||
* @LastEditTime: 2023-12-11 16:52:26
|
||||
* @LastEditTime: 2024-07-18 11:07:44
|
||||
-->
|
||||
<template>
|
||||
<pagesShow :showAxesHelper="false" :showGridHelper="false" :showBuildings="false" ref="pagesShowRef"
|
||||
:autoRotate="false">
|
||||
<template v-slot:ability>
|
||||
<Suspense>
|
||||
<cityRiver />
|
||||
</Suspense>
|
||||
</template>
|
||||
</pagesShow>
|
||||
<pagesShow :showAxesHelper="false" :showGridHelper="false" :showBuildings="false" ref="pagesShowRef" :autoRotate="false">
|
||||
<template v-slot:ability>
|
||||
<Suspense>
|
||||
<cityRiver />
|
||||
</Suspense>
|
||||
</template>
|
||||
</pagesShow>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@ -25,16 +24,16 @@ import { shallowRef, watchEffect } from 'vue'
|
||||
import { useRenderLoop } from '@tresjs/core'
|
||||
const pagesShowRef = shallowRef(null)
|
||||
watchEffect(() => {
|
||||
if (pagesShowRef.value) {
|
||||
pagesShowRef.value.$refs.perspectiveCameraRef.position.set(4.0, 2.15, 3.6)
|
||||
// pagesShowRef.value.$refs.perspectiveCameraRef.lookAt(0, 0, -2)
|
||||
}
|
||||
if (pagesShowRef.value) {
|
||||
pagesShowRef.value.$refs.perspectiveCameraRef.position.set(4.0, 2.15, 3.6)
|
||||
// pagesShowRef.value.$refs.perspectiveCameraRef.lookAt(0, 0, -2)
|
||||
}
|
||||
})
|
||||
|
||||
const { onLoop } = useRenderLoop()
|
||||
onLoop(() => {
|
||||
if (pagesShowRef.value) {
|
||||
console.log(pagesShowRef.value.$refs.perspectiveCameraRef)
|
||||
}
|
||||
if (pagesShowRef.value) {
|
||||
// console.log(pagesShowRef.value.$refs.perspectiveCameraRef)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
@ -4,45 +4,39 @@
|
||||
* @Autor: 地虎降天龙
|
||||
* @Date: 2024-04-15 08:21:22
|
||||
* @LastEditors: 地虎降天龙
|
||||
* @LastEditTime: 2024-04-15 11:56:56
|
||||
* @LastEditTime: 2024-07-18 11:58:37
|
||||
*/
|
||||
import {useTexture} from '@tresjs/core'
|
||||
import * as THREE from 'three'
|
||||
import CustomShaderMaterial from 'three-custom-shader-material/vanilla'
|
||||
|
||||
import fragmentShader from '../shaders/reflectorCustomMaterial.frag'
|
||||
import vertexShader from '../shaders/reflectorCustomMaterial.vert'
|
||||
|
||||
const makeCustomShaderMaterial = (mirror: THREE.Mesh,reflector: any) => {
|
||||
const floorUniforms = {
|
||||
uColor: { type: "c", value: new THREE.Color('white') },
|
||||
uReflectMatrix: { type: "m4", value:new THREE.Matrix4()},
|
||||
uReflectTexture: { type: "t", value:new THREE.Texture()},
|
||||
uReflectIntensity: { type: "f", value: 15 },
|
||||
uIntensity: { type: "f", value: 1 },
|
||||
uLevel: { type: "f", value: 3.5 },
|
||||
uResolution: { type: "v2", value: new THREE.Vector2() },
|
||||
uTime: { type: "f", value: 0 },
|
||||
}
|
||||
|
||||
const material = new CustomShaderMaterial({
|
||||
baseMaterial: mirror.material,
|
||||
uniforms: floorUniforms,
|
||||
vertexShader,
|
||||
fragmentShader,
|
||||
silent: true,
|
||||
})
|
||||
const makeCustomShaderMaterial = (mirror: THREE.Mesh, reflector: any) => {
|
||||
const floorUniforms = {
|
||||
uColor: { type: 'c', value: new THREE.Color('white') },
|
||||
uReflectMatrix: { type: 'm4', value: new THREE.Matrix4() },
|
||||
uReflectTexture: { type: 't', value: new THREE.Texture() },
|
||||
uReflectIntensity: { type: 'f', value: 15 },
|
||||
uIntensity: { type: 'f', value: 1 },
|
||||
uLevel: { type: 'f', value: 3.5 },
|
||||
uResolution: { type: 'v2', value: new THREE.Vector2() },
|
||||
uTime: { type: 'f', value: 0 },
|
||||
}
|
||||
|
||||
floorUniforms.uReflectTexture.value = reflector.renderTarget.texture
|
||||
floorUniforms.uReflectMatrix.value = reflector.matrix
|
||||
const material = new CustomShaderMaterial({
|
||||
baseMaterial: mirror.material,
|
||||
uniforms: floorUniforms,
|
||||
vertexShader,
|
||||
fragmentShader,
|
||||
silent: true,
|
||||
})
|
||||
|
||||
floorUniforms.uResolution.value.set(
|
||||
reflector.renderTarget.width,
|
||||
reflector.renderTarget.height
|
||||
)
|
||||
return material
|
||||
floorUniforms.uReflectTexture.value = reflector.renderTarget.texture
|
||||
floorUniforms.uReflectMatrix.value = reflector.matrix
|
||||
|
||||
floorUniforms.uResolution.value.set(reflector.renderTarget.width, reflector.renderTarget.height)
|
||||
return material
|
||||
}
|
||||
|
||||
export {
|
||||
makeCustomShaderMaterial
|
||||
}
|
||||
export { makeCustomShaderMaterial }
|
||||
|
||||
@ -4,14 +4,14 @@
|
||||
* @Autor: 地虎降天龙
|
||||
* @Date: 2024-03-27 10:38:54
|
||||
* @LastEditors: 地虎降天龙
|
||||
* @LastEditTime: 2024-04-09 11:19:15
|
||||
* @LastEditTime: 2024-07-18 11:43:43
|
||||
-->
|
||||
<template>
|
||||
<TresGroup ref="contactShadowsRef">
|
||||
<primitive :object="scene" :scale="1.6" :position="[-0.5, -0.18, 0]" :rotation="[0, Math.PI / 5, 0]" />
|
||||
<!-- <ContactShadows :resolution="80" :opacity="1.0" :blur="1" :position="[0, -1.2, 0]" :frames="10" :scale="1" :far="1"
|
||||
<TresGroup ref="contactShadowsRef">
|
||||
<primitive :object="scene" :scale="1.6" :position="[-0.5, -0.18, 0]" :rotation="[0, Math.PI / 5, 0]" />
|
||||
<!-- <ContactShadows :resolution="80" :opacity="1.0" :blur="1" :position="[0, -1.2, 0]" :frames="10" :scale="1" :far="1"
|
||||
:width="10" :height="10" /> -->
|
||||
</TresGroup>
|
||||
</TresGroup>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
@ -22,13 +22,14 @@ import * as THREE from 'three'
|
||||
// const contactShadowsRef = shallowRef(null)
|
||||
// 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/' })
|
||||
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
|
||||
}
|
||||
if (node.isMesh) {
|
||||
node.receiveShadow = node.castShadow = true
|
||||
}
|
||||
})
|
||||
materials.rubber.color = new THREE.Color('#222')
|
||||
materials.rubber.roughness = 0.6
|
||||
@ -47,9 +48,9 @@ materials.paint.envMapIntensity = 2
|
||||
materials.paint.roughness = 0.45
|
||||
materials.paint.metalness = 0.8
|
||||
materials.paint.color = new THREE.Color('#555')
|
||||
// materials.paint.reflectivity = 1
|
||||
// materials.paint.diffuse = new THREE.Color(0xffffff)
|
||||
// materials.paint.specular = new THREE.Color(0xffffff)
|
||||
materials.paint.reflectivity = 1
|
||||
materials.paint.diffuse = new THREE.Color(0xffffff)
|
||||
materials.paint.specular = new THREE.Color(0xffffff)
|
||||
|
||||
// const pTexture = await loadHDR("https://opensource-1314935952.cos.ap-nanjing.myqcloud.com/images/skyBox/desert_1k.hdr")
|
||||
// Object.values(materials).forEach((ma) => {
|
||||
@ -57,7 +58,6 @@ materials.paint.color = new THREE.Color('#555')
|
||||
// ma.envMap = pTexture
|
||||
// })
|
||||
|
||||
|
||||
// watch(() => contactShadowsRef.value, (value) => {
|
||||
// debugger
|
||||
// value.children[1].children[0].visable = false
|
||||
@ -65,4 +65,4 @@ materials.paint.color = new THREE.Color('#555')
|
||||
// }, {
|
||||
// deep: true
|
||||
// })
|
||||
</script>
|
||||
</script>
|
||||
|
||||
@ -4,42 +4,45 @@
|
||||
* @Autor: 地虎降天龙
|
||||
* @Date: 2024-04-07 14:29:57
|
||||
* @LastEditors: 地虎降天龙
|
||||
* @LastEditTime: 2024-04-09 08:48:07
|
||||
* @LastEditTime: 2024-07-18 11:40:26
|
||||
-->
|
||||
<template>
|
||||
<Suspense>
|
||||
<Environment :blur="1" background :far="10000">
|
||||
<Lightformer :intensity="0.75" :rotation-x="Math.PI / 2" :position="[0, 5, -9]" :scale="[10, 10, 1]" />
|
||||
<Lightformer :intensity="4" :rotation-y="Math.PI / 2" :position="[-5, 1, -1]" :scale="[20, 0.1, 1]" />
|
||||
<Lightformer :rotation-y="Math.PI / 2" :position="[-5, -1, -1]" :scale="[20, 0.5, 1]" />
|
||||
<Lightformer :rotation-y="-Math.PI / 2" :position="[10, 1, 0]" :scale="[20, 11, 1]" />
|
||||
<Levioso :speed="5" :floatFactor="2" :rotationFactor="2">
|
||||
<Lightformer form="ring" color="red" :intensity="1" :scale="10" :position="[-15, 4, -18]" />
|
||||
</Levioso>
|
||||
<Environment :blur="1" background :far="10000">
|
||||
<Lightformer :intensity="1" :rotation-x="Math.PI / 2" :position="[0, 5, -9]" :scale="[10, 10, 1]" />
|
||||
<Lightformer :intensity="4" :rotation-y="Math.PI / 2" :position="[-5, 1, -1]" :scale="[20, 0.1, 1]" />
|
||||
<Lightformer :intensity="3" :rotation-y="Math.PI / 2" :position="[-5, -1, -1]" :scale="[20, 0.5, 1]" />
|
||||
<Lightformer :intensity="3" :rotation-y="-Math.PI / 2" :position="[10, 1, 0]" :scale="[20, 11, 1]" />
|
||||
<Levioso :speed="5" :floatFactor="2" :rotationFactor="2">
|
||||
<Lightformer form="ring" color="red" :intensity="3" :scale="10" :position="[-15, 4, -18]" />
|
||||
</Levioso>
|
||||
|
||||
<TresGroup :rotation="[0, 0.5, 0]">
|
||||
<TresGroup ref="group">
|
||||
<Lightformer v-for="( i, x ) in lightFormerPositions " :key="i" form="circle" :intensity="2"
|
||||
:rotation="[Math.PI / 2, 0, 0]" :position="[x, 4, i * 4]" :scale="[3, 1, 1]" />
|
||||
</TresGroup>
|
||||
</TresGroup>
|
||||
<TresGroup :rotation="[0, 0.5, 0]">
|
||||
<TresGroup ref="group">
|
||||
<Lightformer
|
||||
v-for="(i, x) in lightFormerPositions"
|
||||
:key="i"
|
||||
form="circle"
|
||||
:intensity="2"
|
||||
:rotation="[Math.PI / 2, 0, 0]"
|
||||
:position="[x, 4, i * 4]"
|
||||
:scale="[3, 1, 1]"
|
||||
/>
|
||||
</TresGroup>
|
||||
</TresGroup>
|
||||
|
||||
<TresMesh :scale="[100, 100, 100]">
|
||||
<TresSphereGeometry :args="[1, 64, 64]" />
|
||||
<LayerMaterial :side="THREE.BackSide">
|
||||
<Color color="#444" :alpha="1.0" mode="normal" />
|
||||
<Depth colorA="blue" colorB="black" :alpha="0.5" mode="normal" :near="0" :far="300"
|
||||
:origin="new THREE.Vector3(100, 100, 100)" />
|
||||
</LayerMaterial>
|
||||
</TresMesh>
|
||||
</Environment>
|
||||
</Suspense>
|
||||
<TresMesh :scale="[100, 100, 100]">
|
||||
<TresSphereGeometry :args="[1, 64, 64]" />
|
||||
<LayerMaterial :side="THREE.BackSide">
|
||||
<Color color="#444" :alpha="1.0" mode="normal" />
|
||||
<Depth colorA="blue" colorB="black" :alpha="0.5" mode="normal" :near="0" :far="300" :origin="new THREE.Vector3(100, 100, 100)" />
|
||||
</LayerMaterial>
|
||||
</TresMesh>
|
||||
</Environment>
|
||||
</template>
|
||||
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue"
|
||||
import * as THREE from "three"
|
||||
import { ref } from 'vue'
|
||||
import * as THREE from 'three'
|
||||
import { useRenderLoop } from '@tresjs/core'
|
||||
import { LayerMaterial, Color, Depth } from 'PLS/basic/components/forCientos/LayerMaterial'
|
||||
import { Levioso } from '@tresjs/cientos'
|
||||
@ -50,9 +53,9 @@ const lightFormerPositions = [2, 0, 2, 0, 2, 0, 2, 0]
|
||||
const group = ref(null)
|
||||
const { onBeforeLoop } = useRenderLoop()
|
||||
onBeforeLoop(({ delta }) => {
|
||||
if (group.value) {
|
||||
// @ts-ignore
|
||||
(group.value.position.z += delta * 10) > 20 && (group.value.position.z = -60)
|
||||
}
|
||||
if (group.value) {
|
||||
// @ts-ignore
|
||||
;(group.value.position.z += delta * 10) > 20 && (group.value.position.z = -60)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
</script>
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
* @Autor: 地虎降天龙
|
||||
* @Date: 2024-03-27 10:38:54
|
||||
* @LastEditors: 地虎降天龙
|
||||
* @LastEditTime: 2024-04-16 08:34:07
|
||||
* @LastEditTime: 2024-07-18 11:58:55
|
||||
-->
|
||||
<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
|
||||
@ -76,9 +76,10 @@ const reflectorMipMapRef = ref(null)
|
||||
watch(
|
||||
() => reflectorMipMapRef,
|
||||
(newVal) => {
|
||||
debugger
|
||||
floor.material = makeCustomShaderMaterial(floor, newVal.value) as any
|
||||
},
|
||||
{ deep: true }
|
||||
{ deep: true },
|
||||
)
|
||||
|
||||
watch(
|
||||
@ -92,12 +93,12 @@ watch(
|
||||
floor.material.envMapIntensity = 0
|
||||
lightMat.opacity = 1
|
||||
}
|
||||
}
|
||||
},
|
||||
)
|
||||
|
||||
const tresMesh = ref<THREE.Mesh>()
|
||||
defineExpose({
|
||||
meshList: [light, floor],
|
||||
tresMesh
|
||||
tresMesh,
|
||||
})
|
||||
</script>
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
* @Autor: 地虎降天龙
|
||||
* @Date: 2024-05-28 09:22:40
|
||||
* @LastEditors: 地虎降天龙
|
||||
* @LastEditTime: 2024-06-03 12:29:41
|
||||
* @LastEditTime: 2024-07-18 11:22:10
|
||||
-->
|
||||
|
||||
<template>
|
||||
@ -41,7 +41,7 @@ const state = reactive({
|
||||
shadowMapType: 1,
|
||||
toneMapping: 4,
|
||||
toneMappingExposure: 1,
|
||||
disableRender: true,
|
||||
renderMode: 'manual',
|
||||
})
|
||||
|
||||
const cameraConfig = {
|
||||
|
||||
@ -4,23 +4,22 @@
|
||||
* @Autor: 地虎降天龙
|
||||
* @Date: 2023-11-18 08:51:19
|
||||
* @LastEditors: 地虎降天龙
|
||||
* @LastEditTime: 2024-03-13 20:56:22
|
||||
* @LastEditTime: 2024-07-18 11:16:21
|
||||
-->
|
||||
<template>
|
||||
<loading />
|
||||
<TresCanvas v-bind="state" window-size>
|
||||
<TresPerspectiveCamera :position="[5, 5, 5]" :fov="45" :near="1" :far="1000" />
|
||||
<OrbitControls v-bind="controlsState" />
|
||||
<TresAmbientLight color="#ffffff" intensity="40" />
|
||||
<TresDirectionalLight :position="[0, 2, -4]" :intensity="1" />
|
||||
<Suspense>
|
||||
<device v-bind="deviceState" />
|
||||
</Suspense>
|
||||
<TresGridHelper :position="[0, -1, 0]" />
|
||||
</TresCanvas>
|
||||
<loading />
|
||||
<TresCanvas v-bind="state" window-size>
|
||||
<TresPerspectiveCamera :position="[5, 5, 5]" :fov="45" :near="1" :far="1000" />
|
||||
<OrbitControls v-bind="controlsState" />
|
||||
<TresAmbientLight color="#ffffff" intensity="40" />
|
||||
<TresDirectionalLight :position="[0, 2, -4]" :intensity="1" />
|
||||
<Suspense>
|
||||
<device v-bind="deviceState" />
|
||||
</Suspense>
|
||||
<TresGridHelper :position="[0, -1, 0]" />
|
||||
</TresCanvas>
|
||||
</template>
|
||||
|
||||
|
||||
<script setup lang="ts">
|
||||
import { SRGBColorSpace, BasicShadowMap, NoToneMapping } from 'three'
|
||||
import { reactive } from 'vue'
|
||||
@ -31,37 +30,40 @@ import { randomLoading as loading } from 'PLS/UIdemo'
|
||||
import device from '../components/device.vue'
|
||||
|
||||
const state = reactive({
|
||||
clearColor: '#000',
|
||||
shadows: true,
|
||||
alpha: false,
|
||||
shadowMapType: BasicShadowMap,
|
||||
outputColorSpace: SRGBColorSpace,
|
||||
toneMapping: NoToneMapping,
|
||||
disableRender: true
|
||||
clearColor: '#000',
|
||||
shadows: true,
|
||||
alpha: false,
|
||||
shadowMapType: BasicShadowMap,
|
||||
outputColorSpace: SRGBColorSpace,
|
||||
toneMapping: NoToneMapping,
|
||||
renderMode: 'manual',
|
||||
})
|
||||
const controlsState = reactive({
|
||||
autoRotate: true,
|
||||
autoRotate: true,
|
||||
})
|
||||
|
||||
const deviceState = reactive({
|
||||
threshold: 0, // 阈值
|
||||
strength: 0.6, // 强度
|
||||
radius: 0.21, // 半径
|
||||
threshold: 0, // 阈值
|
||||
strength: 0.6, // 强度
|
||||
radius: 0.21, // 半径
|
||||
})
|
||||
const paneControl = new Pane({ title: '参数', });
|
||||
const paneControl = new Pane({ title: '参数' })
|
||||
paneControl.addBinding(deviceState, 'threshold', {
|
||||
label: '阈值', min: 0,
|
||||
max: 1,
|
||||
step: 0.1,
|
||||
label: '阈值',
|
||||
min: 0,
|
||||
max: 1,
|
||||
step: 0.1,
|
||||
})
|
||||
paneControl.addBinding(deviceState, 'strength', {
|
||||
label: '强度', min: 0,
|
||||
max: 3,
|
||||
step: 0.2,
|
||||
label: '强度',
|
||||
min: 0,
|
||||
max: 3,
|
||||
step: 0.2,
|
||||
})
|
||||
paneControl.addBinding(deviceState, 'radius', {
|
||||
label: '半径', min: 0,
|
||||
max: 1,
|
||||
step: 0.1,
|
||||
label: '半径',
|
||||
min: 0,
|
||||
max: 1,
|
||||
step: 0.1,
|
||||
})
|
||||
</script>
|
||||
</script>
|
||||
|
||||
@ -4,27 +4,26 @@
|
||||
* @Autor: 地虎降天龙
|
||||
* @Date: 2023-11-18 08:51:19
|
||||
* @LastEditors: 地虎降天龙
|
||||
* @LastEditTime: 2024-03-20 10:26:59
|
||||
* @LastEditTime: 2024-07-18 11:16:40
|
||||
-->
|
||||
<template>
|
||||
<loading />
|
||||
<TresCanvas v-bind="state" window-size>
|
||||
<TresPerspectiveCamera :position="[-4, 5, 4]" :fov="45" :near="1" :far="1000" />
|
||||
<OrbitControls v-bind="controlsState" />
|
||||
<Suspense>
|
||||
<device v-bind="deviceState" />
|
||||
</Suspense>
|
||||
<Suspense>
|
||||
<reflectorShaderMesh v-bind="configState" :position="[0, 0, 0]" />
|
||||
</Suspense>
|
||||
<loading />
|
||||
<TresCanvas v-bind="state" window-size>
|
||||
<TresPerspectiveCamera :position="[-4, 5, 4]" :fov="45" :near="1" :far="1000" />
|
||||
<OrbitControls v-bind="controlsState" />
|
||||
<Suspense>
|
||||
<device v-bind="deviceState" />
|
||||
</Suspense>
|
||||
<Suspense>
|
||||
<reflectorShaderMesh v-bind="configState" :position="[0, 0, 0]" />
|
||||
</Suspense>
|
||||
|
||||
<divContent />
|
||||
<useHtmlComChart :position="[-0.5, -0.001, 2.25]" :rotation="[-Math.PI / 2, 0, -Math.PI / 2]" />
|
||||
<!-- <divChart :position="[-0.5, -0.001, 1.75]" :rotation="[-Math.PI / 2, 0, -Math.PI / 2]" /> -->
|
||||
</TresCanvas>
|
||||
<divContent />
|
||||
<useHtmlComChart :position="[-0.5, -0.001, 2.25]" :rotation="[-Math.PI / 2, 0, -Math.PI / 2]" />
|
||||
<!-- <divChart :position="[-0.5, -0.001, 1.75]" :rotation="[-Math.PI / 2, 0, -Math.PI / 2]" /> -->
|
||||
</TresCanvas>
|
||||
</template>
|
||||
|
||||
|
||||
<script setup lang="ts">
|
||||
import { SRGBColorSpace, BasicShadowMap, NoToneMapping } from 'three'
|
||||
import { reactive } from 'vue'
|
||||
@ -38,28 +37,28 @@ import useHtmlComChart from 'PLS/industry4/components/useHtmlComChart.vue'
|
||||
import device from '../components/device.vue'
|
||||
|
||||
const configState = reactive({
|
||||
reflectivity: 0.1,
|
||||
mirror: 0.92, // 去除纹理 镜面化
|
||||
mixStrength: 36,
|
||||
showGridHelper: false,
|
||||
reflectivity: 0.1,
|
||||
mirror: 0.92, // 去除纹理 镜面化
|
||||
mixStrength: 36,
|
||||
showGridHelper: false,
|
||||
})
|
||||
|
||||
const state = reactive({
|
||||
clearColor: '#000',
|
||||
shadows: true,
|
||||
alpha: false,
|
||||
shadowMapType: BasicShadowMap,
|
||||
outputColorSpace: SRGBColorSpace,
|
||||
toneMapping: NoToneMapping,
|
||||
disableRender: true
|
||||
clearColor: '#000',
|
||||
shadows: true,
|
||||
alpha: false,
|
||||
shadowMapType: BasicShadowMap,
|
||||
outputColorSpace: SRGBColorSpace,
|
||||
toneMapping: NoToneMapping,
|
||||
renderMode: 'manual',
|
||||
})
|
||||
const controlsState = reactive({
|
||||
autoRotate: true,
|
||||
autoRotate: true,
|
||||
})
|
||||
|
||||
const deviceState = reactive({
|
||||
threshold: 0.37, // 阈值
|
||||
strength: 1.6, // 强度
|
||||
radius: 0.1, // 半径
|
||||
threshold: 0.37, // 阈值
|
||||
strength: 1.6, // 强度
|
||||
radius: 0.1, // 半径
|
||||
})
|
||||
</script>
|
||||
</script>
|
||||
|
||||
@ -64,7 +64,7 @@ const state = reactive({
|
||||
clearColor: '#15151a',
|
||||
antialias: false,
|
||||
logarithmicDepthBuffer: true,
|
||||
disableRender: true,
|
||||
renderMode: 'manual',
|
||||
})
|
||||
const controlsState = reactive({
|
||||
autoRotate: true,
|
||||
|
||||
@ -4,27 +4,36 @@
|
||||
* @Autor: 地虎降天龙
|
||||
* @Date: 2023-11-18 08:51:19
|
||||
* @LastEditors: 地虎降天龙
|
||||
* @LastEditTime: 2024-04-10 15:01:27
|
||||
* @LastEditTime: 2024-07-18 11:42:46
|
||||
-->
|
||||
<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="0.5" />
|
||||
<!-- <TresDirectionalLight color="#ffffff" intensity="5" castShadow v-light-helper :position="[0, 3, 0]" /> -->
|
||||
<!-- <TresSpotLight ref="spotLight" :position="[0, 10, 0]" :angle="Math.PI / 4" :distance="20" v-light-helper
|
||||
:penumbra="0.1" castShadow :intensity="60" :decay="1.5" :focus="0.5" /> -->
|
||||
<TresSpotLight ref="spotLight" :position="[0, 10, 0]" :angle="Math.PI / 4" :distance="20" :penumbra="0.1" castShadow
|
||||
:intensity="60" :decay="1.5" :focus="0.5" />
|
||||
<Suspense>
|
||||
<carModel />
|
||||
</Suspense>
|
||||
<Suspense>
|
||||
<reflectorShaderMesh v-bind="configState" :position="[0, -1.17, 0]" />
|
||||
</Suspense>
|
||||
<envLightForCar />
|
||||
</TresCanvas>
|
||||
<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" />
|
||||
<TresDirectionalLight color="#ffffff" :intensity="5" castShadow :position="[0, 3, 0]" />
|
||||
<TresSpotLight
|
||||
ref="spotLight"
|
||||
:position="[0, 10, 0]"
|
||||
:angle="Math.PI / 4"
|
||||
:distance="20"
|
||||
:penumbra="0.1"
|
||||
castShadow
|
||||
:intensity="60"
|
||||
:decay="1.5"
|
||||
:focus="0.5"
|
||||
/>
|
||||
<Suspense>
|
||||
<carModel />
|
||||
</Suspense>
|
||||
<Suspense>
|
||||
<reflectorShaderMesh v-bind="configState" :position="[0, -1.17, 0]" />
|
||||
</Suspense>
|
||||
<Suspense>
|
||||
<envLightForCar />
|
||||
</Suspense>
|
||||
</TresCanvas>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@ -39,35 +48,34 @@ import carModel from '../components/carModel.vue'
|
||||
|
||||
const spotLight = ref(null as THREE.SpotLight | null)
|
||||
watchEffect(() => {
|
||||
if (spotLight.value) {
|
||||
// spotLight.value.shadow.mapSize.width = 1024
|
||||
// spotLight.value.shadow.mapSize.height = 1024
|
||||
// spotLight.value.shadow.camera.near = 1
|
||||
// spotLight.value.shadow.camera.far = 100
|
||||
spotLight.value.shadow.bias = -0.0001
|
||||
}
|
||||
if (spotLight.value) {
|
||||
spotLight.value.shadow.mapSize.width = 1024
|
||||
spotLight.value.shadow.mapSize.height = 1024
|
||||
spotLight.value.shadow.camera.near = 1
|
||||
spotLight.value.shadow.camera.far = 100
|
||||
spotLight.value.shadow.bias = -0.0001
|
||||
}
|
||||
})
|
||||
|
||||
const configState = reactive({
|
||||
reflectivity: 0.1,
|
||||
mirror: 0.92, // 去除纹理 镜面化
|
||||
mixStrength: 36,
|
||||
showGridHelper: false,
|
||||
reflectivity: 0.1,
|
||||
mirror: 0.92, // 去除纹理 镜面化
|
||||
mixStrength: 36,
|
||||
showGridHelper: false,
|
||||
})
|
||||
|
||||
const state = reactive({
|
||||
clearColor: '#111111',
|
||||
shadows: true,
|
||||
alpha: false,
|
||||
antialias: true,
|
||||
pixelRatio: window.devicePixelRatio,
|
||||
outputColorSpace: THREE.SRGBColorSpace,
|
||||
// toneMapping: THREE.ACESFilmic,
|
||||
useLegacyLights: true,
|
||||
physicallyCorrectLights: true,
|
||||
clearColor: '#111111',
|
||||
shadows: true,
|
||||
alpha: false,
|
||||
antialias: true,
|
||||
pixelRatio: window.devicePixelRatio,
|
||||
outputColorSpace: THREE.SRGBColorSpace,
|
||||
// toneMapping: THREE.ACESFilmic,
|
||||
useLegacyLights: true,
|
||||
physicallyCorrectLights: true,
|
||||
})
|
||||
const controlsState = reactive({
|
||||
autoRotate: true,
|
||||
autoRotate: true,
|
||||
})
|
||||
|
||||
</script>
|
||||
</script>
|
||||
|
||||
@ -4,49 +4,49 @@
|
||||
* @Autor: 地虎降天龙
|
||||
* @Date: 2023-11-18 08:51:19
|
||||
* @LastEditors: 地虎降天龙
|
||||
* @LastEditTime: 2024-05-23 15:00:56
|
||||
* @LastEditTime: 2024-07-18 11:22:00
|
||||
-->
|
||||
<template>
|
||||
<loading />
|
||||
<TresCanvas v-bind="state" window-size>
|
||||
<TresPerspectiveCamera :position="[0, 10, 15]" :fov="25" :near="0.1" :far="10000" />
|
||||
<OrbitControls v-bind="controlsState" />
|
||||
<TresHemisphereLight :intensity="0.5" />
|
||||
<loading />
|
||||
<TresCanvas v-bind="state" window-size>
|
||||
<TresPerspectiveCamera :position="[0, 10, 15]" :fov="25" :near="0.1" :far="10000" />
|
||||
<OrbitControls v-bind="controlsState" />
|
||||
<TresHemisphereLight :intensity="0.5" />
|
||||
|
||||
<Suspense>
|
||||
<lamboModel />
|
||||
</Suspense>
|
||||
<Suspense>
|
||||
<lamboModel />
|
||||
</Suspense>
|
||||
|
||||
<Suspense>
|
||||
<reflectorDUDV :position="[0, -1.562, 0]" :reflectivity="2.6" :showGridHelper="false" :scale="1.5" />
|
||||
</Suspense>
|
||||
<Suspense>
|
||||
<reflectorDUDV :position="[0, -1.562, 0]" :reflectivity="2.6" :showGridHelper="false" :scale="1.5" />
|
||||
</Suspense>
|
||||
|
||||
<TresMesh :scale="4" :position="[3, -1.161, -1.5]" :rotation="[-Math.PI / 2, 0, Math.PI / 2.5]">
|
||||
<TresRingGeometry :args="[0.9, 1, 4, 1]" />
|
||||
<TresMeshStandardMaterial color="white" :roughness="0.75" :side="THREE.DoubleSide" />
|
||||
</TresMesh>
|
||||
<TresMesh :scale="4" :position="[-3, -1.161, -1]" :rotation="[-Math.PI / 2, 0, Math.PI / 2.5]">
|
||||
<TresRingGeometry :args="[0.9, 1, 3, 1]" />
|
||||
<TresMeshStandardMaterial color="white" :roughness="0.75" :side="THREE.DoubleSide" />
|
||||
</TresMesh>
|
||||
<TresMesh :scale="4" :position="[3, -1.161, -1.5]" :rotation="[-Math.PI / 2, 0, Math.PI / 2.5]">
|
||||
<TresRingGeometry :args="[0.9, 1, 4, 1]" />
|
||||
<TresMeshStandardMaterial color="white" :roughness="0.75" :side="THREE.DoubleSide" />
|
||||
</TresMesh>
|
||||
<TresMesh :scale="4" :position="[-3, -1.161, -1]" :rotation="[-Math.PI / 2, 0, Math.PI / 2.5]">
|
||||
<TresRingGeometry :args="[0.9, 1, 3, 1]" />
|
||||
<TresMeshStandardMaterial color="white" :roughness="0.75" :side="THREE.DoubleSide" />
|
||||
</TresMesh>
|
||||
|
||||
<Suspense>
|
||||
<Environment :resolution="512">
|
||||
<Lightformer :intensity="2" :position="[0, 1, 3]" :scale="[10, 1, 1]" />
|
||||
<Lightformer :intensity="2" :rotation-x="Math.PI / 2" :position="[0, 4, -6]" :scale="[10, 1, 1]" />
|
||||
<Lightformer :intensity="2" :rotation-x="Math.PI / 2" :position="[0, 4, -3]" :scale="[10, 1, 1]" />
|
||||
<Lightformer :intensity="2" :rotation-x="Math.PI / 2" :position="[0, 4, 0]" :scale="[10, 1, 1]" />
|
||||
<Lightformer :intensity="2" :rotation-x="Math.PI / 2" :position="[0, 4, 3]" :scale="[10, 1, 1]" />
|
||||
<Lightformer :intensity="2" :rotation-x="Math.PI / 2" :position="[0, 4, 6]" :scale="[10, 1, 1]" />
|
||||
<Lightformer :intensity="2" :rotation-x="Math.PI / 2" :position="[0, 4, 9]" :scale="[10, 1, 1]" />
|
||||
<Lightformer :intensity="2" :rotation-y="Math.PI / 2" :position="[-50, 2, 0]" :scale="[100, 2, 1]" />
|
||||
<Lightformer :intensity="2" :rotation-y="-Math.PI / 2" :position="[50, 2, 0]" :scale="[100, 2, 1]" />
|
||||
<Lightformer form="ring" color="red" :intensity="10" :scale="2" :position="[10, 5, 10]" />
|
||||
</Environment>
|
||||
</Suspense>
|
||||
<Suspense>
|
||||
<Environment :resolution="512">
|
||||
<Lightformer :intensity="2" :position="[0, 1, 3]" :scale="[10, 1, 1]" />
|
||||
<Lightformer :intensity="2" :rotation-x="Math.PI / 2" :position="[0, 4, -6]" :scale="[10, 1, 1]" />
|
||||
<Lightformer :intensity="2" :rotation-x="Math.PI / 2" :position="[0, 4, -3]" :scale="[10, 1, 1]" />
|
||||
<Lightformer :intensity="2" :rotation-x="Math.PI / 2" :position="[0, 4, 0]" :scale="[10, 1, 1]" />
|
||||
<Lightformer :intensity="2" :rotation-x="Math.PI / 2" :position="[0, 4, 3]" :scale="[10, 1, 1]" />
|
||||
<Lightformer :intensity="2" :rotation-x="Math.PI / 2" :position="[0, 4, 6]" :scale="[10, 1, 1]" />
|
||||
<Lightformer :intensity="2" :rotation-x="Math.PI / 2" :position="[0, 4, 9]" :scale="[10, 1, 1]" />
|
||||
<Lightformer :intensity="2" :rotation-y="Math.PI / 2" :position="[-50, 2, 0]" :scale="[100, 2, 1]" />
|
||||
<Lightformer :intensity="2" :rotation-y="-Math.PI / 2" :position="[50, 2, 0]" :scale="[100, 2, 1]" />
|
||||
<Lightformer form="ring" color="red" :intensity="10" :scale="2" :position="[10, 5, 10]" />
|
||||
</Environment>
|
||||
</Suspense>
|
||||
|
||||
<lamboEffect />
|
||||
</TresCanvas>
|
||||
<lamboEffect />
|
||||
</TresCanvas>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@ -60,13 +60,12 @@ import lamboModel from '../components/lamboModel.vue'
|
||||
import lamboEffect from '../components/lamboEffect.vue'
|
||||
|
||||
const state = reactive({
|
||||
clearColor: '#15151a',
|
||||
antialias: false,
|
||||
logarithmicDepthBuffer: true,
|
||||
disableRender: true
|
||||
clearColor: '#15151a',
|
||||
antialias: false,
|
||||
logarithmicDepthBuffer: true,
|
||||
renderMode: 'manual',
|
||||
})
|
||||
const controlsState = reactive({
|
||||
autoRotate: true,
|
||||
autoRotate: true,
|
||||
})
|
||||
|
||||
</script>
|
||||
</script>
|
||||
|
||||
@ -4,44 +4,47 @@
|
||||
* @Autor: 地虎降天龙
|
||||
* @Date: 2023-11-18 08:51:19
|
||||
* @LastEditors: 地虎降天龙
|
||||
* @LastEditTime: 2024-04-17 17:32:44
|
||||
* @LastEditTime: 2024-07-18 11:49:27
|
||||
-->
|
||||
<template>
|
||||
<loading />
|
||||
<TresCanvas v-bind="state" window-size>
|
||||
<Levioso :speed="showSpeedup ? 66 : 0" :rotationFactor="0.1" :floatFactor="0.1" :range="[-0.2, 0.1]">
|
||||
<TresPerspectiveCamera :position="[0, 5, 8]" :fov="45" :near="0.1" :far="500" />
|
||||
</Levioso>
|
||||
<OrbitControls v-bind="controlsState" />
|
||||
<!-- <TresAmbientLight color="#ffffff" intensity="10" />
|
||||
<TresDirectionalLight :position="[0, 2, -4]" :intensity="1" /> -->
|
||||
<Suspense>
|
||||
<loading />
|
||||
</Suspense>
|
||||
|
||||
<Suspense>
|
||||
<car :run="showSpeedup" />
|
||||
</Suspense>
|
||||
<TresCanvas v-bind="state" window-size>
|
||||
<Levioso :speed="showSpeedup ? 66 : 0" :rotationFactor="0.1" :floatFactor="0.1" :range="[-0.2, 0.1]">
|
||||
<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>
|
||||
<speedup :visible="showSpeedup" />
|
||||
</Suspense>
|
||||
<Suspense>
|
||||
<car :run="showSpeedup" />
|
||||
</Suspense>
|
||||
|
||||
<Suspense>
|
||||
<startroom :hide="showSpeedup" />
|
||||
</Suspense>
|
||||
<Suspense>
|
||||
<speedup :visible="showSpeedup" />
|
||||
</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>
|
||||
</Suspense>
|
||||
<Suspense>
|
||||
<startroom :hide="showSpeedup" />
|
||||
</Suspense>
|
||||
|
||||
<su7Effect :hide="showSpeedup" />
|
||||
</TresCanvas>
|
||||
<UIcarSkin />
|
||||
<Suspense>
|
||||
<Environment :blur="0" :far="1000" :useDefaultScene="showSpeedup">
|
||||
<Lightformer :intensity="1" :rotation-x="Math.PI / 2" :position="[0, 5, 0]" :scale="[10, 10, 1]" />
|
||||
</Environment>
|
||||
</Suspense>
|
||||
|
||||
<su7Effect :hide="showSpeedup" />
|
||||
</TresCanvas>
|
||||
<UIcarSkin />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { reactive, ref } from 'vue'
|
||||
import { OrbitControls,Levioso } from '@tresjs/cientos'
|
||||
import { OrbitControls, Levioso } from '@tresjs/cientos'
|
||||
import { randomLoading as loading } from 'PLS/UIdemo'
|
||||
import { Pane } from 'tweakpane'
|
||||
import { Environment, Lightformer } from 'PLS/basic'
|
||||
@ -53,17 +56,17 @@ import su7Effect from '../components/su7/effect.vue'
|
||||
import UIcarSkin from '../components/su7/UIcarSkin.vue'
|
||||
|
||||
const state = reactive({
|
||||
clearColor: '#000',
|
||||
antialias: false,
|
||||
// logarithmicDepthBuffer: true, // 开启后，镜面反射底部会透明过来
|
||||
disableRender: true
|
||||
clearColor: '#000',
|
||||
antialias: false,
|
||||
logarithmicDepthBuffer: false, // 开启后，镜面反射底部会透明过来
|
||||
renderMode: 'manual',
|
||||
})
|
||||
const controlsState = reactive({
|
||||
// autoRotate: true,
|
||||
// autoRotate: true,
|
||||
})
|
||||
|
||||
const showSpeedup = ref(false)
|
||||
const paneControl = new Pane({ title: '参数', })
|
||||
const paneControl = new Pane({ title: '参数' })
|
||||
paneControl.addBinding(showSpeedup, 'value', { label: '流光模式' })
|
||||
|
||||
const su7Store = useSu7Store()
|
||||
@ -78,4 +81,4 @@ paneControl.addBinding(su7Store, 'showColorList', { label: '选择皮肤' })
|
||||
// showSpeedup.value = !showSpeedup.value
|
||||
// btn.title = showSpeedup.value ? '停止' : '启动'
|
||||
// })
|
||||
</script>
|
||||
</script>
|
||||
|
||||
@ -1,7 +1,14 @@
|
||||
<!--
|
||||
* @Description:
|
||||
* @Version: 1.668
|
||||
* @Autor: 地虎降天龙
|
||||
* @Date: 2024-03-22 11:14:44
|
||||
* @LastEditors: 地虎降天龙
|
||||
* @LastEditTime: 2024-07-18 11:24:22
|
||||
-->
|
||||
<template>
|
||||
<TresCanvas v-bind="state" window-size>
|
||||
<TresPerspectiveCamera ref="perspectiveCameraRef" :position="[600, 850, -1500]" :fov="45" :near="0.1"
|
||||
:far="100000" />
|
||||
<TresPerspectiveCamera ref="perspectiveCameraRef" :position="[600, 850, -1500]" :fov="45" :near="0.1" :far="100000" />
|
||||
<OrbitControls v-bind="controlsState" />
|
||||
<TresAmbientLight color="#ffffff" :intensity="2" />
|
||||
<TresDirectionalLight :position="[100, 100, 0]" :intensity="2" color="#ffffff" />
|
||||
@ -12,18 +19,19 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useRenderLoop } from '@tresjs/core'; //useRenderLoop
|
||||
import { OrbitControls } from '@tresjs/cientos';
|
||||
import postProcessing from '../components/postProcessing.vue';
|
||||
import { useRenderLoop } from '@tresjs/core' //useRenderLoop
|
||||
import { OrbitControls } from '@tresjs/cientos'
|
||||
import postProcessing from '../components/postProcessing.vue'
|
||||
|
||||
const state = {
|
||||
clearColor: '#000000',
|
||||
shadows: true,
|
||||
alpha: false,
|
||||
useLegacyLights: true,
|
||||
};
|
||||
const controlsState = { autoRotate: true, enableDamping: true };
|
||||
renderMode: 'manual',
|
||||
}
|
||||
const controlsState = { autoRotate: true, enableDamping: true }
|
||||
|
||||
const { onLoop } = useRenderLoop();
|
||||
onLoop(({ delta }) => { });
|
||||
const { onLoop } = useRenderLoop()
|
||||
onLoop(({ delta }) => {})
|
||||
</script>
|
||||
|
||||
@ -4,110 +4,111 @@
|
||||
* @Autor: 地虎降天龙
|
||||
* @Date: 2024-02-24 10:17:12
|
||||
* @LastEditors: 地虎降天龙
|
||||
* @LastEditTime: 2024-02-24 12:30:12
|
||||
* @LastEditTime: 2024-07-18 11:29:11
|
||||
-->
|
||||
<template>
|
||||
<TresGroup ref="tgRef">
|
||||
<TresMesh v-for="(item, index) in areaList " :key="`${index}`" :properties="item.properties" :renderOrder="index"
|
||||
@pointer-enter="pEnter" @pointer-leave="pLeave" @pointer-move="pMove">
|
||||
<TresExtrudeGeometry :args="[item.shape, extrudeSettings]" />
|
||||
<TresMeshBasicMaterial color="#2defff" :transparent="true" :opacity="0.6" />
|
||||
<!-- <TresMeshBasicMaterial color="#3480C4" :transparent="true" :opacity="0.5" /> tres暂时不支持多材质 -->
|
||||
</TresMesh>
|
||||
</TresGroup>
|
||||
<TresGroup ref="tgRef">
|
||||
<TresMesh
|
||||
v-for="(item, index) in areaList"
|
||||
:key="`${index}`"
|
||||
:properties="item.properties"
|
||||
:renderOrder="index"
|
||||
@pointer-enter="pEnter"
|
||||
@pointer-leave="pLeave"
|
||||
@pointer-move="pMove"
|
||||
>
|
||||
<TresExtrudeGeometry :args="[item.shape, extrudeSettings]" />
|
||||
<TresMeshBasicMaterial color="#2defff" :transparent="true" :opacity="0.6" />
|
||||
<!-- <TresMeshBasicMaterial color="#3480C4" :transparent="true" :opacity="0.5" /> tres暂时不支持多材质 -->
|
||||
</TresMesh>
|
||||
</TresGroup>
|
||||
</template>
|
||||
<script setup>
|
||||
import { loadGeojson } from 'PLS/digitalCity/common/utils'
|
||||
import { watchEffect, ref } from 'vue'
|
||||
import { useRenderLoop } from '@tresjs/core'
|
||||
import * as D3 from "d3-geo"
|
||||
import * as THREE from "three"
|
||||
import * as D3 from 'd3-geo'
|
||||
import * as THREE from 'three'
|
||||
import { computeBoundsTree, disposeBoundsTree, acceleratedRaycast } from 'three-mesh-bvh'
|
||||
|
||||
const initMeshBvh = () => {
|
||||
THREE.BufferGeometry.prototype.computeBoundsTree = computeBoundsTree;
|
||||
THREE.BufferGeometry.prototype.disposeBoundsTree = disposeBoundsTree;
|
||||
THREE.Mesh.prototype.raycast = acceleratedRaycast;
|
||||
THREE.BufferGeometry.prototype.computeBoundsTree = computeBoundsTree
|
||||
THREE.BufferGeometry.prototype.disposeBoundsTree = disposeBoundsTree
|
||||
THREE.Mesh.prototype.raycast = acceleratedRaycast
|
||||
}
|
||||
initMeshBvh()
|
||||
|
||||
// 墨卡托投影转换
|
||||
const projection = D3
|
||||
.geoMercator()
|
||||
.center([104.0, 37.5])
|
||||
.translate([0, 0])
|
||||
const projection = D3.geoMercator().center([104.0, 37.5]).translate([0, 0])
|
||||
|
||||
const areaJson = await loadGeojson('./plugins/simpleGIS/json/china.json', 'features')
|
||||
|
||||
const extrudeSettings = {
|
||||
depth: 10,
|
||||
bevelEnabled: false,
|
||||
depth: 10,
|
||||
bevelEnabled: false,
|
||||
}
|
||||
const areaList = []
|
||||
const makeAreaPrimary = () => {
|
||||
areaJson.forEach((elem) => {
|
||||
const coordinates = elem.geometry.coordinates
|
||||
coordinates.forEach((multiPolygon) => {
|
||||
multiPolygon.forEach((polygon) => {
|
||||
const shape = new THREE.Shape()
|
||||
for (let i = 0; i < polygon.length; i++) {
|
||||
const [x, y] = projection(polygon[i])
|
||||
if (i === 0) {
|
||||
shape.moveTo(x, -y)
|
||||
}
|
||||
shape.lineTo(x, -y)
|
||||
}
|
||||
areaList.push({ shape, properties: elem.properties })
|
||||
})
|
||||
})
|
||||
})
|
||||
areaJson.forEach((elem) => {
|
||||
const coordinates = elem.geometry.coordinates
|
||||
coordinates.forEach((multiPolygon) => {
|
||||
multiPolygon.forEach((polygon) => {
|
||||
const shape = new THREE.Shape()
|
||||
for (let i = 0; i < polygon.length; i++) {
|
||||
const [x, y] = projection(polygon[i])
|
||||
if (i === 0) {
|
||||
shape.moveTo(x, -y)
|
||||
}
|
||||
shape.lineTo(x, -y)
|
||||
}
|
||||
areaList.push({ shape, properties: elem.properties })
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
makeAreaPrimary()
|
||||
|
||||
const material2 = new THREE.LineBasicMaterial({ color: "#3480C4", linewidth: 1, linecap: 'round' })
|
||||
const material2 = new THREE.LineBasicMaterial({ color: '#3480C4', linewidth: 1, linecap: 'round' })
|
||||
const tgRef = ref()
|
||||
watchEffect(() => {
|
||||
if (tgRef.value) {
|
||||
tgRef.value.children.forEach((item) => {
|
||||
item.geometry.computeBoundsTree()
|
||||
if (tgRef.value) {
|
||||
tgRef.value.children.forEach((item) => {
|
||||
item.geometry.computeBoundsTree()
|
||||
|
||||
const arrayMaterial = [item.material, material2]
|
||||
item.material = arrayMaterial
|
||||
})
|
||||
}
|
||||
const arrayMaterial = [item.material, material2]
|
||||
item.material = arrayMaterial
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
let tooltip = null
|
||||
const addElementTips = () => {
|
||||
const El = document.createElement("div")
|
||||
El.className = "tooltip"
|
||||
El.style.border = "1px solid white"
|
||||
El.style.position = "absolute"
|
||||
El.style.color = "white"
|
||||
El.style.padding = "0px 6px"
|
||||
El.style.whiteSpace = "no-wrap"
|
||||
El.style.visibility = "hidden"
|
||||
document.body.appendChild(El)
|
||||
tooltip = El
|
||||
const El = document.createElement('div')
|
||||
El.className = 'tooltip'
|
||||
El.style.border = '1px solid white'
|
||||
El.style.position = 'absolute'
|
||||
El.style.color = 'white'
|
||||
El.style.padding = '0px 6px'
|
||||
El.style.whiteSpace = 'no-wrap'
|
||||
El.style.visibility = 'hidden'
|
||||
document.body.appendChild(El)
|
||||
tooltip = El
|
||||
}
|
||||
addElementTips()
|
||||
|
||||
const pEnter = (intersection, pointerEvent) => {
|
||||
intersection.object.material[0].color.set(0xff0000)
|
||||
tooltip.innerText = intersection.object.properties.name
|
||||
tooltip.style.visibility = "visible"
|
||||
const pEnter = (intersection) => {
|
||||
intersection.object.material[0].color.set(0xff0000)
|
||||
tooltip.innerText = intersection.object.properties.name
|
||||
tooltip.style.visibility = 'visible'
|
||||
}
|
||||
const pLeave = (intersection, pointerEvent) => {
|
||||
console.log('pointer-leave', intersection, pointerEvent)
|
||||
intersection.material[0].color.set(0x2defff)
|
||||
tooltip.style.visibility = "hidden"
|
||||
const pLeave = (intersection) => {
|
||||
intersection.eventObject.material[0].color.set(0x2defff)
|
||||
tooltip.style.visibility = 'hidden'
|
||||
}
|
||||
const pMove = (intersection, pointerEvent) => {
|
||||
tooltip.style.left = `${pointerEvent.clientX + 6}px`
|
||||
tooltip.style.top = `${pointerEvent.clientY + 6}px`
|
||||
const pMove = (intersection) => {
|
||||
tooltip.style.left = `${intersection.clientX + 6}px`
|
||||
tooltip.style.top = `${intersection.clientY + 6}px`
|
||||
}
|
||||
const { onLoop } = useRenderLoop()
|
||||
onLoop(() => {
|
||||
|
||||
})
|
||||
onLoop(() => {})
|
||||
</script>
|
||||
|
||||
@ -4,45 +4,57 @@
|
||||
* @Autor: 地虎降天龙
|
||||
* @Date: 2024-03-05 09:36:24
|
||||
* @LastEditors: 地虎降天龙
|
||||
* @LastEditTime: 2024-03-31 12:10:56
|
||||
* @LastEditTime: 2024-07-18 11:30:29
|
||||
-->
|
||||
|
||||
<template>
|
||||
<TresGroup ref="tgRef">
|
||||
<template v-for="(item, index) in areaList " :key="`${index}`">
|
||||
<Html v-if="item.type === 'Html'" v-bind="htmlState" :position="item.position">
|
||||
<span>
|
||||
{{ item.name }}
|
||||
</span>
|
||||
|
||||
</Html>
|
||||
<TresSprite v-if="item.type === 'Sprite'" :position="item.position" :scale="0.3" :renderOrder="1000">
|
||||
<TresSpriteMaterial :color="0xff0000" :blending="THREE.NormalBlending" :map="pTexture" />
|
||||
</TresSprite>
|
||||
<TresMesh v-if="item.type === 'Shape'" :name="item.name" :renderOrder="index" :pCenter="item.pCenter"
|
||||
@pointer-enter="pEnter" @pointer-leave="pLeave" @click="pClick">
|
||||
<TresExtrudeGeometry :args="[item.shape, { depth: item.depth, bevelEnabled: false }]" />
|
||||
<TresMeshStandardMaterial :color="item.color" :emissive="0x000000" :roughness="0.45" :metalness="0.8"
|
||||
:transparent="true" :side="THREE.DoubleSide" />
|
||||
</TresMesh>
|
||||
<template v-if="item.type === 'Line'">
|
||||
<TresLine :renderOrder="index" :position-z="item.depth + 0.0001">
|
||||
<TresBufferGeometry :position="[item.points, 3]" />
|
||||
<TresLineBasicMaterial :color="0xffffff" :linewidth="0.5" />
|
||||
</TresLine>
|
||||
<TresLine :renderOrder="index" :position-z="-0.0001">
|
||||
<TresBufferGeometry :position="[item.points, 3]" />
|
||||
<TresLineBasicMaterial :color="0x000000" :linewidth="0.5" />
|
||||
</TresLine>
|
||||
</template>
|
||||
</template>
|
||||
</TresGroup>
|
||||
<TresGroup ref="tgRef">
|
||||
<template v-for="(item, index) in areaList" :key="`${index}`">
|
||||
<Html v-if="item.type === 'Html'" v-bind="htmlState" :position="item.position">
|
||||
<span>
|
||||
{{ item.name }}
|
||||
</span>
|
||||
</Html>
|
||||
<TresSprite v-if="item.type === 'Sprite'" :position="item.position" :scale="0.3" :renderOrder="1000">
|
||||
<TresSpriteMaterial :color="0xff0000" :blending="THREE.NormalBlending" :map="pTexture" />
|
||||
</TresSprite>
|
||||
<TresMesh
|
||||
v-if="item.type === 'Shape'"
|
||||
:name="item.name"
|
||||
:renderOrder="index"
|
||||
:pCenter="item.pCenter"
|
||||
@pointer-enter="pEnter"
|
||||
@pointer-leave="pLeave"
|
||||
@click="pClick"
|
||||
>
|
||||
<TresExtrudeGeometry :args="[item.shape, { depth: item.depth, bevelEnabled: false }]" />
|
||||
<TresMeshStandardMaterial
|
||||
:color="item.color"
|
||||
:emissive="0x000000"
|
||||
:roughness="0.45"
|
||||
:metalness="0.8"
|
||||
:transparent="true"
|
||||
:side="THREE.DoubleSide"
|
||||
/>
|
||||
</TresMesh>
|
||||
<template v-if="item.type === 'Line'">
|
||||
<TresLine :renderOrder="index" :position-z="item.depth + 0.0001">
|
||||
<TresBufferGeometry :position="[item.points, 3]" />
|
||||
<TresLineBasicMaterial :color="0xffffff" :linewidth="0.5" />
|
||||
</TresLine>
|
||||
<TresLine :renderOrder="index" :position-z="-0.0001">
|
||||
<TresBufferGeometry :position="[item.points, 3]" />
|
||||
<TresLineBasicMaterial :color="0x000000" :linewidth="0.5" />
|
||||
</TresLine>
|
||||
</template>
|
||||
</template>
|
||||
</TresGroup>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { watchEffect, ref } from 'vue'
|
||||
import * as D3 from "d3-geo"
|
||||
import * as THREE from "three"
|
||||
import * as D3 from 'd3-geo'
|
||||
import * as THREE from 'three'
|
||||
import { loadGeojson } from 'PLS/digitalCity/common/utils'
|
||||
import { Html } from '@tresjs/cientos'
|
||||
import { useTexture, useTresContext, useRenderLoop } from '@tresjs/core'
|
||||
@ -51,13 +63,12 @@ import * as TWEEN from '@tweenjs/tween.js'
|
||||
import { flyTo } from '../common/utils'
|
||||
|
||||
const initMeshBvh = () => {
|
||||
THREE.BufferGeometry.prototype.computeBoundsTree = computeBoundsTree
|
||||
THREE.BufferGeometry.prototype.disposeBoundsTree = disposeBoundsTree
|
||||
THREE.Mesh.prototype.raycast = acceleratedRaycast
|
||||
THREE.BufferGeometry.prototype.computeBoundsTree = computeBoundsTree
|
||||
THREE.BufferGeometry.prototype.disposeBoundsTree = disposeBoundsTree
|
||||
THREE.Mesh.prototype.raycast = acceleratedRaycast
|
||||
}
|
||||
initMeshBvh()
|
||||
|
||||
|
||||
const areaJson = await loadGeojson('./plugins/simpleGIS/json/320000_full.json', 'features')
|
||||
const { map: pTexture } = await useTexture({ map: './plugins/simpleGIS/image/icon.png' })
|
||||
|
||||
@ -69,118 +80,114 @@ offsetXY.center(center).translate([0, 0])
|
||||
|
||||
const areaList = []
|
||||
const makeAreaPrimary = () => {
|
||||
areaJson.forEach((feature) => {
|
||||
const color = new THREE.Color(`hsl( ${16}, ${Math.random() * 30 + 55}%, ${Math.random() * 30 + 55}%)`).getHex()
|
||||
const depth = Math.random() * 0.3 + 0.3
|
||||
areaJson.forEach((feature) => {
|
||||
const color = new THREE.Color(`hsl( ${16}, ${Math.random() * 30 + 55}%, ${Math.random() * 30 + 55}%)`).getHex()
|
||||
const depth = Math.random() * 0.3 + 0.3
|
||||
|
||||
// 关于文字和图标 待会儿制作
|
||||
const { centroid, oneCenter, center: Cc, name } = feature.properties
|
||||
const { coordinates, type } = feature.geometry
|
||||
const point = centroid || oneCenter || Cc || [0, 0]
|
||||
// 关于文字和图标 待会儿制作
|
||||
const { centroid, oneCenter, center: Cc, name } = feature.properties
|
||||
const { coordinates, type } = feature.geometry
|
||||
const point = centroid || oneCenter || Cc || [0, 0]
|
||||
|
||||
const htmlPosition = offsetXY(point)
|
||||
htmlPosition[1] = -htmlPosition[1]
|
||||
htmlPosition[2] = depth
|
||||
areaList.push({ type: 'Html', position: htmlPosition, name })
|
||||
const htmlPosition = offsetXY(point)
|
||||
htmlPosition[1] = -htmlPosition[1]
|
||||
htmlPosition[2] = depth
|
||||
areaList.push({ type: 'Html', position: htmlPosition, name })
|
||||
|
||||
const spritePosition = offsetXY(point)
|
||||
spritePosition[1] = -spritePosition[1] + 0.2
|
||||
spritePosition[2] = depth + 0.22
|
||||
|
||||
const spritePosition = offsetXY(point)
|
||||
spritePosition[1] = -spritePosition[1] + 0.2
|
||||
spritePosition[2] = depth + 0.22
|
||||
areaList.push({ type: 'Sprite', position: spritePosition })
|
||||
|
||||
areaList.push({ type: 'Sprite', position: spritePosition })
|
||||
coordinates.forEach((coordinate) => {
|
||||
function fn(crdinate) {
|
||||
// 制作区域块
|
||||
const shape = new THREE.Shape()
|
||||
crdinate.forEach((item, idx) => {
|
||||
const [x, y] = offsetXY(item)
|
||||
if (idx === 0) shape.moveTo(x, -y)
|
||||
else shape.lineTo(x, -y)
|
||||
})
|
||||
areaList.push({ type: 'Shape', shape, name, color, depth, pCenter: spritePosition })
|
||||
|
||||
coordinates.forEach((coordinate) => {
|
||||
function fn (crdinate) {
|
||||
// 制作边界线
|
||||
const points = []
|
||||
crdinate.forEach((item) => {
|
||||
const [x, y] = offsetXY(item)
|
||||
points.push(x, -y, 0)
|
||||
})
|
||||
areaList.push({ type: 'Line', points: new Float32Array(points), depth })
|
||||
}
|
||||
|
||||
// 制作区域块
|
||||
const shape = new THREE.Shape()
|
||||
crdinate.forEach((item, idx) => {
|
||||
const [x, y] = offsetXY(item)
|
||||
if (idx === 0) shape.moveTo(x, -y)
|
||||
else shape.lineTo(x, -y)
|
||||
})
|
||||
areaList.push({ type: 'Shape', shape, name, color, depth, pCenter: spritePosition })
|
||||
|
||||
// 制作边界线
|
||||
const points = []
|
||||
crdinate.forEach((item) => {
|
||||
const [x, y] = offsetXY(item)
|
||||
points.push(x, -y, 0)
|
||||
})
|
||||
areaList.push({ type: 'Line', points: new Float32Array(points), depth })
|
||||
}
|
||||
|
||||
if (type === "MultiPolygon") coordinate.forEach((item) => fn(item))
|
||||
if (type === "Polygon") fn(coordinate)
|
||||
|
||||
})
|
||||
})
|
||||
if (type === 'MultiPolygon') coordinate.forEach((item) => fn(item))
|
||||
if (type === 'Polygon') fn(coordinate)
|
||||
})
|
||||
})
|
||||
}
|
||||
makeAreaPrimary()
|
||||
|
||||
const setCenter = (map) => {
|
||||
map.rotation.x = -Math.PI / 2
|
||||
const box = new THREE.Box3().setFromObject(map)
|
||||
const centerMap = box.getCenter(new THREE.Vector3())
|
||||
map.rotation.x = -Math.PI / 2
|
||||
const box = new THREE.Box3().setFromObject(map)
|
||||
const centerMap = box.getCenter(new THREE.Vector3())
|
||||
|
||||
const offset = [0, 0]
|
||||
map.position.x = map.position.x - centerMap.x - offset[0]
|
||||
map.position.z = map.position.z - centerMap.z - offset[1]
|
||||
const offset = [0, 0]
|
||||
map.position.x = map.position.x - centerMap.x - offset[0]
|
||||
map.position.z = map.position.z - centerMap.z - offset[1]
|
||||
}
|
||||
const tgRef = ref()
|
||||
watchEffect(() => {
|
||||
if (tgRef.value) {
|
||||
setCenter(tgRef.value)
|
||||
tgRef.value.children.forEach((item) => {
|
||||
if (item.type === 'Mesh') {
|
||||
item.geometry.computeBoundsTree()
|
||||
}
|
||||
})
|
||||
}
|
||||
if (tgRef.value) {
|
||||
setCenter(tgRef.value)
|
||||
tgRef.value.children.forEach((item) => {
|
||||
if (item.type === 'Mesh') {
|
||||
item.geometry.computeBoundsTree()
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
const pEnter = (intersection) => {
|
||||
intersection.object.material.opacity = 0.4
|
||||
intersection.object.material.opacity = 0.4
|
||||
}
|
||||
const pLeave = (intersection) => {
|
||||
intersection.material.opacity = 1
|
||||
intersection.eventObject.material.opacity = 1
|
||||
}
|
||||
|
||||
const { camera, controls } = useTresContext()
|
||||
const pClick = (intersection, pointerEvent) => {
|
||||
console.log('click', intersection, pointerEvent)
|
||||
const targetPosition = new THREE.Vector3()
|
||||
targetPosition.x = intersection.point.x
|
||||
targetPosition.y = intersection.point.y + 10
|
||||
targetPosition.z = intersection.point.z
|
||||
flyTo(camera, targetPosition, controls)
|
||||
const pClick = (intersection) => {
|
||||
const targetPosition = new THREE.Vector3()
|
||||
targetPosition.x = intersection.point.x
|
||||
targetPosition.y = intersection.point.y + 10
|
||||
targetPosition.z = intersection.point.z
|
||||
flyTo(camera, targetPosition, controls)
|
||||
}
|
||||
const { onBeforeLoop } = useRenderLoop()
|
||||
onBeforeLoop(() => {
|
||||
TWEEN.update()
|
||||
TWEEN.update()
|
||||
})
|
||||
const htmlState = {
|
||||
wrapperClass: 'wrapper',
|
||||
as: 'div',
|
||||
center: true,
|
||||
sprite: true,
|
||||
prepend: true,
|
||||
transform: true
|
||||
wrapperClass: 'wrapper',
|
||||
as: 'div',
|
||||
center: true,
|
||||
sprite: true,
|
||||
prepend: true,
|
||||
transform: true,
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.wrapper {
|
||||
#inner {
|
||||
user-select: none;
|
||||
pointer-events: none !important;
|
||||
#inner {
|
||||
user-select: none;
|
||||
pointer-events: none !important;
|
||||
|
||||
span {
|
||||
text-shadow: 1px 1px 2px #c92704;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
span {
|
||||
text-shadow: 1px 1px 2px #c92704;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
* @Autor: 地虎降天龙
|
||||
* @Date: 2024-04-30 08:18:21
|
||||
* @LastEditors: 地虎降天龙
|
||||
* @LastEditTime: 2024-04-30 16:07:08
|
||||
* @LastEditTime: 2024-07-18 11:35:18
|
||||
-->
|
||||
<template>
|
||||
<TresCanvas v-bind="state" window-size>
|
||||
@ -47,7 +47,7 @@ import effectComposer from '../components/volumetricLightGodray/effectComposer.v
|
||||
const state = reactive({
|
||||
clearColor: '#050505',
|
||||
antialias: false,
|
||||
disableRender: true,
|
||||
renderMode: 'manual',
|
||||
})
|
||||
|
||||
const controlsState = reactive({
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user