Cdm2883/cherry-website
1
1
Fork 0
Code Issues Pull Requests Actions Releases Activity

chore: optimize the project structure
Some checks failed
Build Demo / build (push) Failing after 10s
Details

Browse Source
This commit is contained in:
Cdm2883 2024-08-10 17:15:24 +08:00
parent 04e1d0d313
commit 76ce2492ab
12 changed files with 71 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
docs/assets/images/cherry_petal_atlas.png → docs/assets/images/home/cherry_petal_atlas.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 267 B

After

Width:  |  Height:  |  Size: 267 B

0
docs/assets/stylesheets/main.css → docs/assets/stylesheets/home.css
View File

20
docs/index.md
View File

@ -1,17 +1,3 @@
# Welcome to MkDocs ---
template: home.html
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.

6
mkdocs.yml
View File

@ -8,21 +8,19 @@ theme:
language: zh language: zh
logo: assets/images/title.png logo: assets/images/title.png
favicon: assets/images/logo.png favicon: assets/images/logo.png
# noinspection YAMLSchemaValidation
palette: palette:
- media: "(prefers-color-scheme)" - media: "(prefers-color-scheme)"
toggle: toggle:
icon: material/brightness-auto icon: material/brightness-auto
name: 切换到日间模式 name: 切换到日间模式
- media: "(prefers-color-scheme: light)" - media: "(prefers-color-scheme: light)"
primary: teal scheme: default
accent: teal
toggle: toggle:
icon: material/brightness-7 icon: material/brightness-7
name: 切换到深色模式 name: 切换到深色模式
- media: "(prefers-color-scheme: dark)" - media: "(prefers-color-scheme: dark)"
scheme: slate scheme: slate
primary: teal
accent: teal
toggle: toggle:
icon: material/brightness-4 icon: material/brightness-4
name: 切换到系统默认 name: 切换到系统默认

4
overrides/main.html → overrides/home.html
View File

@ -8,7 +8,7 @@
<meta name="description" content="{{ config.site_description }}" /> <meta name="description" content="{{ config.site_description }}" />
<link rel="icon" href="{{ config.theme.favicon | url }}" /> <link rel="icon" href="{{ config.theme.favicon | url }}" />
<title>{{ config.site_name }}</title> <title>{{ config.site_name }}</title>
<link rel="stylesheet" href="assets/stylesheets/main.css"/> <link rel="stylesheet" href="assets/stylesheets/home.css"/>
</head> </head>
<body> <body>
@ -16,6 +16,6 @@
<div id="pseudo-3d-layer"></div> <div id="pseudo-3d-layer"></div>
<script src="assets/javascripts/main.js"></script> <script src="assets/javascripts/home.js"></script>
</body> </body>
</html> </html>

5
scripts/build.js
View File

@ -1,4 +1,5 @@
import { exec as _exec } from "node:child_process"; import { exec as _exec } from "node:child_process";
import { createReadStream, createWriteStream } from "node:fs";
import * as esbuild from "esbuild"; import * as esbuild from "esbuild";
import clear from "./clear.js"; import clear from "./clear.js";
@ -6,13 +7,15 @@ const exec = command => new Promise((resolve, reject) =>
_exec(command, (error, stdout, stderr) => _exec(command, (error, stdout, stderr) =>
error ? reject(error) : resolve(stdout + stderr)) error ? reject(error) : resolve(stdout + stderr))
); );
const copy = (from, to) => createReadStream(from).pipe(createWriteStream(to));
clear(); clear();
await exec("mkdocs build"); await exec("mkdocs build");
copy('./src/webgl-less.html', './site/webgl-less.html');
await esbuild.build({ await esbuild.build({
entryPoints: [ "./src/index.js" ], entryPoints: [ "./src/index.js" ],
bundle: true, bundle: true,
minify: true, minify: true,
outfile: 'site/assets/javascripts/main.js', outfile: './site/assets/javascripts/home.js',
}); });

0
src/holding-hands.js Normal file
View File

77
src/index.js
View File

@ -1,42 +1,43 @@
import WorldViewport from "./world-viewport.js";
import WebGL from "three/examples/jsm/capabilities/WebGL.js"; import WebGL from "three/examples/jsm/capabilities/WebGL.js";
import WorldViewport from "./world-viewport.js";
import Pseudo3DLayer from "./pseudo-3d-layer.js"; import Pseudo3DLayer from "./pseudo-3d-layer.js";
if (WebGL.isWebGL2Available()) { if (!WebGL.isWebGL2Available()) {
const canvas = document.getElementById('three-viewport'); location.replace('./webgl-less.html');
const world = new WorldViewport(canvas); throw 0;
world.setup(); }
console.log(world);
const canvas = document.getElementById('three-viewport');
const container = document.getElementById('pseudo-3d-layer'); const world = new WorldViewport(canvas);
const layer = new Pseudo3DLayer(container); world.setup();
layer.bind(world); console.log(world);
console.log(layer);
const container = document.getElementById('pseudo-3d-layer');
{ const layer = new Pseudo3DLayer(container);
const test = document.createElement('div'); layer.bind(world);
test.style.width = '10%'; console.log(layer);
test.style.height = '10%';
test.style.background = 'red'; {
test.style.pointerEvents = 'fill'; const test = document.createElement('div');
layer.add(test, { x: 0, y: 0, z: 0 }); test.style.width = '10%';
} test.style.height = '10%';
{ test.style.background = 'red';
const test = document.createElement('div'); test.style.pointerEvents = 'fill';
test.style.width = '5%'; layer.add(test, { x: 0, y: 0, z: 0 });
test.style.height = '5%'; }
test.style.background = 'green'; {
test.style.pointerEvents = 'fill'; const test = document.createElement('div');
layer.add(test, { x: 0, y: 0, z: 1 }); test.style.width = '5%';
} test.style.height = '5%';
{ test.style.background = 'green';
const test = document.createElement('div'); test.style.pointerEvents = 'fill';
test.style.width = '1%'; layer.add(test, { x: 0, y: 0, z: 1 });
test.style.height = '1%'; }
test.style.background = 'blue'; {
test.style.pointerEvents = 'fill'; const test = document.createElement('div');
layer.add(test, { x: 4 * Pseudo3DLayer.PixelToBlockMultiple, y: 2 * Pseudo3DLayer.PixelToBlockMultiple, z: 2 }); test.style.width = '1%';
} test.style.height = '1%';
} else { test.style.background = 'blue';
document.body.appendChild(WebGL.getWebGL2ErrorMessage()); test.style.pointerEvents = 'fill';
layer.add(test, { x: 4 * Pseudo3DLayer.PixelToBlockMultiple, y: 2 * Pseudo3DLayer.PixelToBlockMultiple, z: 2 });
} }

0
src/map.js Normal file
View File

1
src/pseudo-3d-layer.js
View File

@ -8,6 +8,7 @@ export default class Pseudo3DLayer {
bind(world) { bind(world) {
this.world = world; this.world = world;
this.originX = world.camera.position.z; this.originX = world.camera.position.z;
// noinspection JSUndefinedPropertyAssignment
world.renderPseudo = this.render.bind(this); world.renderPseudo = this.render.bind(this);
} }

19
src/webgl-less.html Normal file
View File

@ -0,0 +1,19 @@
<!--suppress HtmlUnknownTarget -->
<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<meta name="description" content="{{ config.site_description }}" />
<link rel="icon" href="{{ config.theme.favicon | url }}" />
<title>{{ config.site_name }}</title>
<style></style>
</head>
<body>
<h1>抱歉，您的浏览器不支持 WebGL 2！</h1>
<script></script>
</body>
</html>

2
src/world-viewport.js
View File

@ -169,7 +169,7 @@ export default class WorldViewport {
({ min: { x: minX, y: minY, z: minZ }, max: { x: maxX, y: maxY, z: maxZ } }) ({ 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.magFilter = THREE.NearestFilter;
petalTexture.minFilter = THREE.NearestFilter; petalTexture.minFilter = THREE.NearestFilter;
const petalMaterial = new THREE.MeshBasicMaterial({ const petalMaterial = new THREE.MeshBasicMaterial({