mirror of
https://github.com/jaywcjlove/reference.git
synced 2025-06-24 07:51:30 +08:00
Compare commits
4 Commits
9c4f1cd68f
...
42cc515c8f
| Author | SHA1 | Date | |
|---|---|---|---|
| 42cc515c8f | |||
| daaa4c5f09 | |||
| 150c8713ae | |||
| 8ea3c71774 |
50
README.md
50
README.md
@ -461,31 +461,6 @@ Quick Reference
|
||||
[贡献者](https://github.com/jaywcjlove/reference/graphs/contributors)列表，由 [contributors](https://github.com/jaywcjlove/github-action-contributors) 根据提交次数的先后顺序自动生成
|
||||
<!--rehype:style=padding-top:1rem;-->
|
||||
|
||||
## 赞助支持
|
||||
<!--rehype:wrap-style=text-align: center;max-width: 650px;margin: 0 auto;&class=home-title-reset-->
|
||||
|
||||
非常感谢那些一直支持我开源工作的朋友们。如果您对我的工作感到满意，可以选择在[这里进行赞助](https://wangchujiang.com/#/sponsor)<!--rehype:target=_blank-->。如果目前经济上不宽裕，也可以通过下载并使用我开发的 [macOS 应用](https://wangchujiang.com/#/app)<!--rehype:target=_blank-->来支持我。以下是我个人开发的 macOS 应用：
|
||||
|
||||
<p style="display: inline-block">
|
||||
<a target="_blank" href="https://wangchujiang.com/iconed/" title="Iconed for macOS"><img align="center" alt="Iconed" height="50" width="50" src="https://github.com/user-attachments/assets/8a35dc7b-4faf-4e2a-9311-f66d6844a896"></a>
|
||||
<a target="_blank" href="https://wangchujiang.com/rightmenu-master/" title="RightMenu Master for macOS"><img align="center" alt="RightMenu Master" height="50" width="50" src="https://github.com/user-attachments/assets/39a76541-71bf-4de7-a01c-c62f0557dff5"></a>
|
||||
<a target="_blank" href="https://wangchujiang.com/paste-quick/" title="Paste Quick for macOS"><img align="center" alt="Quick RSS" height="50" width="50" src="https://github.com/user-attachments/assets/bdaad5b7-9810-44ce-8f17-8410864465d2"></a>
|
||||
<a target="_blank" href="https://wangchujiang.com/quick-rss/" title="Quick RSS for macOS/iOS"><img align="center" alt="Quick RSS" height="50" width="50" src="https://github.com/user-attachments/assets/374106b5-a448-4d1d-9ccb-b04b6bc681ed"></a>
|
||||
<a target="_blank" href="https://wangchujiang.com/web-serve/" title="Web Serve for macOS"><img align="center" alt="Web Serve" height="50" width="50" src="https://github.com/user-attachments/assets/e1d9f76f-0f3d-4ba5-8a15-253ee173bb1c"></a>
|
||||
<a target="_blank" href="https://wangchujiang.com/copybook-generator/" title="Copybook Generator for macOS/iOS"><img align="center" alt="Copybook Generator" height="50" width="50" src="https://github.com/jaywcjlove/jaywcjlove/assets/1680273/b90e42ff-158b-4534-82ca-5898fd0e8d73"></a>
|
||||
<a target="_blank" href="https://wangchujiang.com/devtutor/" title="DevTutor for macOS/iOS"><img align="center" alt="DevTutor for SwiftUI" height="50" width="50" src="https://github.com/jaywcjlove/jaywcjlove/assets/1680273/f15c154d-0192-48eb-8e0e-9e245ffd974a"></a>
|
||||
<a target="_blank" href="https://wangchujiang.com/regex-mate/" title="RegexMate for macOS/iOS"><img align="center" alt="RegexMate" height="50" width="50" src="https://github.com/jaywcjlove/jaywcjlove/assets/1680273/aabe5aa9-9a96-4390-8bed-c3e4023d0dea"></a>
|
||||
<a target="_blank" href="https://wangchujiang.com/time-passage/" title="Time Passage for macOS/iOS"><img align="center" alt="Time Passage" height="50" width="50" src="https://github.com/jaywcjlove/time-passage/assets/1680273/6f30e429-e6f3-4dbe-9921-a5effe2a05e9"></a>
|
||||
<a target="_blank" href="https://wangchujiang.com/IconizeFolder/" title="IconizeFolder for macOS"><img align="center" alt="Iconize Folder" height="50" width="50" src="https://github.com/jaywcjlove/jaywcjlove/assets/1680273/fa9d8b9c-1e51-4ded-877c-fa5b21c47220"></a>
|
||||
<a target="_blank" href="https://wangchujiang.com/TextSoundSaver/" title="Textsound Saver for macOS/iOS"><img align="center" alt="Textsound Saver" height="50" width="50" src="https://github.com/jaywcjlove/jaywcjlove/assets/1680273/0595e842-980b-4574-8891-a8ba853a08be"></a>
|
||||
<a target="_blank" href="https://wangchujiang.com/create-custom-symbols/" title="Create Custom Symbols for macOS"><img align="center" alt="Create Custom Symbols" height="50" width="50" src="https://github.com/jaywcjlove/jaywcjlove/assets/1680273/8cd022ce-a3f1-4e89-b7c6-6fbd0d4db77c"></a>
|
||||
<a target="_blank" href="https://wangchujiang.com/DevHub/" title="DevHub for macOS"><img align="center" alt="DevHub" height="50" width="50" src="https://github.com/user-attachments/assets/4a44a4fd-67ce-430b-af0a-72f18feaa47d"></a>
|
||||
<a target="_blank" href="https://wangchujiang.com/ResumeRevise/" title="Resume Revise for macOS"><img align="center" alt="Resume Revise" height="50" width="50" src="https://github.com/jaywcjlove/jaywcjlove/assets/1680273/c9954a20-1905-48de-bdf8-d71837974aa2"></a>
|
||||
<a target="_blank" href="https://wangchujiang.com/palette-genius/" title="Palette Genius for macOS"><img align="center" alt="Palette Genius" height="50" width="50" src="https://github.com/jaywcjlove/jaywcjlove/assets/1680273/27340413-d355-45b2-8f6f-6ac37682d957"></a>
|
||||
<a target="_blank" href="https://wangchujiang.com/symbol-scribe/" title="Symbol Scribe for macOS"><img align="center" alt="Symbol Scribe" height="50" width="50" src="https://github.com/jaywcjlove/jaywcjlove/assets/1680273/c7249f05-fa70-4def-a1e9-571d5f171fc9"></a>
|
||||
</p>
|
||||
<!--rehype:style=padding-top:1rem;max-width: 520px;margin: 0 auto;-->
|
||||
|
||||
## 国内镜像网站
|
||||
<!--rehype:wrap-style=text-align: center;max-width: 650px;margin: 0 auto;&class=home-title-reset-->
|
||||
|
||||
@ -598,6 +573,31 @@ Quick Reference
|
||||
|
||||
- [Quick Reference for VSCode](https://marketplace.visualstudio.com/items?itemName=jackiotyu.quick-reference) 由 [jackiotyu](https://github.com/jackiotyu/vscode-quick-reference) 提供
|
||||
|
||||
## 赞助支持
|
||||
<!--rehype:wrap-style=text-align: center;max-width: 650px;margin: 0 auto;&class=home-title-reset-->
|
||||
|
||||
非常感谢那些一直支持我开源工作的朋友们。如果您对我的工作感到满意，可以选择在[这里进行赞助](https://wangchujiang.com/#/sponsor)<!--rehype:target=_blank-->。如果目前经济上不宽裕，也可以通过下载并使用我开发的 [macOS 应用](https://wangchujiang.com/#/app)<!--rehype:target=_blank-->来支持我。以下是我个人开发的 macOS 应用：
|
||||
|
||||
<p style="display: inline-block">
|
||||
<a target="_blank" href="https://wangchujiang.com/iconed/" title="Iconed for macOS"><img align="center" alt="Iconed" height="50" width="50" src="https://github.com/user-attachments/assets/8a35dc7b-4faf-4e2a-9311-f66d6844a896"></a>
|
||||
<a target="_blank" href="https://wangchujiang.com/rightmenu-master/" title="RightMenu Master for macOS"><img align="center" alt="RightMenu Master" height="50" width="50" src="https://github.com/user-attachments/assets/39a76541-71bf-4de7-a01c-c62f0557dff5"></a>
|
||||
<a target="_blank" href="https://wangchujiang.com/paste-quick/" title="Paste Quick for macOS"><img align="center" alt="Quick RSS" height="50" width="50" src="https://github.com/user-attachments/assets/bdaad5b7-9810-44ce-8f17-8410864465d2"></a>
|
||||
<a target="_blank" href="https://wangchujiang.com/quick-rss/" title="Quick RSS for macOS/iOS"><img align="center" alt="Quick RSS" height="50" width="50" src="https://github.com/user-attachments/assets/374106b5-a448-4d1d-9ccb-b04b6bc681ed"></a>
|
||||
<a target="_blank" href="https://wangchujiang.com/web-serve/" title="Web Serve for macOS"><img align="center" alt="Web Serve" height="50" width="50" src="https://github.com/user-attachments/assets/e1d9f76f-0f3d-4ba5-8a15-253ee173bb1c"></a>
|
||||
<a target="_blank" href="https://wangchujiang.com/copybook-generator/" title="Copybook Generator for macOS/iOS"><img align="center" alt="Copybook Generator" height="50" width="50" src="https://github.com/jaywcjlove/jaywcjlove/assets/1680273/b90e42ff-158b-4534-82ca-5898fd0e8d73"></a>
|
||||
<a target="_blank" href="https://wangchujiang.com/devtutor/" title="DevTutor for macOS/iOS"><img align="center" alt="DevTutor for SwiftUI" height="50" width="50" src="https://github.com/jaywcjlove/jaywcjlove/assets/1680273/f15c154d-0192-48eb-8e0e-9e245ffd974a"></a>
|
||||
<a target="_blank" href="https://wangchujiang.com/regex-mate/" title="RegexMate for macOS/iOS"><img align="center" alt="RegexMate" height="50" width="50" src="https://github.com/jaywcjlove/jaywcjlove/assets/1680273/aabe5aa9-9a96-4390-8bed-c3e4023d0dea"></a>
|
||||
<a target="_blank" href="https://wangchujiang.com/time-passage/" title="Time Passage for macOS/iOS"><img align="center" alt="Time Passage" height="50" width="50" src="https://github.com/jaywcjlove/time-passage/assets/1680273/6f30e429-e6f3-4dbe-9921-a5effe2a05e9"></a>
|
||||
<a target="_blank" href="https://wangchujiang.com/IconizeFolder/" title="IconizeFolder for macOS"><img align="center" alt="Iconize Folder" height="50" width="50" src="https://github.com/jaywcjlove/jaywcjlove/assets/1680273/fa9d8b9c-1e51-4ded-877c-fa5b21c47220"></a>
|
||||
<a target="_blank" href="https://wangchujiang.com/TextSoundSaver/" title="Textsound Saver for macOS/iOS"><img align="center" alt="Textsound Saver" height="50" width="50" src="https://github.com/jaywcjlove/jaywcjlove/assets/1680273/0595e842-980b-4574-8891-a8ba853a08be"></a>
|
||||
<a target="_blank" href="https://wangchujiang.com/create-custom-symbols/" title="Create Custom Symbols for macOS"><img align="center" alt="Create Custom Symbols" height="50" width="50" src="https://github.com/jaywcjlove/jaywcjlove/assets/1680273/8cd022ce-a3f1-4e89-b7c6-6fbd0d4db77c"></a>
|
||||
<a target="_blank" href="https://wangchujiang.com/DevHub/" title="DevHub for macOS"><img align="center" alt="DevHub" height="50" width="50" src="https://github.com/user-attachments/assets/4a44a4fd-67ce-430b-af0a-72f18feaa47d"></a>
|
||||
<a target="_blank" href="https://wangchujiang.com/ResumeRevise/" title="Resume Revise for macOS"><img align="center" alt="Resume Revise" height="50" width="50" src="https://github.com/jaywcjlove/jaywcjlove/assets/1680273/c9954a20-1905-48de-bdf8-d71837974aa2"></a>
|
||||
<a target="_blank" href="https://wangchujiang.com/palette-genius/" title="Palette Genius for macOS"><img align="center" alt="Palette Genius" height="50" width="50" src="https://github.com/jaywcjlove/jaywcjlove/assets/1680273/27340413-d355-45b2-8f6f-6ac37682d957"></a>
|
||||
<a target="_blank" href="https://wangchujiang.com/symbol-scribe/" title="Symbol Scribe for macOS"><img align="center" alt="Symbol Scribe" height="50" width="50" src="https://github.com/jaywcjlove/jaywcjlove/assets/1680273/c7249f05-fa70-4def-a1e9-571d5f171fc9"></a>
|
||||
</p>
|
||||
<!--rehype:style=padding-top:1rem;max-width: 520px;margin: 0 auto;-->
|
||||
|
||||
<!--rehype:ignore:start-->
|
||||
## 开发
|
||||
|
||||
|
||||
246
docs/threejs.md
Normal file
246
docs/threejs.md
Normal file
@ -0,0 +1,246 @@
|
||||
Three.js 备忘清单
|
||||
===
|
||||
|
||||
Three.js 是一个跨浏览器的 JavaScript 库和 API，用于创建和显示动画 3D 计算机图形。以下是一些常用的 Three.js 操作和用法。
|
||||
|
||||
入门
|
||||
---
|
||||
|
||||
### 安装
|
||||
|
||||
```bash
|
||||
# 使用 npm 安装
|
||||
npm install three
|
||||
```
|
||||
|
||||
### 基本场景设置
|
||||
|
||||
```javascript
|
||||
import * as THREE from 'three';
|
||||
|
||||
// 创建场景
|
||||
const scene = new THREE.Scene();
|
||||
|
||||
// 创建相机
|
||||
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
|
||||
camera.position.z = 5;
|
||||
|
||||
// 创建渲染器
|
||||
const renderer = new THREE.WebGLRenderer();
|
||||
renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
document.body.appendChild(renderer.domElement);
|
||||
|
||||
// 渲染循环
|
||||
function animate() {
|
||||
requestAnimationFrame(animate);
|
||||
renderer.render(scene, camera);
|
||||
}
|
||||
|
||||
animate();
|
||||
```
|
||||
|
||||
### 添加几何体
|
||||
|
||||
```javascript
|
||||
// 创建几何体
|
||||
const geometry = new THREE.BoxGeometry();
|
||||
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
|
||||
const cube = new THREE.Mesh(geometry, material);
|
||||
|
||||
// 添加到场景
|
||||
scene.add(cube);
|
||||
```
|
||||
|
||||
### 响应窗口大小调整
|
||||
|
||||
```javascript
|
||||
window.addEventListener('resize', () => {
|
||||
camera.aspect = window.innerWidth / window.innerHeight;
|
||||
camera.updateProjectionMatrix();
|
||||
renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
});
|
||||
```
|
||||
|
||||
几何体与材质
|
||||
---
|
||||
|
||||
### 常用几何体
|
||||
|
||||
```javascript
|
||||
const box = new THREE.BoxGeometry(1, 1, 1);
|
||||
const sphere = new THREE.SphereGeometry(1, 32, 32);
|
||||
const plane = new THREE.PlaneGeometry(5, 5);
|
||||
const cone = new THREE.ConeGeometry(1, 2, 32);
|
||||
const cylinder = new THREE.CylinderGeometry(1, 1, 2, 32);
|
||||
```
|
||||
|
||||
### 常用材质
|
||||
|
||||
```javascript
|
||||
const basicMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });
|
||||
const lambertMaterial = new THREE.MeshLambertMaterial({ color: 0xff0000 });
|
||||
const phongMaterial = new THREE.MeshPhongMaterial({ color: 0xff0000, shininess: 100 });
|
||||
const standardMaterial = new THREE.MeshStandardMaterial({ color: 0xff0000 });
|
||||
const physicalMaterial = new THREE.MeshPhysicalMaterial({ color: 0xff0000, roughness: 0.5 });
|
||||
```
|
||||
|
||||
灯光
|
||||
---
|
||||
|
||||
### 常用灯光
|
||||
|
||||
```javascript
|
||||
const ambientLight = new THREE.AmbientLight(0x404040); // 环境光
|
||||
scene.add(ambientLight);
|
||||
|
||||
const pointLight = new THREE.PointLight(0xffffff); // 点光源
|
||||
pointLight.position.set(5, 5, 5);
|
||||
scene.add(pointLight);
|
||||
|
||||
const directionalLight = new THREE.DirectionalLight(0xffffff); // 平行光
|
||||
directionalLight.position.set(0, 1, 0);
|
||||
scene.add(directionalLight);
|
||||
|
||||
const spotLight = new THREE.SpotLight(0xffffff); // 聚光灯
|
||||
spotLight.position.set(5, 5, 5);
|
||||
scene.add(spotLight);
|
||||
```
|
||||
|
||||
纹理
|
||||
---
|
||||
|
||||
### 加载纹理
|
||||
|
||||
```javascript
|
||||
const textureLoader = new THREE.TextureLoader();
|
||||
const texture = textureLoader.load('path/to/texture.jpg');
|
||||
|
||||
const material = new THREE.MeshBasicMaterial({ map: texture });
|
||||
const geometry = new THREE.BoxGeometry();
|
||||
const cube = new THREE.Mesh(geometry, material);
|
||||
|
||||
scene.add(cube);
|
||||
```
|
||||
|
||||
动画
|
||||
---
|
||||
|
||||
### 使用 Tween.js
|
||||
|
||||
```javascript
|
||||
import TWEEN from '@tweenjs/tween.js';
|
||||
|
||||
function animate() {
|
||||
requestAnimationFrame(animate);
|
||||
TWEEN.update();
|
||||
renderer.render(scene, camera);
|
||||
}
|
||||
|
||||
const coords = { x: 0, y: 0 }; // 初始坐标
|
||||
const tween = new TWEEN.Tween(coords)
|
||||
.to({ x: 100, y: 100 }, 1000) // 目标坐标和持续时间
|
||||
.easing(TWEEN.Easing.Quadratic.Out) // 缓动函数
|
||||
.onUpdate(() => {
|
||||
cube.position.set(coords.x, coords.y, 0);
|
||||
})
|
||||
.start();
|
||||
|
||||
animate();
|
||||
```
|
||||
|
||||
高级操作
|
||||
---
|
||||
|
||||
### 加载模型
|
||||
|
||||
```javascript
|
||||
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
|
||||
|
||||
const loader = new GLTFLoader();
|
||||
loader.load('path/to/model.glb', (gltf) => {
|
||||
scene.add(gltf.scene);
|
||||
});
|
||||
```
|
||||
|
||||
### 使用 OrbitControls
|
||||
|
||||
```javascript
|
||||
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
|
||||
|
||||
const controls = new OrbitControls(camera, renderer.domElement);
|
||||
|
||||
function animate() {
|
||||
requestAnimationFrame(animate);
|
||||
controls.update();
|
||||
renderer.render(scene, camera);
|
||||
}
|
||||
|
||||
animate();
|
||||
```
|
||||
|
||||
### 使用 Raycaster
|
||||
|
||||
```javascript
|
||||
const raycaster = new THREE.Raycaster();
|
||||
const mouse = new THREE.Vector2();
|
||||
|
||||
function onMouseMove(event) {
|
||||
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
|
||||
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
|
||||
|
||||
raycaster.setFromCamera(mouse, camera);
|
||||
const intersects = raycaster.intersectObjects(scene.children);
|
||||
|
||||
if (intersects.length > 0) {
|
||||
intersects[0].object.material.color.set(0xff0000);
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('mousemove', onMouseMove);
|
||||
```
|
||||
|
||||
性能优化
|
||||
---
|
||||
|
||||
### 使用抗锯齿
|
||||
|
||||
```javascript
|
||||
const renderer = new THREE.WebGLRenderer({ antialias: true });
|
||||
```
|
||||
|
||||
### 降低阴影质量
|
||||
|
||||
```javascript
|
||||
renderer.shadowMap.enabled = true;
|
||||
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
|
||||
```
|
||||
|
||||
### 使用实例化几何体
|
||||
|
||||
```javascript
|
||||
const geometry = new THREE.InstancedBufferGeometry();
|
||||
const material = new THREE.MeshBasicMaterial();
|
||||
const mesh = new THREE.InstancedMesh(geometry, material, count);
|
||||
|
||||
scene.add(mesh);
|
||||
```
|
||||
|
||||
工具
|
||||
---
|
||||
|
||||
### Three.js 编辑器
|
||||
|
||||
Three.js 编辑器是一个在线工具，可以用来创建和编辑 Three.js 场景。
|
||||
|
||||
- [Three.js 编辑器](https://threejs.org/editor/)
|
||||
|
||||
### 三维模型和纹理资源
|
||||
|
||||
- [Sketchfab](https://sketchfab.com/)
|
||||
- [Poly Haven](https://polyhaven.com/)
|
||||
|
||||
另见
|
||||
---
|
||||
|
||||
- [Three.js 官方文档](https://threejs.org/docs/)
|
||||
- [Three.js 示例](https://threejs.org/examples/)
|
||||
Reference in New Issue
Block a user