diff --git a/.dumirc.ts b/.dumirc.ts
index 48e6870..49971f0 100644
--- a/.dumirc.ts
+++ b/.dumirc.ts
@@ -3,6 +3,7 @@ import { defineConfig } from 'dumi';
export default defineConfig({
title: 'Nice Note',
themeConfig: {
+ title: 'Nice Note',
navs: [
null,
{
diff --git a/docs/fea/webgl/demo/base.tsx b/docs/fea/webgl/demo/base.tsx
deleted file mode 100644
index e830cc2..0000000
--- a/docs/fea/webgl/demo/base.tsx
+++ /dev/null
@@ -1,296 +0,0 @@
-import React, { useEffect, useRef } from 'react';
-import * as THREE from 'three';
-import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
-import { TextGeometry } from 'three/addons/geometries/TextGeometry.js';
-import { FontLoader } from 'three/addons/loaders/FontLoader.js';
-import { resizeRendererToDisplaySize } from '../utils'
-
-export default () => {
- const ref = useRef(null)
-
- useEffect(() => {
- ref.current && init(ref.current)
- }, [])
-
- const init = (dom: HTMLElement) => {
- const scene = new THREE.Scene();
- const camera = new THREE.PerspectiveCamera(38, dom.clientWidth / dom.clientHeight, 0.1, 1000)
- // camera.lookAt( 0, 0, 0 );
- camera.position.set(25, 5, 40)
- camera.rotation.set(10, 0, 40)
- const cameraHelper = new THREE.CameraHelper( camera );
- scene.add( cameraHelper );
-
- // 渲染器
- const renderer = new THREE.WebGLRenderer({ antialias: true, canvas: dom });
- // renderer.setSize(window.innerWidth, window.innerHeight);
- THREE.Cache.enabled = true;
-
- // 创建立方体
- const geometry = new THREE.BoxGeometry(1, 1, 1);
- const material = new THREE.MeshLambertMaterial({ color: 0x00ffff })
- const cube = new THREE.Mesh(geometry, material);
- cube.position.y = -1
- scene.add(cube);
-
- const edges = new THREE.EdgesGeometry( geometry );
- const line = new THREE.LineSegments( edges, new THREE.LineBasicMaterial( { color: 0xffffff } ) );
- line.position.y = -1
- scene.add( line );
-
- // 创建一个胶囊
- const capGeometry = new THREE.CapsuleGeometry(1, 1, 10, 20)
- const capMaterial = new THREE.MeshLambertMaterial({ color: 0xdede8d, wireframe: false })
- const cap = new THREE.Mesh(capGeometry, capMaterial);
- cap.position.y = 1
- scene.add(cap);
-
- // 创建一个圆形（半径，分段，分段起始角度，中心角）
- const circleGeometry = new THREE.CircleGeometry(2, 32, 10, Math.PI * 1.5)
- const circleMaterial = new THREE.MeshLambertMaterial({ color: 0xcccccd, wireframe: false })
- const circle = new THREE.Mesh(circleGeometry, circleMaterial);
- circle.position.y = 4
- circle.position.x = 3
- circleMaterial.side = THREE.DoubleSide
- scene.add(circle);
-
- // 创建一个圆锥（半径，高度，侧面分段，侧面沿着高度的分段、底面是否封闭、分段起始角度、中心角）
- const coneGeometry = new THREE.ConeGeometry(1, 6, 20)
- const coneMaterial = new THREE.MeshLambertMaterial({ color: 0xcccccd, wireframe: false })
- const cone = new THREE.Mesh(coneGeometry, coneMaterial);
- cone.position.y = 4
- cone.position.x = -3
- scene.add(cone);
-
- // 创建一个圆柱（顶半径，底半径，圆柱高，侧面分段、侧面沿高分段、底面是否封闭、起始角度、中心角）
- const cylinderGeometry = new THREE.CylinderGeometry(1, 1.5, 3, 10)
- const cylinderMaterial = new THREE.MeshLambertMaterial({ color: 0xcffcff, wireframe: false })
- const cylinder = new THREE.Mesh(cylinderGeometry, cylinderMaterial);
- cylinder.position.y = -3
- cylinder.position.x = -3
- scene.add(cylinder);
-
-
- // 创建一个12面几何体（半径、顶点）
- const dodecahedronGeometry = new THREE.DodecahedronGeometry(1)
- const dodecahedronMaterial = new THREE.MeshLambertMaterial({ color: 0xcffccd, wireframe: false })
- const dodecahedron = new THREE.Mesh(dodecahedronGeometry, dodecahedronMaterial);
- dodecahedron.position.y = 0
- dodecahedron.position.x = -4
- dodecahedron.position.z = 1
- scene.add(dodecahedron);
-
- // 创建一个20面几何体（半径、顶点）
- const icosahedronGeometry = new THREE.IcosahedronGeometry(1)
- const icosahedronMaterial = new THREE.MeshLambertMaterial({ color: 0xcffcfd, wireframe: false })
- const icosahedron = new THREE.Mesh(icosahedronGeometry, icosahedronMaterial);
- icosahedron.position.y = 4
- icosahedron.position.x = -5
- icosahedron.position.z = 0.5
- scene.add(icosahedron);
-
- // 车削缓冲几何体（）
- const points = [];
- for ( let i = 0; i < 10; i ++ ) {
- points.push( new THREE.Vector2( Math.sin( i * 0.2 ) * 10 + 5, ( i - 5 ) * 2 ) );
- }
- const latheGeometry = new THREE.LatheGeometry( points );
- const latheMaterial = new THREE.MeshLambertMaterial( { color: 0xffff00 } );
- const lathe = new THREE.Mesh( latheGeometry, latheMaterial );
- lathe.position.y = 6
- lathe.position.x = 6
- lathe.position.z = 1
- // scene.add( lathe );
-
- // 多面缓冲几何体，自定义坐标
- const verticesOfCube = [
- -1,-1,-1, 1,-1,-1, 1, 1,-1, -1, 1,-1,
- -1,-1, 1, 1,-1, 1, 1, 1, 1, -1, 1, 1,
- ];
-
- const indicesOfFaces = [
- 2,1,0, 0,3,2,
- 0,4,7, 7,3,0,
- 0,1,5, 5,4,0,
- 1,2,6, 6,5,1,
- 2,3,7, 7,6,2,
- 4,5,6, 6,7,4
- ];
-
- const polyGeometry = new THREE.PolyhedronGeometry( verticesOfCube, indicesOfFaces, 6, 3 );
- const polyMaterial = new THREE.MeshLambertMaterial( { color: 0xffff00 } );
- const poly = new THREE.Mesh( polyGeometry, polyMaterial );
- poly.position.y = -3
- poly.position.x = 7
- poly.position.z = -3
- scene.add( poly );
-
- // 创建一个圆环（内半径、外半径、圆环的分段）
- const ringGeometry = new THREE.RingGeometry(1, 3)
- const ringMaterial = new THREE.MeshLambertMaterial({ color: 0xcffccc, wireframe: false })
- const ring = new THREE.Mesh(ringGeometry, ringMaterial);
- ring.position.y = 5
- ring.position.x = 7
- ring.position.z = 1
- ringMaterial.side = THREE.DoubleSide
- scene.add(ring);
-
- // 绘制图形
- const heartShape = new THREE.Shape();
- const x = -2.5;
- const y = -5;
- heartShape.moveTo(x + 2.5, y + 2.5);
- heartShape.bezierCurveTo(x + 2.5, y + 2.5, x + 2, y, x, y);
- heartShape.bezierCurveTo(x - 3, y, x - 3, y + 3.5, x - 3, y + 3.5);
- heartShape.bezierCurveTo(x - 3, y + 5.5, x - 1.5, y + 7.7, x + 2.5, y + 9.5);
- heartShape.bezierCurveTo(x + 6, y + 7.7, x + 8, y + 4.5, x + 8, y + 3.5);
- heartShape.bezierCurveTo(x + 8, y + 3.5, x + 8, y, x + 5, y);
- heartShape.bezierCurveTo(x + 3.5, y, x + 2.5, y + 2.5, x + 2.5, y + 2.5);
-
-
- const shapeGeo = new THREE.ExtrudeGeometry( heartShape, {
- steps: 2,
- depth: 1,
- bevelEnabled: true,
- bevelThickness: 1,
- bevelSize: 1,
- bevelSegments: 5
- });
- const shapeMat = new THREE.MeshLambertMaterial( { color: 0x00ff00 } );
- const heart = new THREE.Mesh( shapeGeo, shapeMat ) ;
- heart.position.y = 6
- heart.position.z = 6
- heart.rotation.z = Math.PI * 1
- shapeMat.side = THREE.DoubleSide
- scene.add( heart );
-
- // 球体
- const ballGeometry = new THREE.SphereGeometry(1, 19)
- const ballMaterial = new THREE.MeshLambertMaterial({ color: 0xcffccc, wireframe: false })
- const ball = new THREE.Mesh(ballGeometry, ballMaterial);
- ball.position.y = 6
- ball.position.x = 0
- ball.position.z = -1
- scene.add(ball);
-
- // 四面体
- const fourGeometry = new THREE.TetrahedronGeometry(1)
- const fourMaterial = new THREE.MeshLambertMaterial({ color: 0xcffccc, wireframe: false })
- const four = new THREE.Mesh(fourGeometry, fourMaterial);
- four.position.y = 3
- four.position.x = -9
- four.position.z = -1
- scene.add(four);
-
- // 圆环（半径，粗细）
- const torusGeometry = new THREE.TorusGeometry(3, 0.3)
- const torusMaterial = new THREE.MeshLambertMaterial({ color: 0xcffccc, wireframe: false })
- const torus = new THREE.Mesh(torusGeometry, torusMaterial);
- torus.position.y = 4
- torus.position.x = -15
- torus.position.z = -1
-
- scene.add(torus);
-
- // 圆环扭结（半径，粗细，）
- const kontGeometry = new THREE.TorusKnotGeometry( 2, 0.3 );
- const kontMaterial = new THREE.MeshLambertMaterial( { color: 0xffddd0 } );
- const knot = new THREE.Mesh( kontGeometry, kontMaterial );
- knot.position.y = -5
- knot.position.x = -15
- knot.position.z = -1
- scene.add( knot );
-
- //创建线段
- const lineMaterial = new THREE.LineBasicMaterial({ color: 0x0000ff })
-
- const linePoints = []
- linePoints.push(new THREE.Vector3(0, 0, 0))
- linePoints.push(new THREE.Vector3(0, 100, 0))
- const lineGeometry = new THREE.BufferGeometry().setFromPoints(points)
- const line2 = new THREE.Line( lineGeometry, lineMaterial );
- scene.add( line2 );
-
- // 创建文字
- const fontLoader = new FontLoader();
- let textMesh
- fontLoader.load('https://fancy-content-test.oss-cn-beijing.aliyuncs.com/helvetiker_regular.typeface.json', function ( font ) {
- const textGeometry = new TextGeometry('ykx, I Love U!', {
- font: font,
- size: 6,
- depth: 1,
- height: 0.1,
- curveSegments: 10,
- bevelEnabled: true, // 平滑
- bevelThickness: 1,
- bevelSize: 0.8, //
- bevelSegments: 3 // 平滑切角分段
- });
- textGeometry.computeBoundingBox();
-
- const centerOffset = - 0.5 * ( textGeometry.boundingBox.max.x - textGeometry.boundingBox.min.x );
-
-
- const materials = [
- new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true } ), // front
- new THREE.MeshPhongMaterial( { color: 0xf00fff } ) // side
- ];
- textMesh = new THREE.Mesh( textGeometry, materials );
-
- textMesh.position.z = 10;
- textMesh.position.x = centerOffset;
-
- scene.add( textMesh )
- } );
-
- // --------------------- 光线 ------------------------------
-
- // 半球光
- const fillLight = new THREE.HemisphereLight( 0x8dc1de, 0x00668d, 1.5 );
- fillLight.position.set( 0, 1, 1 );
- scene.add( fillLight );
-
- // const helper = new THREE.HemisphereLightHelper( fillLight, 5 );
- // scene.add( helper );
-
- // 平行光
- const directionalLight = new THREE.DirectionalLight( 0xffffff, 2.5 );
- directionalLight.position.set( - 5, 25, - 1 );
- directionalLight.castShadow = true;
- directionalLight.shadow.camera.near = 0.01;
- directionalLight.shadow.camera.far = 500;
- directionalLight.shadow.camera.right = 30;
- directionalLight.shadow.camera.left = - 30;
- directionalLight.shadow.camera.top = 30;
- directionalLight.shadow.camera.bottom = - 30;
- directionalLight.shadow.mapSize.width = 1024;
- directionalLight.shadow.mapSize.height = 1024;
- directionalLight.shadow.radius = 4;
- directionalLight.shadow.bias = - 0.00006;
- scene.add(directionalLight);
-
-
- const controls = new OrbitControls( camera, renderer.domElement );
- controls.autoRotate = true
-
- function render() {
- directionalLight.rotation.x += 0.1
- directionalLight.rotation.z += 0.1
- scene.rotation.y += -0.001
-
- if (resizeRendererToDisplaySize(renderer)) {
- const canvas = renderer.domElement;
- camera.aspect = canvas.clientWidth / canvas.clientHeight;
- camera.updateProjectionMatrix();
- }
-
- renderer.setAnimationLoop(render)
- renderer.render(scene, camera)
- }
- render()
- }
-
- return (
-
- )
-};
diff --git a/docs/fea/webgl/demo/earth copy.tsx b/docs/fea/webgl/demo/earth copy.tsx
deleted file mode 100644
index 9447ce4..0000000
--- a/docs/fea/webgl/demo/earth copy.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import React, { useRef, useEffect } from 'react';
-import * as THREE from 'three';
-import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
-
-export default () => {
- const ref = useRef(null)
-
- useEffect(() => {
-
- })
-
- const init = () => {
-
- }
-
- return (
-
- )
-}
diff --git a/docs/fea/webgl/demo/earth.tsx b/docs/fea/webgl/demo/earth.tsx
deleted file mode 100644
index 9c39820..0000000
--- a/docs/fea/webgl/demo/earth.tsx
+++ /dev/null
@@ -1,142 +0,0 @@
-import React, { useRef, useEffect } from 'react';
-import * as THREE from 'three';
-import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
-import { resizeRendererToDisplaySize, addControls } from '../utils'
-
-class AxisGridHelper {
- axes: any;
- grid: any;
- _visible: any;
- constructor( node, units = 10 ) {
- const axes = new THREE.AxesHelper();
- axes.material.depthTest = false;
- axes.renderOrder = 2; // after the grid
- node.add( axes );
-
- const grid = new THREE.GridHelper( units, units );
- grid.material.depthTest = false;
- grid.renderOrder = 1;
- node.add( grid );
-
- this.grid = grid;
- this.axes = axes;
- this.visible = false;
-
- }
- get visible() {
- return this._visible;
- }
- set visible( v ) {
- this._visible = v;
- this.grid.visible = v;
- this.axes.visible = v;
- }
- }
-
-export default () => {
- const ref = useRef(null)
-
- useEffect(() => {
- ref.current && init(ref.current)
- })
-
-
- const init = (dom: any) => {
- const scene = new THREE.Scene();
- const camera = new THREE.PerspectiveCamera(40, 2, 0.1, 1000)
- camera.position.set(0, 50, 0)
- camera.up.set(0, 0, 1)
- camera.lookAt(0, 0, 0)
- const gui = new GUI();
-
- {
- const light = new THREE.PointLight(0xffffff, 500)
- scene.add(light)
- }
-
- // 创建球体实例
- const radius = 1
- const widthSegments = 6
- const heightSegments = 6
- const sphereGeometry = new THREE.SphereGeometry(radius, widthSegments, heightSegments)
-
- const objects = []
- const solarSystem = new THREE.Object3D()
- scene.add(solarSystem)
- objects.push(solarSystem)
-
- // 太阳
- const sunMaterial = new THREE.MeshPhongMaterial({ emissive: 0xffff00 })
- const sunMesh = new THREE.Mesh(sphereGeometry, sunMaterial)
- sunMesh.scale.set(5, 5, 5)
- solarSystem.add(sunMesh)
- objects.push(sunMesh)
-
- // 地球
- const earthOrbit = new THREE.Object3D()
- earthOrbit.position.x = 10;
- solarSystem.add(earthOrbit)
- objects.push(earthOrbit)
- const earthMaterial = new THREE.MeshPhongMaterial({
- color: 0x2233ff,
- emissive: 0x112244,
- })
- const earthMesh = new THREE.Mesh(sphereGeometry, earthMaterial)
- earthOrbit.add(earthMesh)
- objects.push(earthMesh)
-
- // 月球
- const moonOrbit = new THREE.Object3D()
- moonOrbit.position.x = 2
- earthOrbit.add(moonOrbit)
- const moonMaterial = new THREE.MeshPhongMaterial({
- color: 0x888888,
- emissive: 0x222222
- })
- const moonMesh = new THREE.Mesh(sphereGeometry, moonMaterial)
- moonMesh.scale.set(.5, .5, .5);
- moonOrbit.add(moonMesh)
- objects.push(moonMesh)
-
- // 渲染器
- const renderer = new THREE.WebGLRenderer({ antialias: true, canvas: dom });
-
- // 集体旋转
- function makeAxisGrid(node, label, units) {
- const helper = new AxisGridHelper( node, units );
- gui.add(helper, 'visible').name(label);
- }
-
- makeAxisGrid(solarSystem, 'solarSystem', 25);
- makeAxisGrid(sunMesh, 'sunMesh');
- makeAxisGrid(earthOrbit, 'earthOrbit');
- makeAxisGrid(earthMesh, 'earthMesh');
- makeAxisGrid(moonOrbit, 'moonOrbit');
- makeAxisGrid(moonMesh, 'moonMesh');
-
- addControls(camera, renderer);
-
- function render(time) {
- time *= 0.001
-
- if (resizeRendererToDisplaySize(renderer)) {
- const canvas = renderer.domElement;
- camera.aspect = canvas.clientWidth / canvas.clientHeight;
- camera.updateProjectionMatrix();
- }
-
- objects.forEach((obj) => {
- obj.rotation.y = time
- })
-
- renderer.setAnimationLoop(render)
- renderer.render(scene, camera)
- }
- renderer.setAnimationLoop(render)
- }
-
-
- return (
-
- )
-}
diff --git a/docs/fea/webgl/threeJS.md b/docs/fea/webgl/threeJS.md
index 70d5057..c5f8bc6 100644
--- a/docs/fea/webgl/threeJS.md
+++ b/docs/fea/webgl/threeJS.md
@@ -9,11 +9,3 @@ group:
---
# threeJS 入门
-
-## 创建基础元素
-
-
-
-## 创建一个地球的场景
-
-