blackteay/icegl-three-vue-tres
1
0
Fork 0
mirror of https://gitee.com/ice-gl/icegl-three-vue-tres.git synced 2025-04-05 06:22:43 +08:00
Code Issues Projects Releases Wiki Activity

feat: 完成第一个简单示例 使用qiankun

Browse Source
This commit is contained in:
hawk86104 2025-04-01 17:57:50 +08:00
parent 6b9f2f45cf
commit f3ff20ed68
4 changed files with 125 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
index.html
View File

@ -4,7 +4,7 @@
* @Autor: 地虎降天龙 * @Autor: 地虎降天龙
* @Date: 2024-03-07 09:46:12 * @Date: 2024-03-07 09:46:12
* @LastEditors: 地虎降天龙 * @LastEditors: 地虎降天龙
* @LastEditTime: 2025-03-20 09:06:18 * @LastEditTime: 2025-04-01 16:14:04
--> -->
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
@ -21,11 +21,13 @@
<script> <script>
var _hmt = _hmt || []; var _hmt = _hmt || [];
(function () { (function () {
const hm = document.createElement("script") if (!window.__POWERED_BY_QIANKUN__) {
hm.src = "https://hm.baidu.com/hm.js?3c442b1ada04ec23771dfc94ea581c10" const hm = document.createElement("script")
const s = document.getElementsByTagName("script")[0] hm.src = "https://hm.baidu.com/hm.js?3c442b1ada04ec23771dfc94ea581c10"
s.parentNode.insertBefore(hm, s) const s = document.getElementsByTagName("script")[0]
})() s.parentNode.insertBefore(hm, s)
}
})()
</script> </script>
<script src="./lib/jweixin-1.6.0.js"></script> <script src="./lib/jweixin-1.6.0.js"></script>

4
src/components/forPreview/FPSGraph.vue
View File

@ -4,7 +4,7 @@
* @Autor: 地虎降天龙 * @Autor: 地虎降天龙
* @Date: 2024-02-27 08:47:58 * @Date: 2024-02-27 08:47:58
* @LastEditors: 地虎降天龙 * @LastEditors: 地虎降天龙
* @LastEditTime: 2025-03-13 11:56:25 * @LastEditTime: 2025-04-01 16:00:37
--> -->
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from 'vue' import { ref } from 'vue'
@ -59,7 +59,7 @@ useRafFn(({ timestamp }) => {
<style lang="less" scoped> <style lang="less" scoped>
.fpsStats { .fpsStats {
z-index: 99999; z-index: 99999;
position: fixed; position: absolute;
display: flex; display: flex;
align-items: center; align-items: center;
background-color: white; background-color: white;

6
src/global.less
View File

@ -1,6 +1,10 @@
body, html { body, html {
margin: 0; margin: 0;
background-color: var(--f-black);
width: 100%; width: 100%;
height: 100vh; height: 100vh;
}
#tvt-app{
background-color: var(--f-black);
// position: relative;
// min-height: 100vh;
} }

110
src/plugins/qiankunTvt/pages/theBasic.vue Normal file
View File

@ -0,0 +1,110 @@
<template>
<TresCanvas v-bind="state" :style="{ height }">
<TresPerspectiveCamera :position="[15, 15, 15]" :fov="45" :near="0.1" :far="1000" :look-at="[0, 0, 0]" />
<OrbitControls v-bind="controlsState" />
<TresAmbientLight :intensity="0.5" />
<TresMesh ref="sphereRef" :position="[0, 4, 0]" cast-shadow @pointer-enter="onPointerEnter" @pointer-leave="onPointerLeave">
<TresSphereGeometry :args="[2, 32, 32]" />
<TresMeshToonMaterial color="#006060" />
</TresMesh>
<TresMesh ref="sphereRef2" :position="[4, 4, 0]" cast-shadow @pointer-enter="onPointerEnter" @pointer-leave="onPointerLeave">
<TresSphereGeometry :args="[2, 32, 32]" />
<TresMeshToonMaterial color="#006060" />
</TresMesh>
<TresMesh :rotation="[-Math.PI / 2, 0, 0]" receive-shadow>
<TresPlaneGeometry :args="[20, 20, 20, 20]" />
<TresMeshToonMaterial />
</TresMesh>
<TresDirectionalLight ref="TDirectionalLight" :position="[10, 8, 4]" :intensity="1" cast-shadow />
<TresDirectionalLight :position="[10, 2, 4]" :intensity="1" cast-shadow />
<TresGridHelper />
</TresCanvas>
</template>
<script setup lang="ts">
import { SRGBColorSpace, BasicShadowMap, NoToneMapping } from 'three'
import { reactive, ref, onMounted, shallowRef, watchEffect } from 'vue'
import { TresCanvas, useRenderLoop } from '@tresjs/core'
import { OrbitControls } from '@tresjs/cientos'
import { qiankunWindow } from 'vite-plugin-qiankun/dist/helper';
const state = reactive({
clearColor: '#201919',
shadows: true,
alpha: false,
shadowMapType: BasicShadowMap,
outputColorSpace: SRGBColorSpace,
toneMapping: NoToneMapping,
windowSize: !qiankunWindow.__POWERED_BY_QIANKUN__,
})
const controlsState = reactive({
enableDamping: true,
dampingFactor: 0.05,
enableZoom: true,
autoRotate: false,
autoRotateSpeed: 2,
maxPolarAngle: Math.PI,
minPolarAngle: 0,
maxAzimuthAngle: Math.PI,
minAzimuthAngle: -Math.PI,
enablePan: true,
keyPanSpeed: 7,
maxDistance: 100,
minDistance: 0,
minZoom: 0,
maxZoom: 100,
zoomSpeed: 1,
enableRotate: true,
rotateSpeed: 1,
})
const sphereRef = ref()
const sphereRef2 = ref()
const TDirectionalLight = shallowRef()
// const { onLoop, pause, resume } = useRenderLoop()
const { onLoop } = useRenderLoop()
onLoop(({ elapsed }) => {
if (!sphereRef.value) return
sphereRef.value.position.y += Math.sin(elapsed) * 0.01
sphereRef2.value.position.y += Math.sin(elapsed) * 0.01
})
function onPointerEnter(ev: any) {
if (ev) {
ev.object.material.color.set('#DFFF45')
// pause()
}
}
function onPointerLeave(ev: any) {
if (ev) {
ev.eventObject.material.color.set('#006060')
}
}
watchEffect(() => {
if (TDirectionalLight.value) {
TDirectionalLight.value.shadow.mapSize.set(1000, 1000)
TDirectionalLight.value.shadow.camera.near = 0.5 // default
TDirectionalLight.value.shadow.camera.far = 50000 // default
TDirectionalLight.value.shadow.camera.top = 20
TDirectionalLight.value.shadow.camera.right = 20
TDirectionalLight.value.shadow.camera.left = -20
TDirectionalLight.value.shadow.camera.bottom = -20
}
})
const height = ref('auto')
onMounted(() => {
const parentElement = document.querySelector('.app-main')
if (parentElement) {
height.value = `${parentElement.clientHeight}px`
}
})
</script>