Skip to content

Commit 2240e58

Browse files
author
Simon he
committed
chore: update
1 parent 1571fa3 commit 2240e58

File tree

6 files changed

+182
-50
lines changed

6 files changed

+182
-50
lines changed

‎README.md‎

Lines changed: 84 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,13 +19,94 @@ import {
1919

2020
```
2121

22+
## sThree
23+
- 简单化three的使用
24+
- 可以让你的代码更加简洁,更加美观
25+
- 不需要在onMounted中执行,可以在任意时刻使用
26+
- 自动监听resize事件,自动更新canvas的大小
27+
- 参数:
28+
- container: string | HTMLElement, 父容器
29+
- options: SThreeOptions, 函数式的方式去创建场景、渲染器、相机等元素
30+
```javascript
31+
sThree("#main", {
32+
createCamera(THREE) { // 创建相机，返回相机对象
33+
const fov = 40;
34+
const aspect = 2;
35+
const near = 0.1;
36+
const far = 1000;
37+
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
38+
camera.position.set(0, 50, 0);
39+
camera.up.set(0, 0, 1);
40+
camera.lookAt(0, 0, 0);
41+
return camera;
42+
},
43+
createTargets(THREE) { // 创建目标，返回[contents, target]数组,contents的结果会在animate钩子中作为参数传入animate函数，target是目标对象，会被自动加入到场景中
44+
const sphereGeometry = new THREE.SphereGeometry(1, 6, 6);
45+
const solarSystem = new THREE.Object3D();
46+
const sunMesh = makeSun(THREE, sphereGeometry);
47+
const earthOrbit = new THREE.Object3D();
48+
const earthMesh = makeEarth(THREE, sphereGeometry);
49+
const moonMesh = makeMoon(THREE, sphereGeometry);
50+
earthOrbit.position.x = 10;
51+
earthOrbit.add(earthMesh);
52+
earthOrbit.add(moonMesh);
53+
solarSystem.add(earthOrbit);
54+
solarSystem.add(sunMesh);
55+
return {
56+
contents: [makeLight(THREE), solarSystem],
57+
targets: [makeLight(THREE), solarSystem, earthOrbit, sunMesh, earthMesh, moonMesh],
58+
};
59+
},
60+
middleware(THREE, targets) { // 在渲染前的钩子函数，可以对目标进行一些操作，比如加入动画等
61+
},
62+
animate(THREE, objects, time) { // 此函数会被循环调用，用来更新目标的位置和旋转等信息，参数是THREE, 目标数组(createTargets返回的contents), timestamp
63+
time *= 0.001;
64+
objects.forEach((node) => {
65+
node.rotation.y = time;
66+
})
67+
}
68+
})
69+
70+
function makeLight(THREE) {
71+
const color = 0xffffff;
72+
const intensity = 3;
73+
return new THREE.PointLight(color, intensity);
74+
}
75+
function makeEarth(THREE, sphereGeometry) {
76+
const earthMaterial = new THREE.MeshPhongMaterial({
77+
color: 0x2233ff,
78+
emissive: 0x112244,
79+
});
80+
const earthMesh = new THREE.Mesh(sphereGeometry, earthMaterial);
81+
return earthMesh;
82+
}
83+
function makeSun(THREE, sphereGeometry) {
84+
const sunMaterial = new THREE.MeshPhongMaterial({ emissive: 0xffff00 });
85+
const sunMesh = new THREE.Mesh(sphereGeometry, sunMaterial);
86+
sunMesh.scale.set(5, 5, 5);
87+
return sunMesh;
88+
}
89+
function makeMoon(THREE, sphereGeometry) {
90+
const moonMaterial = new THREE.MeshPhongMaterial({
91+
color: 0x888888,
92+
emissive: 0x222222,
93+
});
94+
const moonMesh = new THREE.Mesh(sphereGeometry, moonMaterial);
95+
moonMesh.position.x = 2;
96+
moonMesh.scale.set(0.5, 0.5, 0.5);
97+
return moonMesh;
98+
}
99+
```
100+
22101
## sCharts
23-
- 简单的echarts图表封装
102+
- 简单化echarts使用
103+
- 可以让你的代码更加简洁,更加美观
24104
- 不需要在onMounted中执行,可以在任意时刻使用
105+
- 自动监听resize事件,自动更新canvas的大小
25106
- 参数:
26-
- container: string | HTMLElement, 图表容器
107+
- container: string | HTMLElement, 父容器
27108
- options: SChartsOption, echarts配置options,扩展了w: 初始化宽度, h: 初始化高度, theme: echarts主题, 所有的事件行为以on开头都会被调用
28-
- autoResize: boolean, 是否自动调整宽高, 根据container容器的宽高自动撑满,监听window的resize事件,自动调整宽高
109+
- autoResize: boolean, 是否自动调整宽高
29110
```javascript
30111
const charts = sCharts('#main', {
31112
w: 500,

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@
5454
"@antfu/eslint-config": "^0.25.0",
5555
"@types/node": "^17.0.38",
5656
"@types/spark-md5": "^3.0.2",
57+
"@types/three": "^0.141.0",
5758
"bumpp": "^7.1.1",
5859
"echarts": "^5.3.3",
5960
"eslint": "^8.16.0",
@@ -63,6 +64,7 @@
6364
"pkgroll": "^1.3.1",
6465
"simon-js-tool": "workspace:^3.0.6",
6566
"spark-md5": "^3.0.2",
67+
"three": "^0.142.0",
6668
"typescript": "^4.7.2",
6769
"vitest": "^0.14.2"
6870
},

‎playground/src/App.vue‎

Lines changed: 75 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script setup lang="ts">
2-
import { fileSplice, sCharts } from '../../src'
2+
import { fileSplice, sThree } from '../../src'
33
44
// import { lazyLoad } from "../../src";
55
// import { vFetch } from "../../src";
@@ -26,55 +26,85 @@ import { fileSplice, sCharts } from '../../src'
2626
// // lazyLoad(img);
2727
// // });
2828
// });
29-
// onMounted(() => {
30-
sCharts(
31-
'#main',
32-
{
33-
w: 400,
34-
h: 300,
35-
theme: 'dark',
36-
xAxis: {
37-
data: ['A', 'B', 'C', 'D', 'E'],
38-
},
39-
yAxis: {},
40-
series: [
41-
{
42-
type: 'bar',
43-
data: [
44-
10,
45-
22,
46-
28,
47-
{
48-
value: 43,
49-
// 设置单个柱子的样式
50-
itemStyle: {
51-
color: '#91cc75',
52-
shadowColor: '#91cc75',
53-
borderType: 'dashed',
54-
opacity: 0.5,
55-
},
56-
},
57-
49,
58-
],
59-
itemStyle: {
60-
barBorderRadius: 5,
61-
borderWidth: 1,
62-
borderType: 'solid',
63-
borderColor: '#73c0de',
64-
shadowColor: '#5470c6',
65-
shadowBlur: 3,
66-
},
67-
},
68-
],
29+
sThree('#main', {
30+
createCamera(THREE) {
31+
const fov = 40
32+
const aspect = 2 // the canvas default
33+
const near = 0.1
34+
const far = 1000
35+
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far)
36+
camera.position.set(0, 50, 0)
37+
camera.up.set(0, 0, 1)
38+
camera.lookAt(0, 0, 0)
39+
return camera
6940
},
70-
true,
71-
)
72-
// });
41+
createTargets(THREE) {
42+
const sphereGeometry = new THREE.SphereGeometry(1, 6, 6)
43+
const solarSystem = new THREE.Object3D()
44+
const sunMesh = makeSun(THREE, sphereGeometry)
45+
const earthOrbit = new THREE.Object3D()
46+
const earthMesh = makeEarth(THREE, sphereGeometry)
47+
const moonMesh = makeMoon(THREE, sphereGeometry)
48+
earthOrbit.position.x = 10
49+
earthOrbit.add(earthMesh)
50+
earthOrbit.add(moonMesh)
51+
solarSystem.add(earthOrbit)
52+
solarSystem.add(sunMesh)
53+
return {
54+
contents: [makeLight(THREE), solarSystem],
55+
targets: [makeLight(THREE), solarSystem, earthOrbit, sunMesh, earthMesh, moonMesh],
56+
}
57+
},
58+
middleware(THREE, targets) {
59+
// targets.forEach((node) => {
60+
// const axes = new THREE.AxesHelper();
61+
// axes.material.depthTest = false;
62+
// axes.renderOrder = 1;
63+
// node.add(axes);
64+
// });
65+
},
66+
animate(THREE, objects, time) {
67+
time *= 0.001
68+
objects.forEach((node) => {
69+
node.rotation.y = time
70+
})
71+
},
72+
})
73+
74+
function makeLight(THREE) {
75+
const color = 0xFFFFFF
76+
const intensity = 3
77+
return new THREE.PointLight(color, intensity)
78+
}
79+
function makeEarth(THREE, sphereGeometry) {
80+
const earthMaterial = new THREE.MeshPhongMaterial({
81+
color: 0x2233FF,
82+
emissive: 0x112244,
83+
})
84+
const earthMesh = new THREE.Mesh(sphereGeometry, earthMaterial)
85+
return earthMesh
86+
}
87+
function makeSun(THREE, sphereGeometry) {
88+
const sunMaterial = new THREE.MeshPhongMaterial({ emissive: 0xFFFF00 })
89+
const sunMesh = new THREE.Mesh(sphereGeometry, sunMaterial)
90+
sunMesh.scale.set(5, 5, 5)
91+
return sunMesh
92+
}
93+
function makeMoon(THREE, sphereGeometry) {
94+
const moonMaterial = new THREE.MeshPhongMaterial({
95+
color: 0x888888,
96+
emissive: 0x222222,
97+
})
98+
const moonMesh = new THREE.Mesh(sphereGeometry, moonMaterial)
99+
moonMesh.position.x = 2
100+
moonMesh.scale.set(0.5, 0.5, 0.5)
101+
return moonMesh
102+
}
73103
</script>
74104

75105
<template>
76106
<main font-sans p=" y-10" text="center gray-700 dark:gray-200">
77-
<div id="main" w-full ma inline-block />
107+
<div id="main" w-full h-200 ma inline-block />
78108
<Footer />
79109
</main>
80110
<!-- <img src="temp" data-src="../public/favicon.svg" alt="" h-10 bg-red /> -->

‎pnpm-lock.yaml‎

Lines changed: 18 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/animationFrameWrapper.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
export function animationFrameWrapper(fn: () => void, delta = 1000, autoStop = false): (() => void) {
1+
export function animationFrameWrapper(fn: (timestamp: number) => void, delta = 1000, autoStop = false): (() => void) {
22
let start: number
33
let work = true
44
const animationFrame = window.requestAnimationFrame
@@ -17,7 +17,7 @@ export function animationFrameWrapper(fn: () => void, delta = 1000, autoStop = f
1717
return
1818
if (start === undefined) { start = timestamp }
1919
else if (timestamp - start > delta) {
20-
fn?.()
20+
fn?.(timestamp)
2121
start = timestamp
2222
if (autoStop)
2323
stop()

‎src/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -93,3 +93,4 @@ export { createElement } from './createElement'
9393
export { addLink } from './addLink'
9494
export { sCharts } from './sCharts'
9595
export { addEventListener } from './addEventListener'
96+
export { sThree } from './sThree'

0 commit comments

Comments
 (0)