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

1、修复了一些小的问题

Browse Source 
2、增加了 "vite-plugin-glsl": "0.2.2" 版本，优化glsl 的展示
This commit is contained in:
hawk86104 2024-03-07 10:30:18 +08:00
parent 037c45935c
commit 4a5286a367
12 changed files with 116 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
.eslintrc.js
View File

@ -4,7 +4,7 @@
* @Autor: 地虎降天龙
* @Date: 2023-10-16 10:53:09
* @LastEditors: 地虎降天龙
* @LastEditTime: 2024-03-05 18:51:52
* @LastEditTime: 2024-03-07 10:07:04
*/
module.exports = {
extends: ['@webank/eslint-config-webank/vue.js'],
@ -36,11 +36,11 @@ module.exports = {
// "semi": "off",
// "init-declarations": "off",
// "space-unary-ops": "off",
// 'import/no-unresolved': [
// 2,
// {
// ignore: ['^@/', 'PLS'], // 设置的路径别名
// },
// ],
'import/no-unresolved': [
2,
{
ignore: ['^@/', 'PLS'], // 设置的路径别名
},
],
},
};

12
.fes.js
View File

@ -4,14 +4,14 @@
* @Autor: 地虎降天龙
* @Date: 2023-10-16 10:53:09
* @LastEditors: 地虎降天龙
* @LastEditTime: 2024-01-04 10:35:21
* @LastEditTime: 2024-03-07 10:19:54
*/
// import { resolve } from 'path';
import { join } from 'path';
import { defineBuildConfig, someApi, plugin, ApplyPluginsType } from '@fesjs/fes';
import { templateCompilerOptions } from '@tresjs/core';
import UnoCSS from 'unocss/vite';
// import glsl from 'vite-plugin-glsl';
import { defineBuildConfig } from '@fesjs/fes'
import { templateCompilerOptions } from '@tresjs/core'
import UnoCSS from 'unocss/vite'
import glsl from 'vite-plugin-glsl'
export default defineBuildConfig({
title: 'TvT.js',
@ -41,7 +41,7 @@ export default defineBuildConfig({
UnoCSS({
/* options */
}),
// glsl(),
glsl()
],
server: {
host: "0.0.0.0"

8
index.html
View File

@ -1,3 +1,11 @@
<!--
* @Description:
* @Version: 1.668
* @Autor: 地虎降天龙
* @Date: 2024-03-07 09:46:12
* @LastEditors: 地虎降天龙
* @LastEditTime: 2024-03-07 10:02:16
-->
<!DOCTYPE html>
<html lang="en">

3
package.json
View File

@ -21,7 +21,8 @@
"@types/offscreencanvas": "^2019.7.3",
"@types/three": "0.161.1",
"@webank/eslint-config-webank": "1.3.1",
"cross-env": "^7.0.3"
"cross-env": "^7.0.3",
"vite-plugin-glsl": "0.2.2"
},
"dependencies": {
"3d-tiles-renderer": "^0.3.25",

73
src/common/vite-plugin-glsl-ext.d.ts vendored Normal file
View File

@ -0,0 +1,73 @@
/*
* @Description:
* @Version: 1.668
* @Autor: 地虎降天龙
* @Date: 2024-03-07 10:27:42
* @LastEditors: 地虎降天龙
* @LastEditTime: 2024-03-07 10:27:53
*/
/**
* @const
* @readonly
* @kind module
* @description Generic shaders
*/
declare module '*.glsl' {
const shader: string;
export default shader;
}
/**
* @const
* @readonly
* @kind module
* @description WebGPU shaders
*/
declare module '*.wgsl' {
const shader: string;
export default shader;
}
/**
* @const
* @readonly
* @kind module
* @description Vertex shaders
*/
declare module '*.vert' {
const shader: string;
export default shader;
}
/**
* @const
* @readonly
* @kind module
* @description Fragment shaders
*/
declare module '*.frag' {
const shader: string;
export default shader;
}
/**
* @const
* @readonly
* @kind module
* @description Vertex shaders
*/
declare module '*.vs' {
const shader: string;
export default shader;
}
/**
* @const
* @readonly
* @kind module
* @description Fragment shaders
*/
declare module '*.fs' {
const shader: string;
export default shader;
}

7
src/plugins/digitalCity/components/buildings/buildingsModelCustomShader.vue
View File

@ -4,8 +4,8 @@ import { useRenderLoop } from '@tresjs/core'
// import { CustomShaderMaterial } from '@tresjs/cientos'
import CustomShaderMaterial from 'three-custom-shader-material/vanilla'
import { ref, watchEffect, watch } from 'vue';
import vertexShader from '../../shaders/buildingsCustomShaderMaterial.vert?raw'
import fragmentShader from '../../shaders/buildingsCustomShaderMaterial.frag?raw'
import vertexShader from '../../shaders/buildingsCustomShaderMaterial.vert'
import fragmentShader from '../../shaders/buildingsCustomShaderMaterial.frag'
import * as THREE from 'three'
const props = withDefaults(defineProps<{
model: any
@ -34,7 +34,7 @@ const setColorMaterial = (type: any, param: string) => {
} else if (type === 'land') {
// 设置城市地面（mesh物体），材质基本颜色
materials = Array.isArray(LANDMASS.material) ? LANDMASS.material : [LANDMASS.material]
materials.forEach((material) => {
materials.forEach((material:any) => {
material[param].setStyle(props.landColor);
material.side = THREE.DoubleSide //双面渲染
})
@ -77,7 +77,6 @@ const setEffectMaterial = () => {
value: props.gradient
}
},
depthWrite: true,
depthTest: true,
transparent: true, //如果材质透明，那么楼宇就被渲染到后面了

6
src/plugins/floor/pages/reflectorDiffuse.vue
View File

@ -4,7 +4,7 @@
* @Autor: 地虎降天龙
* @Date: 2023-12-22 08:09:35
* @LastEditors: 地虎降天龙
* @LastEditTime: 2023-12-25 11:31:18
* @LastEditTime: 2024-03-07 10:12:27
-->
<template>
@ -12,7 +12,7 @@
<TresPerspectiveCamera :position="[-15, 15, -15]" :fov="45" :near="0.1" :far="10000" :look-at="[0, 0, 0]" />
<OrbitControls enableDamping />
<TresAmbientLight :intensity="10.0" />
<TresDirectionalLight :position="[0, 8, 0]" :intensity="10" v-light-helper color="#fff" />
<TresDirectionalLight v-light-helper :position="[0, 8, 0]" :intensity="10" color="#fff" />
<Box :args="[1, 1, 1]" color="orange" :position="[3, 1, 0]" />
<TresMesh :position="[0, 2, 4]">
<TresBoxGeometry :args="[1, 1, 1]" />
@ -27,10 +27,10 @@
<script setup lang="ts">
import { TresCanvas } from '@tresjs/core'
import { OrbitControls, Box, vLightHelper } from '@tresjs/cientos'
import reflectorDiffuse from '../components/reflectorDiffuse.vue'
import { reactive } from 'vue'
import { Pane } from 'tweakpane'
import reflectorDiffuse from '../components/reflectorDiffuse.vue'
const configState = reactive({
mirror: 0.9, // 去除纹理 镜面化

7
src/plugins/floor/pages/whiteFloor.vue
View File

@ -4,7 +4,7 @@
* @Autor: 地虎降天龙
* @Date: 2024-01-25 10:20:13
* @LastEditors: 地虎降天龙
* @LastEditTime: 2024-01-26 14:39:17
* @LastEditTime: 2024-03-07 10:07:53
-->
<template>
@ -12,8 +12,7 @@
<TresPerspectiveCamera :position="[15, 15, 15]" :fov="45" :near="0.1" :far="10000" :look-at="[0, 0, 0]" />
<OrbitControls enableDamping />
<TresAmbientLight :intensity="10.0" />
<TresDirectionalLight ref="TDirectionalLight" :position="[0, 10, 10]" :intensity="1" v-light-helper color="#ffffff"
cast-shadow />
<TresDirectionalLight ref="TDirectionalLight" v-light-helper :position="[0, 10, 10]" :intensity="1" color="#ffffff" cast-shadow />
<Box :args="[1, 1, 1]" color="orange" :position="[3, 2, 1]" cast-shadow />
<TresMesh :position="[0, 2, -4]" cast-shadow>
<TresBoxGeometry :args="[1, 1, 1]" />
@ -35,10 +34,10 @@
import * as THREE from "three"
import { TresCanvas } from '@tresjs/core'
import { OrbitControls, vLightHelper, Box } from '@tresjs/cientos'
import whiteFloorMesh from '../components/whiteFloorMesh.vue'
import skyBox from 'PLS/skyBox/components/skyBoxAmesh.vue'
import { shallowRef, watchEffect, reactive } from 'vue'
import { Pane } from 'tweakpane'
import whiteFloorMesh from '../components/whiteFloorMesh.vue'
const tcConfig = {
clearColor: "#201919",

12
src/plugins/postProcessing/pages/webglFrameBuffer.vue
View File

@ -1,12 +1,12 @@
<template >
<template>
<canvas id="canvaswebgl" style="height: 500px; width: 500px"></canvas>
</template>
<script setup lang="ts">
import { OrbitControls } from '@tresjs/cientos';
import { initShaders, resizeCanvasToDisplaySize, degToRad } from '../common/ice-utils.js';
import * as glMatrix from 'gl-matrix';
import { onMounted } from 'vue';
// eslint-disable-next-line import/extensions
import { initShaders, resizeCanvasToDisplaySize, degToRad } from '../common/ice-utils.js'
const vertexString = `
attribute vec4 a_position;
@ -26,10 +26,10 @@ void main(){
}
`;
const main = function () {
var canvas = document.querySelector('#canvaswebgl');
var gl = canvas.getContext('webgl');
const canvas = document.querySelector('#canvaswebgl') as HTMLCanvasElement;
const gl = canvas?.getContext('webgl');
if (!gl) {
return;
return
}
// 初始化shader
var program = initShaders(gl, vertexString, fragmentString);

4
tsconfig.json
View File

@ -3,7 +3,9 @@
"outDir": "build/dist",
"module": "esnext",
"target": "esnext",
"types": [],
"types": [
"./common/vite-plugin-glsl/vite-plugin-glsl-ext.d.ts"
],
"lib": [
"esnext",
"dom"