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

增加了 html节点 引用UI组件 的例子

Browse Source
This commit is contained in:
hawk86104 2024-11-21 16:21:50 +08:00
parent 00a92eabec
commit a0269c36c6
3 changed files with 62 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/plugins/basic/htmls/preview/component3UI.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 52 KiB

3
src/plugins/basic/config.js
View File

@ -4,7 +4,7 @@
* @Autor: 地虎降天龙
* @Date: 2023-11-03 15:07:09
* @LastEditors: 地虎降天龙
* @LastEditTime: 2024-10-10 08:28:26
* @LastEditTime: 2024-11-21 16:20:12
*/
export default {
name: 'basic',
@ -84,6 +84,7 @@ export default {
pNode: 'basic',
preview: [
{ src: 'plugins/basic/htmls/preview/htmls.png', type: 'img', name: 'htmls', title: '简单dom' },
{ src: 'plugins/basic/htmls/preview/component3UI.png', type: 'img', name: 'component3UI', title: '引用UI组件' },
{ src: 'plugins/basic/htmls/preview/website.png', type: 'img', name: 'website', title: '内嵌网页' },
{ src: 'plugins/basic/htmls/preview/websiteReflector.png', type: 'img', name: 'websiteReflector', title: '网页电脑+镜面' },
],

60
src/plugins/basic/pages/htmls/component3UI.vue Normal file
View File

@ -0,0 +1,60 @@
<script setup lang="ts">
import { ref, reactive } from 'vue'
import { BasicShadowMap, SRGBColorSpace, NoToneMapping } from 'three'
import { OrbitControls, Html } from '@tresjs/cientos'
import { FButton } from '@fesjs/fes-design'
import { NButton } from 'naive-ui'
const gl = {
clearColor: '#82DBC5',
shadows: true,
alpha: false,
shadowMapType: BasicShadowMap,
outputColorSpace: SRGBColorSpace,
toneMapping: NoToneMapping,
}
const sphereRef = ref(null)
const state = reactive({
wrapperClass: 'wrapper',
as: 'div',
center: true,
})
</script>
<template>
<TresCanvas v-bind="gl" window-size>
<TresPerspectiveCamera :position="[3, 0, 8]" />
<OrbitControls />
<TresMesh :position="[-3, 1, 1]">
<TresBoxGeometry />
<TresMeshNormalMaterial />
<Html v-bind="state" transform>
<FButton type="primary" size="small"> fes-design按钮 </FButton>
</Html>
</TresMesh>
<TresMesh ref="sphereRef" :position="[1, 1, 1]">
<TresSphereGeometry />
<TresMeshNormalMaterial />
<Html v-bind="state" transform>
<n-button type="primary" dashed>
naiveui按钮
</n-button>
</Html>
</TresMesh>
<TresAmbientLight :intensity="1" />
</TresCanvas>
</template>
<!-- scoped -->
<style lang="less">
.wrapper {
#inner {
user-select: none;
pointer-events: none !important;
}
}
</style>