diff --git a/docs/assets/images/cherry_petal_atlas.png b/docs/assets/images/home/cherry_petal_atlas.png similarity index 100% rename from docs/assets/images/cherry_petal_atlas.png rename to docs/assets/images/home/cherry_petal_atlas.png diff --git a/docs/assets/stylesheets/main.css b/docs/assets/stylesheets/home.css similarity index 100% rename from docs/assets/stylesheets/main.css rename to docs/assets/stylesheets/home.css diff --git a/docs/index.md b/docs/index.md index 000ea34..a572d90 100644 --- a/docs/index.md +++ b/docs/index.md @@ -1,17 +1,3 @@ -# Welcome to MkDocs - -For full documentation visit [mkdocs.org](https://www.mkdocs.org). - -## Commands - -* `mkdocs new [dir-name]` - Create a new project. -* `mkdocs serve` - Start the live-reloading docs server. -* `mkdocs build` - Build the documentation site. -* `mkdocs -h` - Print help message and exit. - -## Project layout - - mkdocs.yml # The configuration file. - docs/ - index.md # The documentation homepage. - ... # Other markdown pages, images and other files. +--- +template: home.html +--- diff --git a/mkdocs.yml b/mkdocs.yml index 6bf42a2..fa3634d 100644 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -8,21 +8,19 @@ theme: language: zh logo: assets/images/title.png favicon: assets/images/logo.png + # noinspection YAMLSchemaValidation palette: - media: "(prefers-color-scheme)" toggle: icon: material/brightness-auto name: 切换到日间模式 - media: "(prefers-color-scheme: light)" - primary: teal - accent: teal + scheme: default toggle: icon: material/brightness-7 name: 切换到深色模式 - media: "(prefers-color-scheme: dark)" scheme: slate - primary: teal - accent: teal toggle: icon: material/brightness-4 name: 切换到系统默认 diff --git a/overrides/main.html b/overrides/home.html similarity index 83% rename from overrides/main.html rename to overrides/home.html index 9d1b868..07d0a2e 100644 --- a/overrides/main.html +++ b/overrides/home.html @@ -8,7 +8,7 @@ {{ config.site_name }} - + @@ -16,6 +16,6 @@
- + \ No newline at end of file diff --git a/scripts/build.js b/scripts/build.js index 75f9afc..5b0778b 100644 --- a/scripts/build.js +++ b/scripts/build.js @@ -1,4 +1,5 @@ import { exec as _exec } from "node:child_process"; +import { createReadStream, createWriteStream } from "node:fs"; import * as esbuild from "esbuild"; import clear from "./clear.js"; @@ -6,13 +7,15 @@ const exec = command => new Promise((resolve, reject) => _exec(command, (error, stdout, stderr) => error ? reject(error) : resolve(stdout + stderr)) ); +const copy = (from, to) => createReadStream(from).pipe(createWriteStream(to)); clear(); await exec("mkdocs build"); +copy('./src/webgl-less.html', './site/webgl-less.html'); await esbuild.build({ entryPoints: [ "./src/index.js" ], bundle: true, minify: true, - outfile: 'site/assets/javascripts/main.js', + outfile: './site/assets/javascripts/home.js', }); diff --git a/src/holding-hands.js b/src/holding-hands.js new file mode 100644 index 0000000..e69de29 diff --git a/src/index.js b/src/index.js index c919e84..7f68e6b 100644 --- a/src/index.js +++ b/src/index.js @@ -1,42 +1,43 @@ -import WorldViewport from "./world-viewport.js"; import WebGL from "three/examples/jsm/capabilities/WebGL.js"; +import WorldViewport from "./world-viewport.js"; import Pseudo3DLayer from "./pseudo-3d-layer.js"; -if (WebGL.isWebGL2Available()) { - const canvas = document.getElementById('three-viewport'); - const world = new WorldViewport(canvas); - world.setup(); - console.log(world); - - const container = document.getElementById('pseudo-3d-layer'); - const layer = new Pseudo3DLayer(container); - layer.bind(world); - console.log(layer); - - { - const test = document.createElement('div'); - test.style.width = '10%'; - test.style.height = '10%'; - test.style.background = 'red'; - test.style.pointerEvents = 'fill'; - layer.add(test, { x: 0, y: 0, z: 0 }); - } - { - const test = document.createElement('div'); - test.style.width = '5%'; - test.style.height = '5%'; - test.style.background = 'green'; - test.style.pointerEvents = 'fill'; - layer.add(test, { x: 0, y: 0, z: 1 }); - } - { - const test = document.createElement('div'); - test.style.width = '1%'; - test.style.height = '1%'; - test.style.background = 'blue'; - test.style.pointerEvents = 'fill'; - layer.add(test, { x: 4 * Pseudo3DLayer.PixelToBlockMultiple, y: 2 * Pseudo3DLayer.PixelToBlockMultiple, z: 2 }); - } -} else { - document.body.appendChild(WebGL.getWebGL2ErrorMessage()); +if (!WebGL.isWebGL2Available()) { + location.replace('./webgl-less.html'); + throw 0; +} + +const canvas = document.getElementById('three-viewport'); +const world = new WorldViewport(canvas); +world.setup(); +console.log(world); + +const container = document.getElementById('pseudo-3d-layer'); +const layer = new Pseudo3DLayer(container); +layer.bind(world); +console.log(layer); + +{ + const test = document.createElement('div'); + test.style.width = '10%'; + test.style.height = '10%'; + test.style.background = 'red'; + test.style.pointerEvents = 'fill'; + layer.add(test, { x: 0, y: 0, z: 0 }); +} +{ + const test = document.createElement('div'); + test.style.width = '5%'; + test.style.height = '5%'; + test.style.background = 'green'; + test.style.pointerEvents = 'fill'; + layer.add(test, { x: 0, y: 0, z: 1 }); +} +{ + const test = document.createElement('div'); + test.style.width = '1%'; + test.style.height = '1%'; + test.style.background = 'blue'; + test.style.pointerEvents = 'fill'; + layer.add(test, { x: 4 * Pseudo3DLayer.PixelToBlockMultiple, y: 2 * Pseudo3DLayer.PixelToBlockMultiple, z: 2 }); } diff --git a/src/map.js b/src/map.js new file mode 100644 index 0000000..e69de29 diff --git a/src/pseudo-3d-layer.js b/src/pseudo-3d-layer.js index 5b2a0f2..d65b54a 100644 --- a/src/pseudo-3d-layer.js +++ b/src/pseudo-3d-layer.js @@ -8,6 +8,7 @@ export default class Pseudo3DLayer { bind(world) { this.world = world; this.originX = world.camera.position.z; + // noinspection JSUndefinedPropertyAssignment world.renderPseudo = this.render.bind(this); } diff --git a/src/webgl-less.html b/src/webgl-less.html new file mode 100644 index 0000000..cbea0de --- /dev/null +++ b/src/webgl-less.html @@ -0,0 +1,19 @@ + + + + + + + + + + {{ config.site_name }} + + + + +

抱歉，您的浏览器不支持 WebGL 2！

+ + + + \ No newline at end of file diff --git a/src/world-viewport.js b/src/world-viewport.js index 8c1610c..e8a67a4 100644 --- a/src/world-viewport.js +++ b/src/world-viewport.js @@ -169,7 +169,7 @@ export default class WorldViewport { ({ min: { x: minX, y: minY, z: minZ }, max: { x: maxX, y: maxY, z: maxZ } }) ); - const petalTexture = new THREE.TextureLoader().load('assets/images/cherry_petal_atlas.png'); + const petalTexture = new THREE.TextureLoader().load('assets/images/home/cherry_petal_atlas.png'); petalTexture.magFilter = THREE.NearestFilter; petalTexture.minFilter = THREE.NearestFilter; const petalMaterial = new THREE.MeshBasicMaterial({