-
Notifications
You must be signed in to change notification settings - Fork 3
/
sphere_basic_anim.html
110 lines (85 loc) · 3.17 KB
/
sphere_basic_anim.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title></head><body>
<script type="module">
// #region IMPORTS
import Starter, { THREE } from './lib/starter.js';
import Util from './lib/Util.js';
import DynLineMesh from './lib/DynLineMesh.js';
import ShapePointsMesh from './lib/ShapePointsMesh.js';
import PixelFontMesh from './lib/PixelFontMesh.js';
import IrregularSphericalGrid from './grid/IrregularSphericalGrid.js';
import{ vec3_norm_scale } from './lib/Maths.js';
// #endregion
// #region MAIN
let App;
let Debug = {};
let Ref = {};
window.addEventListener( "load", async _=>{
App = new Starter( { webgl2:true, grid:true } );
App.setCamera( 0, 0, 9, [0,0.0,0] );
App.add( ( Debug.ln = new DynLineMesh() ) );
App.add( ( Debug.pnt = new ShapePointsMesh() ) );
App.add( ( Debug.px = new PixelFontMesh() ) );
Debug.px.setRes( 2, 1 );
Debug.px.position.x = -3.5;
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
const grid = IrregularSphericalGrid.build( 2, 4, 0, 0.1, 100 );
setRadius( grid, 1.95 );
debugVertices( grid );
//debugEdges( grid );
debugFaces( grid );
debugMesh( grid );
let loop = 0;
setInterval( ()=>{
IrregularSphericalGrid._relaxFaces( grid, 2, 1, 0.1 );
Debug.pnt.reset();
Debug.ln.reset();
debugVertices( grid );
debugFaces( grid );
Debug.px.reset().add( (loop++).toString() );
}, 800 );
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
App.render();
});
//#endregion
// #region DEBUG
function setRadius( grid, radius ){
for( let v of grid.vertices ) vec3_norm_scale( v.pos, v.pos, radius );
}
function debugVertices( grid ){
for( const e of grid.vertices ) Debug.pnt.add( e.pos, 0x00ff00, 2 );
}
function debugEdges( grid ){
for( const e of grid.iterEdges() ) Debug.ln.add( e.a, e.b, 0x707070 );
}
function debugFaces( grid ){
for( const f of grid.faces ){
let edg = grid.halfEdges[ f.halfEdges[0] ];
let len = f.halfEdges.length;
for( let i=1; i <= len; i++ ){
let ii = i % len;
let nex = grid.halfEdges[ f.halfEdges[ ii ] ];
Debug.ln.add( grid.getVertPos( edg.vertex ), grid.getVertPos( nex.vertex ), 0x707070 );
edg = nex;
}
}
}
function debugMesh( grid ){
const verts = grid.flattenVertices();
const ind = grid.flattenIndices();
App.add( toMesh( verts, ind ) );
}
function toMesh( verts, idx ){
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
const bGeo = new THREE.BufferGeometry();
bGeo.setAttribute( "position", new THREE.BufferAttribute( new Float32Array( verts ), 3 ) );
if( idx && idx.length > 0 ) bGeo.setIndex( idx );
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
const mat = new THREE.MeshPhongMaterial( { color:0x009999 } ); // ,side:THREE.DoubleSide
const mesh = new THREE.Mesh( bGeo, mat );
return mesh;
}
// #endregion
</script>
</body></html>