diff --git a/.gitignore b/.gitignore index 7465d83..a7b4053 100644 --- a/.gitignore +++ b/.gitignore @@ -1,15 +1,16 @@ -# 干掉大于50mb文件，二进制缓存 -*.mdb -/__pycache__/ -*.mp4 -*.pkg -*.exe -*.zip -*.7z -*.mp3 -*.rar -/node_modules/ -bybrid_app -/unpackage/dist -HTML+CSS -.obsidian \ No newline at end of file +# 干掉大于50mb文件，二进制缓存 +*.mdb +/__pycache__/ +*.mp4 +*.pkg +*.exe +*.zip +*.7z +*.mp3 +*.rar +/node_modules/ +bybrid_app +/unpackage/dist +HTML+CSS +.obsidian +ThunderCross \ No newline at end of file diff --git "a/2D/10\346\270\262\346\237\223\345\261\202\347\272\247.html" "b/2D/10\346\270\262\346\237\223\345\261\202\347\272\247.html" index 7bfde41..482e41c 100644 --- "a/2D/10\346\270\262\346\237\223\345\261\202\347\272\247.html" +++ "b/2D/10\346\270\262\346\237\223\345\261\202\347\272\247.html" @@ -1,69 +1,69 @@ - - - - - - - Document - - - - - + + + + + + + Document + + + + + diff --git "a/2D/11\347\262\276\347\201\265.html" "b/2D/11\347\262\276\347\201\265.html" index 2584f75..e7fb231 100644 --- "a/2D/11\347\262\276\347\201\265.html" +++ "b/2D/11\347\262\276\347\201\265.html" @@ -1,40 +1,40 @@ - - - - - - - Document - - - - - + + + + + + + Document + + + + + diff --git "a/2D/12\347\262\276\347\201\265\350\241\250.html" "b/2D/12\347\262\276\347\201\265\350\241\250.html" index 4424ced..fd742d5 100644 --- "a/2D/12\347\262\276\347\201\265\350\241\250.html" +++ "b/2D/12\347\262\276\347\201\265\350\241\250.html" @@ -1,64 +1,64 @@ - - - - - - - Document - - - - - + + + + + + + Document + + + + + diff --git "a/2D/13\347\256\200\345\215\225\346\226\207\346\234\254\345\257\271\350\261\241.html" "b/2D/13\347\256\200\345\215\225\346\226\207\346\234\254\345\257\271\350\261\241.html" index 2877710..c07f468 100644 --- "a/2D/13\347\256\200\345\215\225\346\226\207\346\234\254\345\257\271\350\261\241.html" +++ "b/2D/13\347\256\200\345\215\225\346\226\207\346\234\254\345\257\271\350\261\241.html" @@ -1,73 +1,73 @@ - - - - - - - Document - - - - - + + + + + + + Document + + + + + diff --git "a/2D/14\344\275\215\345\233\276\346\226\207\345\255\227.html" "b/2D/14\344\275\215\345\233\276\346\226\207\345\255\227.html" index 945e2b3..16bcb23 100644 --- "a/2D/14\344\275\215\345\233\276\346\226\207\345\255\227.html" +++ "b/2D/14\344\275\215\345\233\276\346\226\207\345\255\227.html" @@ -1,34 +1,34 @@ - - - - - - - Document - - - - - + + + + + + + Document + + + + + diff --git "a/2D/15\350\265\204\344\272\247\345\214\205.html" "b/2D/15\350\265\204\344\272\247\345\214\205.html" index 0861fb4..a3e24c6 100644 --- "a/2D/15\350\265\204\344\272\247\345\214\205.html" +++ "b/2D/15\350\265\204\344\272\247\345\214\205.html" @@ -1,33 +1,33 @@ - - - - - - - Document - - - - - + + + + + + + Document + + + + + diff --git "a/2D/16\350\265\204\344\272\247\345\214\205\345\220\214\346\255\245.html" "b/2D/16\350\265\204\344\272\247\345\214\205\345\220\214\346\255\245.html" index 63fd12f..dac19eb 100644 --- "a/2D/16\350\265\204\344\272\247\345\214\205\345\220\214\346\255\245.html" +++ "b/2D/16\350\265\204\344\272\247\345\214\205\345\220\214\346\255\245.html" @@ -1,35 +1,35 @@ - - - - - - - Document - - - - - + + + + + + + Document + + + + + diff --git "a/2D/17\345\244\232\350\265\204\346\272\220\345\212\240\350\275\275.html" "b/2D/17\345\244\232\350\265\204\346\272\220\345\212\240\350\275\275.html" index 0f7f3d2..07bad95 100644 --- "a/2D/17\345\244\232\350\265\204\346\272\220\345\212\240\350\275\275.html" +++ "b/2D/17\345\244\232\350\265\204\346\272\220\345\212\240\350\275\275.html" @@ -1,39 +1,39 @@ - - - - - - - Document - - - - - + + + + + + + Document + + + + + diff --git "a/2D/1\345\237\272\347\241\200.html" "b/2D/1\345\237\272\347\241\200.html" index d4e2d45..9dc7a30 100644 --- "a/2D/1\345\237\272\347\241\200.html" +++ "b/2D/1\345\237\272\347\241\200.html" @@ -1,52 +1,52 @@ - - - - - - - 初步使用 - - - - - + + + + + + + 初步使用 + + + + + diff --git "a/2D/2\351\201\256\347\275\251.html" "b/2D/2\351\201\256\347\275\251.html" index 99b5b72..9945adc 100644 --- "a/2D/2\351\201\256\347\275\251.html" +++ "b/2D/2\351\201\256\347\275\251.html" @@ -1,78 +1,78 @@ - - - - - - - - 测试container的遮盖 - - - - - + + + + + + + + 测试container的遮盖 + + + + + diff --git "a/2D/3\347\272\271\347\220\206.html" "b/2D/3\347\272\271\347\220\206.html" index c2fba04..5d25956 100644 --- "a/2D/3\347\272\271\347\220\206.html" +++ "b/2D/3\347\272\271\347\220\206.html" @@ -1,60 +1,60 @@ - - - - - - - Document - - - - - + + + + + + + Document + + + + + diff --git "a/2D/4.\345\233\276\345\275\242.html" "b/2D/4.\345\233\276\345\275\242.html" index c406714..7a13f7c 100644 --- "a/2D/4.\345\233\276\345\275\242.html" +++ "b/2D/4.\345\233\276\345\275\242.html" @@ -1,131 +1,131 @@ - - - - - - - Document - - - - - + + + + + + + Document + + + + + diff --git "a/2D/5\345\233\276\345\275\242\345\244\215\347\224\250.html" "b/2D/5\345\233\276\345\275\242\345\244\215\347\224\250.html" index b6aa67c..3f2d954 100644 --- "a/2D/5\345\233\276\345\275\242\345\244\215\347\224\250.html" +++ "b/2D/5\345\233\276\345\275\242\345\244\215\347\224\250.html" @@ -1,29 +1,29 @@ - - - - - - - Document - - - - - + + + + + + + Document + + + + + diff --git "a/2D/6\345\233\276\345\275\242\351\201\256\347\275\251.html" "b/2D/6\345\233\276\345\275\242\351\201\256\347\275\251.html" index 8232327..eef7fcb 100644 --- "a/2D/6\345\233\276\345\275\242\351\201\256\347\275\251.html" +++ "b/2D/6\345\233\276\345\275\242\351\201\256\347\275\251.html" @@ -1,116 +1,116 @@ - - - - - - - Document - - - - - + + + + + + + Document + + + + + diff --git "a/2D/7\344\272\244\344\272\222\344\272\213\344\273\266.html" "b/2D/7\344\272\244\344\272\222\344\272\213\344\273\266.html" index 0575691..cab2512 100644 --- "a/2D/7\344\272\244\344\272\222\344\272\213\344\273\266.html" +++ "b/2D/7\344\272\244\344\272\222\344\272\213\344\273\266.html" @@ -1,53 +1,53 @@ - - - - - - - Document - - - - - - + + + + + + + Document + + + + + + diff --git "a/2D/8\347\262\276\345\207\206\344\272\244\344\272\222.html" "b/2D/8\347\262\276\345\207\206\344\272\244\344\272\222.html" index de7cb40..784ed1f 100644 --- "a/2D/8\347\262\276\345\207\206\344\272\244\344\272\222.html" +++ "b/2D/8\347\262\276\345\207\206\344\272\244\344\272\222.html" @@ -1,150 +1,150 @@ - - - - - - - Document - - - - - + + + + + + + Document + + + + + diff --git "a/2D/9\346\270\262\346\237\223\345\276\252\347\216\257.html" "b/2D/9\346\270\262\346\237\223\345\276\252\347\216\257.html" index 59da3a8..092cc68 100644 --- "a/2D/9\346\270\262\346\237\223\345\276\252\347\216\257.html" +++ "b/2D/9\346\270\262\346\237\223\345\276\252\347\216\257.html" @@ -1,55 +1,55 @@ - - - - - - - Document - - - - - + + + + + + + Document + + + + + diff --git a/2D/js/draw-scene.js b/2D/js/draw-scene.js index 8da9d29..b5f5225 100644 --- a/2D/js/draw-scene.js +++ b/2D/js/draw-scene.js @@ -1,85 +1,85 @@ -function drawScene(gl, programInfo, buffers) { - gl.clearColor(0.0, 0.0, 0.0, 1.0); // 清除黑色至透明 - - gl.clearDepth(1.0); // 清空所有 - gl.enable(gl.DEPTH_TEST); // 启动深度测试 - gl.depthFunc(gl.LEQUAL); // 透视效果 - - // 作画前，把画布清理干净 - gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); - - // 设置视野角度 - const fieldOfView = (45 * Math.PI) / 180; // 这里是弧度 - // 画布展示比例 - const aspect = gl.canvas.clientWidth / gl.canvas.clientHeight; - // 0.1个单位之间的对象 - const zNear = 0.1; - // 距离摄像机100个单位 - const zFar = 100.0; - // 报错的话mat4 is not defined, 记得引入webgl矩阵计算glmatrix - const projectionMatrix = mat4.create(); - - // 计算，参数 - mat4.perspective(projectionMatrix, fieldOfView, aspect, zNear, zFar); - - // 再次创建一个矩阵，目的是为了把绘图位置设置为场景中心 - const modelViewMatrix = mat4.create(); - - // 移动位置到中心位置 - mat4.translate( - modelViewMatrix, // 目的矩阵 - modelViewMatrix, // 转换矩阵 - [-0.0, 0.0, -6.0] - ); // 转义坐标 - - // 告诉webGl如何拉出位置 - setPositionAttribute(gl, buffers, programInfo); - - // 告诉webgl 使用我们的位置 - gl.useProgram(programInfo.program); - - // 设置统一着色器 - gl.uniformMatrix4fv( - programInfo.uniformLocations.projectionMatrix, - false, - projectionMatrix - ); - gl.uniformMatrix4fv( - programInfo.uniformLocations.modelViewMatrix, - false, - modelViewMatrix - ); - - { - const offset = 0; - const vertexCount = 4; - // 传入数组 - gl.drawArrays(gl.TRIANGLE_STRIP, offset, vertexCount); - } -} - -// 告诉webgl移动位置 -// 缓冲器属性 -function setPositionAttribute(gl, buffers, programInfo) { - const numComponents = 2; //每次迭代提取2个值 - const type = gl.FLOAT; // 缓冲区中的数据是32位浮点数 - const normalize = false; // 非浮点 - const stride = 0; // 从一组值到下一组值需要多少字节 - // 0 = 使用上面的type和numComponents - const offset = 0; //从缓冲区中的多少字节开始 - // 绑定缓冲器 - gl.bindBuffer(gl.ARRAY_BUFFER, buffers.position); - // 顶点Attrib指针 - gl.vertexAttribPointer( - programInfo.attribLocations.vertexPosition, - numComponents, - type, - normalize, - stride, - offset - ); - // 启用顶点数组 - gl.enableVertexAttribArray(programInfo.attribLocations.vertexPosition); -} - -export { drawScene }; +function drawScene(gl, programInfo, buffers) { + gl.clearColor(0.0, 0.0, 0.0, 1.0); // 清除黑色至透明 + + gl.clearDepth(1.0); // 清空所有 + gl.enable(gl.DEPTH_TEST); // 启动深度测试 + gl.depthFunc(gl.LEQUAL); // 透视效果 + + // 作画前，把画布清理干净 + gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); + + // 设置视野角度 + const fieldOfView = (45 * Math.PI) / 180; // 这里是弧度 + // 画布展示比例 + const aspect = gl.canvas.clientWidth / gl.canvas.clientHeight; + // 0.1个单位之间的对象 + const zNear = 0.1; + // 距离摄像机100个单位 + const zFar = 100.0; + // 报错的话mat4 is not defined, 记得引入webgl矩阵计算glmatrix + const projectionMatrix = mat4.create(); + + // 计算，参数 + mat4.perspective(projectionMatrix, fieldOfView, aspect, zNear, zFar); + + // 再次创建一个矩阵，目的是为了把绘图位置设置为场景中心 + const modelViewMatrix = mat4.create(); + + // 移动位置到中心位置 + mat4.translate( + modelViewMatrix, // 目的矩阵 + modelViewMatrix, // 转换矩阵 + [-0.0, 0.0, -6.0] + ); // 转义坐标 + + // 告诉webGl如何拉出位置 + setPositionAttribute(gl, buffers, programInfo); + + // 告诉webgl 使用我们的位置 + gl.useProgram(programInfo.program); + + // 设置统一着色器 + gl.uniformMatrix4fv( + programInfo.uniformLocations.projectionMatrix, + false, + projectionMatrix + ); + gl.uniformMatrix4fv( + programInfo.uniformLocations.modelViewMatrix, + false, + modelViewMatrix + ); + + { + const offset = 0; + const vertexCount = 4; + // 传入数组 + gl.drawArrays(gl.TRIANGLE_STRIP, offset, vertexCount); + } +} + +// 告诉webgl移动位置 +// 缓冲器属性 +function setPositionAttribute(gl, buffers, programInfo) { + const numComponents = 2; //每次迭代提取2个值 + const type = gl.FLOAT; // 缓冲区中的数据是32位浮点数 + const normalize = false; // 非浮点 + const stride = 0; // 从一组值到下一组值需要多少字节 + // 0 = 使用上面的type和numComponents + const offset = 0; //从缓冲区中的多少字节开始 + // 绑定缓冲器 + gl.bindBuffer(gl.ARRAY_BUFFER, buffers.position); + // 顶点Attrib指针 + gl.vertexAttribPointer( + programInfo.attribLocations.vertexPosition, + numComponents, + type, + normalize, + stride, + offset + ); + // 启用顶点数组 + gl.enableVertexAttribArray(programInfo.attribLocations.vertexPosition); +} + +export { drawScene }; diff --git a/2D/js/init-buffers.js b/2D/js/init-buffers.js index bb80dc1..0583e51 100644 --- a/2D/js/init-buffers.js +++ b/2D/js/init-buffers.js @@ -1,25 +1,25 @@ -function initBuffers(gl) { - const positionBuffer = initPositionBuffer(gl); - - return { - position: positionBuffer, - }; -} - -function initPositionBuffer(gl) { - // 得到了缓冲对象并存储在顶点缓冲器 - const positionBuffer = gl.createBuffer(); - - // 函数绑定上下文 - gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); - - // 数组记录正方体的每一个顶点 - const positions = [1.0, 1.0, -1.0, 1.0, 1.0, -1.0, -1.0, -1.0]; - - // 将其转换成webgl浮点数组，传入到gl缓冲器。 - gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW); - - return positionBuffer; -} - -export { initBuffers }; +function initBuffers(gl) { + const positionBuffer = initPositionBuffer(gl); + + return { + position: positionBuffer, + }; +} + +function initPositionBuffer(gl) { + // 得到了缓冲对象并存储在顶点缓冲器 + const positionBuffer = gl.createBuffer(); + + // 函数绑定上下文 + gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); + + // 数组记录正方体的每一个顶点 + const positions = [1.0, 1.0, -1.0, 1.0, 1.0, -1.0, -1.0, -1.0]; + + // 将其转换成webgl浮点数组，传入到gl缓冲器。 + gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW); + + return positionBuffer; +} + +export { initBuffers }; diff --git a/2D/js/webgl-demo.js b/2D/js/webgl-demo.js index 8040f87..afc711d 100644 --- a/2D/js/webgl-demo.js +++ b/2D/js/webgl-demo.js @@ -1,119 +1,119 @@ -// 导入缓冲器,存储顶点，会越来越复杂 -import { initBuffers } from "./init-buffers.js"; -// 开始绘制位置 -import { drawScene } from "./draw-scene.js"; - -main(); - -// 主函数 -function main() { - const canvas = document.querySelector("#glcanvas"); - // 初始化 WebGL 上下文 - const gl = canvas.getContext("webgl"); - - //确认 WebGL 支持性 - if (gl === null) { - alert( - "Unable to initialize WebGL. Your browser or machine may not support it." - ); - return; - } - - // 使用完全不透明的黑色清除所有图像 - gl.clearColor(0.0, 0.0, 0.0, 1.0); - // 用上面指定的颜色清除缓冲区 - gl.clear(gl.COLOR_BUFFER_BIT); - - // 顶点着色器 - const vsSource = ` - attribute vec4 aVertexPosition; - uniform mat4 uModelViewMatrix; - uniform mat4 uProjectionMatrix; - void main() { - gl_Position = uProjectionMatrix * uModelViewMatrix * aVertexPosition; - } -`; - - // 片段着色器 - const fsSource = ` - void main() { - gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0); - } - `; - - // 初始化着色器程序，让 WebGL 知道如何绘制我们的数据 - const shaderProgram = initShaderProgram(gl, vsSource, fsSource); - - // 配置区域, 可以使用 - const programInfo = { - program: shaderProgram, - // 获取顶点属性 - attribLocations: { - vertexPosition: gl.getAttribLocation(shaderProgram, "aVertexPosition"), - }, - // 从gl中,获取统一位置 - uniformLocations: { - projectionMatrix: gl.getUniformLocation( - shaderProgram, - "uProjectionMatrix" - ), - modelViewMatrix: gl.getUniformLocation(shaderProgram, "uModelViewMatrix"), - }, - }; - - // 带入缓冲区 - const buffers = initBuffers(gl); - - // 绘制场景 - drawScene(gl, programInfo, buffers); -} - -//初始化着色器程序，让 WebGL 知道如何绘制我们的数据 -function initShaderProgram(gl, vsSource, fsSource) { - // 这里是顶点着色器 - const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource); - // 片段着色器 - const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource); - - // 创建着色器程序 - const shaderProgram = gl.createProgram(); - gl.attachShader(shaderProgram, vertexShader); - gl.attachShader(shaderProgram, fragmentShader); - gl.linkProgram(shaderProgram); - - // 如果创建失败，则弹窗 - if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) { - alert( - `Unable to initialize the shader program: ${gl.getProgramInfoLog( - shaderProgram - )}` - ); - return null; - } - - return shaderProgram; -} - -// 创建指定类型的着色器，上传 source 源码并编译 -function loadShader(gl, type, source) { - // 创建一个新的着色器 - const shader = gl.createShader(type); - - // 将源代码发送到着色器 - gl.shaderSource(shader, source); - - // 一旦着色器获取到源代码, 送入这里编译 - gl.compileShader(shader); - - // 检查是否成功编译了着色器 - if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) { - alert( - `An error occurred compiling the shaders: ${gl.getShaderInfoLog(shader)}` - ); - gl.deleteShader(shader); - return null; - } - - // 编译好，就返回编译的着色器 - return shader; -} +// 导入缓冲器,存储顶点，会越来越复杂 +import { initBuffers } from "./init-buffers.js"; +// 开始绘制位置 +import { drawScene } from "./draw-scene.js"; + +main(); + +// 主函数 +function main() { + const canvas = document.querySelector("#glcanvas"); + // 初始化 WebGL 上下文 + const gl = canvas.getContext("webgl"); + + //确认 WebGL 支持性 + if (gl === null) { + alert( + "Unable to initialize WebGL. Your browser or machine may not support it." + ); + return; + } + + // 使用完全不透明的黑色清除所有图像 + gl.clearColor(0.0, 0.0, 0.0, 1.0); + // 用上面指定的颜色清除缓冲区 + gl.clear(gl.COLOR_BUFFER_BIT); + + // 顶点着色器 + const vsSource = ` + attribute vec4 aVertexPosition; + uniform mat4 uModelViewMatrix; + uniform mat4 uProjectionMatrix; + void main() { + gl_Position = uProjectionMatrix * uModelViewMatrix * aVertexPosition; + } +`; + + // 片段着色器 + const fsSource = ` + void main() { + gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0); + } + `; + + // 初始化着色器程序，让 WebGL 知道如何绘制我们的数据 + const shaderProgram = initShaderProgram(gl, vsSource, fsSource); + + // 配置区域, 可以使用 + const programInfo = { + program: shaderProgram, + // 获取顶点属性 + attribLocations: { + vertexPosition: gl.getAttribLocation(shaderProgram, "aVertexPosition"), + }, + // 从gl中,获取统一位置 + uniformLocations: { + projectionMatrix: gl.getUniformLocation( + shaderProgram, + "uProjectionMatrix" + ), + modelViewMatrix: gl.getUniformLocation(shaderProgram, "uModelViewMatrix"), + }, + }; + + // 带入缓冲区 + const buffers = initBuffers(gl); + + // 绘制场景 + drawScene(gl, programInfo, buffers); +} + +//初始化着色器程序，让 WebGL 知道如何绘制我们的数据 +function initShaderProgram(gl, vsSource, fsSource) { + // 这里是顶点着色器 + const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource); + // 片段着色器 + const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource); + + // 创建着色器程序 + const shaderProgram = gl.createProgram(); + gl.attachShader(shaderProgram, vertexShader); + gl.attachShader(shaderProgram, fragmentShader); + gl.linkProgram(shaderProgram); + + // 如果创建失败，则弹窗 + if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) { + alert( + `Unable to initialize the shader program: ${gl.getProgramInfoLog( + shaderProgram + )}` + ); + return null; + } + + return shaderProgram; +} + +// 创建指定类型的着色器，上传 source 源码并编译 +function loadShader(gl, type, source) { + // 创建一个新的着色器 + const shader = gl.createShader(type); + + // 将源代码发送到着色器 + gl.shaderSource(shader, source); + + // 一旦着色器获取到源代码, 送入这里编译 + gl.compileShader(shader); + + // 检查是否成功编译了着色器 + if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) { + alert( + `An error occurred compiling the shaders: ${gl.getShaderInfoLog(shader)}` + ); + gl.deleteShader(shader); + return null; + } + + // 编译好，就返回编译的着色器 + return shader; +} diff --git a/2D/less/1.less b/2D/less/1.less index 7fe479c..ba72cfc 100644 --- a/2D/less/1.less +++ b/2D/less/1.less @@ -1,5 +1,5 @@ -body { - margin: 0; - padding: 0; - box-sizing: border-box; -} +body { + margin: 0; + padding: 0; + box-sizing: border-box; +} diff --git "a/2D/pixi\344\275\277\347\224\250.html" "b/2D/pixi\344\275\277\347\224\250.html" index 3d0f417..fbc1226 100644 --- "a/2D/pixi\344\275\277\347\224\250.html" +++ "b/2D/pixi\344\275\277\347\224\250.html" @@ -1,39 +1,39 @@ - - - - - - - Document - - - -

Hello PixiJS

- - - + + + + + + + Document + + + +

Hello PixiJS

+ + + diff --git "a/2D/\345\216\237\347\224\237\345\206\231\346\263\225.html" "b/2D/\345\216\237\347\224\237\345\206\231\346\263\225.html" index e30a65b..aa57f23 100644 --- "a/2D/\345\216\237\347\224\237\345\206\231\346\263\225.html" +++ "b/2D/\345\216\237\347\224\237\345\206\231\346\263\225.html" @@ -1,18 +1,18 @@ - - - - - WebGL Demo - - - - - - - - + + + + + WebGL Demo + + + + + + + + diff --git "a/3D/1\350\265\267\346\255\245.html" "b/3D/1\350\265\267\346\255\245.html" index 0e32cc6..c9bc5f7 100644 --- "a/3D/1\350\265\267\346\255\245.html" +++ "b/3D/1\350\265\267\346\255\245.html" @@ -1,142 +1,142 @@ - - - - - My first three.js app - - - - - - - + + + + + My first three.js app + + + + + + + diff --git "a/3D/2.\347\224\273\347\272\277.html" "b/3D/2.\347\224\273\347\272\277.html" index 8978d23..c00344b 100644 --- "a/3D/2.\347\224\273\347\272\277.html" +++ "b/3D/2.\347\224\273\347\272\277.html" @@ -1,49 +1,49 @@ - - - - - - - Document - - - - + + + + + + + Document + + + + diff --git "a/3D/3\346\226\207\345\255\227.html" "b/3D/3\346\226\207\345\255\227.html" index 7dc333e..33a417d 100644 --- "a/3D/3\346\226\207\345\255\227.html" +++ "b/3D/3\346\226\207\345\255\227.html" @@ -1,58 +1,58 @@ - - - - - - - Document - - - - hello three.js - - - + + + + + + + Document + + + + hello three.js + + + diff --git "a/3D/4\350\275\275\345\205\245\346\250\241\345\236\213.html" "b/3D/4\350\275\275\345\205\245\346\250\241\345\236\213.html" index f57c8a6..325eb5d 100644 --- "a/3D/4\350\275\275\345\205\245\346\250\241\345\236\213.html" +++ "b/3D/4\350\275\275\345\205\245\346\250\241\345\236\213.html" @@ -1,94 +1,94 @@ - - - - - - - Document - - - - - - - - - - + + + + + + + Document + + + + + + + + + + diff --git "a/3D/5\350\275\275\345\205\245\350\210\271\345\236\213.html" "b/3D/5\350\275\275\345\205\245\350\210\271\345\236\213.html" index 5fdd02d..c5c8e65 100644 --- "a/3D/5\350\275\275\345\205\245\350\210\271\345\236\213.html" +++ "b/3D/5\350\275\275\345\205\245\350\210\271\345\236\213.html" @@ -1,3 +1,4 @@ +<<<<<<< HEAD @@ -93,3 +94,100 @@ animate() +======= + + + + + + + Document + + + + + + + + + + +>>>>>>> 22ba171124f2bc4c6d85100406aca3bb0b7013dc diff --git a/LICENSE b/LICENSE index 5b8c194..e3278fd 100644 --- a/LICENSE +++ b/LICENSE @@ -1,21 +1,21 @@ -MIT License - -Copyright (c) 2023 LeroyK - -Permission is hereby granted, free of charge, to any person obtaining a copy -of this software and associated documentation files (the "Software"), to deal -in the Software without restriction, including without limitation the rights -to use, copy, modify, merge, publish, distribute, sublicense, and/or sell -copies of the Software, and to permit persons to whom the Software is -furnished to do so, subject to the following conditions: - -The above copyright notice and this permission notice shall be included in all -copies or substantial portions of the Software. - -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE -AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, -OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE -SOFTWARE. +MIT License + +Copyright (c) 2023 LeroyK + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/myapp/src/App.less b/myapp/src/App.less index 03bdc1f..5f9e3f7 100644 --- a/myapp/src/App.less +++ b/myapp/src/App.less @@ -1,14 +1,14 @@ -.App { - display: flex; - flex-direction: row; - height: 100vh; - - .navbar { - flex: 5; - border-right: 2px solid #ccc; - } - - .outlet { - flex: 95; - } +.App { + display: flex; + flex-direction: row; + height: 100vh; + + .navbar { + flex: 5; + border-right: 2px solid #ccc; + } + + .outlet { + flex: 95; + } } \ No newline at end of file diff --git a/myapp/src/page/error-page.tsx b/myapp/src/page/error-page.tsx index d71f115..09a33fb 100644 --- a/myapp/src/page/error-page.tsx +++ b/myapp/src/page/error-page.tsx @@ -1,16 +1,16 @@ -import { useRouteError } from "react-router-dom"; - -export default function ErrorPage() { - const error: any = useRouteError(); - console.error(error); - - return ( -
-

Oops!

-

Sorry, an unexpected error has occurred.

-

- {error.statusText || error.message} -

-
- ); -} +import { useRouteError } from "react-router-dom"; + +export default function ErrorPage() { + const error: any = useRouteError(); + console.error(error); + + return ( +
+

Oops!

+

Sorry, an unexpected error has occurred.

+

+ {error.statusText || error.message} +

+
+ ); +} diff --git a/myapp/src/page/game.tsx b/myapp/src/page/game.tsx index f37e3b2..fc77c2e 100644 --- a/myapp/src/page/game.tsx +++ b/myapp/src/page/game.tsx @@ -1,12 +1,12 @@ -import { useState } from "react"; - -const pageGame = () => { - - return ( -
-

这里展示的pageGame渲染

-
- ); -}; - +import { useState } from "react"; + +const pageGame = () => { + + return ( +
+

这里展示的pageGame渲染

+
+ ); +}; + export default pageGame; \ No newline at end of file diff --git a/myapp/src/page/gis.tsx b/myapp/src/page/gis.tsx index fc3f41c..bde8cfb 100644 --- a/myapp/src/page/gis.tsx +++ b/myapp/src/page/gis.tsx @@ -1,15 +1,15 @@ -import { useState } from "react"; - -const pageGis = () => { - - - - - return ( -
-

这里展示的pageGis渲染

-
- ); -}; - +import { useState } from "react"; + +const pageGis = () => { + + + + + return ( +
+

这里展示的pageGis渲染

+
+ ); +}; + export default pageGis; \ No newline at end of file diff --git a/myapp/src/page/numbers.tsx b/myapp/src/page/numbers.tsx index 1cdb208..b717c99 100644 --- a/myapp/src/page/numbers.tsx +++ b/myapp/src/page/numbers.tsx @@ -1,15 +1,15 @@ -import { useState } from "react"; - -const pageNum = () => { - - - - - return ( -
-

这里展示的数字孪生渲染

-
- ); -}; - +import { useState } from "react"; + +const pageNum = () => { + + + + + return ( +
+

这里展示的数字孪生渲染

+
+ ); +}; + export default pageNum; \ No newline at end of file diff --git a/myapp/src/page/page2D.tsx b/myapp/src/page/page2D.tsx index 13d3726..f4b0eb9 100644 --- a/myapp/src/page/page2D.tsx +++ b/myapp/src/page/page2D.tsx @@ -1,48 +1,48 @@ -import { useState, useEffect, useRef, useMemo, useReducer } from "react"; -import { BlurFilter } from "pixi.js"; -import { Stage, Container, Sprite, useTick } from "@pixi/react"; - -const reducer = (_: any, { data }: any) => data; - - -// 一个组件 -const Bunny = () => { - const [motion, update] = useReducer(reducer, undefined); - const iter = useRef(0); - - // 绑定ticker，周期性执行 - useTick((delta) => { - const i = (iter.current += 0.05 * delta); - - // 触发更新 - update({ - type: "update", // 这句主要是为了区别，做更高级状态处理，删除也不碍事 - data: { - x: Math.sin(i) * 100, - y: Math.sin(i / 1.5) * 100, - rotation: Math.sin(i) * Math.PI, - anchor: Math.sin(i / 2), - }, - }); - }); - - return ( - // 将精灵封装 - - ); -}; - -const page2D = () => { - // !这里我们就不讲究这么多了，直接写2d渲染 - return ( - // 舞台 - - {/* 容器 */} - - - - - ); -}; - -export default page2D; +import { useState, useEffect, useRef, useMemo, useReducer } from "react"; +import { BlurFilter } from "pixi.js"; +import { Stage, Container, Sprite, useTick } from "@pixi/react"; + +const reducer = (_: any, { data }: any) => data; + + +// 一个组件 +const Bunny = () => { + const [motion, update] = useReducer(reducer, undefined); + const iter = useRef(0); + + // 绑定ticker，周期性执行 + useTick((delta) => { + const i = (iter.current += 0.05 * delta); + + // 触发更新 + update({ + type: "update", // 这句主要是为了区别，做更高级状态处理，删除也不碍事 + data: { + x: Math.sin(i) * 100, + y: Math.sin(i / 1.5) * 100, + rotation: Math.sin(i) * Math.PI, + anchor: Math.sin(i / 2), + }, + }); + }); + + return ( + // 将精灵封装 + + ); +}; + +const page2D = () => { + // !这里我们就不讲究这么多了，直接写2d渲染 + return ( + // 舞台 + + {/* 容器 */} + + + + + ); +}; + +export default page2D; diff --git a/myapp/src/page/page3D.tsx b/myapp/src/page/page3D.tsx index 7671ea5..f456cbf 100644 --- a/myapp/src/page/page3D.tsx +++ b/myapp/src/page/page3D.tsx @@ -1,15 +1,15 @@ -import { useState } from "react"; - -const page3D = () => { - - - - - return ( -
-

这里展示的3D渲染

-
- ); -}; - -export default page3D; +import { useState } from "react"; + +const page3D = () => { + + + + + return ( +
+

这里展示的3D渲染

+
+ ); +}; + +export default page3D; diff --git a/myapp/src/routers/index.tsx b/myapp/src/routers/index.tsx index a14a9e7..8086b30 100644 --- a/myapp/src/routers/index.tsx +++ b/myapp/src/routers/index.tsx @@ -1,40 +1,40 @@ -import { createBrowserRouter } from "react-router-dom"; -import App from "../App"; -import ErrorPage from "../page/error-page"; -import Page2D from "../page/page2D"; -import Page3D from "../page/page3D"; -import PageGis from "../page/gis"; -import PageNum from "../page/numbers"; -import PageGame from "../page/game" - -const router = createBrowserRouter([ - { - path: "/", - element: , - errorElement: , - children: [ - { - path: "page2D", - element: , - }, - { - path: "page3D", - element: , - }, - { - path: "gis", - element: , - }, - { - path: "numbers", - element: , - }, - { - path: "game", - element: , - }, - ], - }, -]); - -export default router; +import { createBrowserRouter } from "react-router-dom"; +import App from "../App"; +import ErrorPage from "../page/error-page"; +import Page2D from "../page/page2D"; +import Page3D from "../page/page3D"; +import PageGis from "../page/gis"; +import PageNum from "../page/numbers"; +import PageGame from "../page/game" + +const router = createBrowserRouter([ + { + path: "/", + element: , + errorElement: , + children: [ + { + path: "page2D", + element: , + }, + { + path: "page3D", + element: , + }, + { + path: "gis", + element: , + }, + { + path: "numbers", + element: , + }, + { + path: "game", + element: , + }, + ], + }, +]); + +export default router; diff --git a/myapp/src/routers/navbar.less b/myapp/src/routers/navbar.less index 4b25e87..cba07f0 100644 --- a/myapp/src/routers/navbar.less +++ b/myapp/src/routers/navbar.less @@ -1,23 +1,23 @@ -nav { - height: 100%; - width: 100%; - - ul { - display: flex; - flex-direction: column; - height: 100%; - width: 100%; - align-items: center; - justify-content: center; - li { - text-align: center; - font-size: 20px; - height: 40px; - width: 100%; - - .NavLink { - display: block; - } - } - } -} +nav { + height: 100%; + width: 100%; + + ul { + display: flex; + flex-direction: column; + height: 100%; + width: 100%; + align-items: center; + justify-content: center; + li { + text-align: center; + font-size: 20px; + height: 40px; + width: 100%; + + .NavLink { + display: block; + } + } + } +} diff --git a/myapp/src/routers/navbar.tsx b/myapp/src/routers/navbar.tsx index 794c3dd..dbb1f81 100644 --- a/myapp/src/routers/navbar.tsx +++ b/myapp/src/routers/navbar.tsx @@ -1,61 +1,61 @@ -import { NavLink } from "react-router-dom"; -import "./navbar.less" - - -export default function NavBar() { - let activeStyle = { - color: "red", - backgroundColor: "skyblue", - }; - return ( - - ); -} +import { NavLink } from "react-router-dom"; +import "./navbar.less" + + +export default function NavBar() { + let activeStyle = { + color: "red", + backgroundColor: "skyblue", + }; + return ( + + ); +} diff --git a/myapp/src/types/showModule.d.ts b/myapp/src/types/showModule.d.ts index 08e5b1e..57dff49 100644 --- a/myapp/src/types/showModule.d.ts +++ b/myapp/src/types/showModule.d.ts @@ -1,6 +1,6 @@ -/** - * @author Leroy - * @description 这里就拿来解决三方包，无ts申明的问题。 -*/ - +/** + * @author Leroy + * @description 这里就拿来解决三方包，无ts申明的问题。 +*/ + declare module "pixi.js"; \ No newline at end of file