Skip to content

Commit 425cf23

Browse files
ersbethersbeth
committed
ported browser tests
1 parent 39b9665 commit 425cf23

26 files changed

+2400
-2096
lines changed

‎package.json

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,25 +8,27 @@
88
"type": "module",
99
"scripts": {
1010
"build": "npx rollup -c",
11-
"start": "npx http-server ./ -c-1 -o test/",
11+
"start": "npx http-server ./ -c-1 -o test/browser",
1212
"dev": "npm run build && npm run start"
1313
},
1414
"peerDependencies": {
1515
"three": "0.130.x"
1616
},
17-
1817
"devDependencies": {
1918
"@rollup/plugin-commonjs": "^24.0.1",
2019
"@rollup/plugin-node-resolve": "^15.0.1",
2120
"@rollup/plugin-typescript": "^11.1.1",
2221
"@types/three": "^0.130.0",
22+
"dat.gui": "^0.7.9",
2323
"http-server": "^14.1.1",
2424
"rollup": "^3.15.0",
2525
"rollup-plugin-delete": "^2.0.0",
2626
"rollup-plugin-dts": "^6.1.0",
2727
"tslib": "^2.6.0"
2828
},
29-
"files": [ "dist/*" ],
29+
"files": [
30+
"dist/*"
31+
],
3032
"author": "Maxime Quiblier <[email protected]>",
3133
"license": "MIT",
3234
"hash": "cbb66061ffd05bc5f6673756895b3f6f03e7202a"

‎test/browser/animation.html

Lines changed: 66 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,24 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
34
<head>
45
<title>Blobtree - Ricci</title>
56
<meta charset="utf-8">
67
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
7-
<style>
8-
body {
9-
color: #000;
10-
font-family:Monospace;
11-
font-size:13px;
12-
text-align:center;
13-
font-weight: bold;
14-
15-
background-color: #fff;
16-
margin: 0px;
17-
overflow: hidden;
18-
}
19-
20-
#info {
21-
color:#000;
22-
position: absolute;
23-
top: 0px; width: 100%;
24-
padding: 5px;
25-
26-
}
27-
28-
a {
29-
color: red;
30-
}
31-
</style>
8+
<script type="importmap">
9+
{
10+
"imports": {
11+
"three": "../../node_modules/three/build/three.module.js",
12+
"three/": "../../node_modules/three/",
13+
"@dioxygen-software/three-js-blobtree": "../../dist/three-js-blobtree.module.js"
14+
}
15+
}
16+
</script>
3217
</head>
3318

34-
<body>
35-
<div id="info">
36-
<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - <a href="https://github.com/dualbox/three-js-blobtree" target="_blank" rel="noopener">Blobtree</a> - Animation Ricci example
37-
</div>
38-
39-
<script src="../../node_modules/three/build/three.js"></script>
40-
<script src="./lib/dat.gui.min.js"></script>
41-
<script src="../../node_modules/three/examples/js/controls/OrbitControls.js"></script>
42-
<script src="../../node_modules/three/examples/js/utils/BufferGeometryUtils.js"></script>
43-
<script src="../../dist/three-js-blobtree.js"></script>
44-
<script>
19+
<script type="module">
20+
import { Vector3, MeshPhongMaterial, Mesh } from "three"
21+
import * as Blobtree from "@dioxygen-software/three-js-blobtree"
4522

4623
var alpha = 1;
4724
var root = new Blobtree.RootNode();
@@ -50,21 +27,21 @@
5027
[
5128
new Blobtree.ScalisPoint(
5229
new Blobtree.ScalisVertex(
53-
new THREE.Vector3(0,0,0),
30+
new Vector3(0, 0, 0),
5431
14
5532
),
5633
Blobtree.ScalisPrimitive.DIST,
5734
1.0,
58-
new Blobtree.Material({color:'#dd4f43'})
35+
new Blobtree.Material({ color: '#dd4f43' })
5936
),
6037
new Blobtree.ScalisPoint(
6138
new Blobtree.ScalisVertex(
62-
new THREE.Vector3(0,0,0),
39+
new Vector3(0, 0, 0),
6340
14
6441
),
6542
Blobtree.ScalisPrimitive.DIST,
6643
1.0,
67-
new Blobtree.Material({color:'#ffcd41'})
44+
new Blobtree.Material({ color: '#ffcd41' })
6845
)
6946
]
7047
);
@@ -74,46 +51,79 @@
7451
var smc = new Blobtree.SlidingMarchingCubes(
7552
root,
7653
{
77-
detailRatio: 0.5 // Double resolution with respect to the primitives setup.
54+
detailRatio: 0.5 // Double resolution with respect to the primitives setup.
7855
}
7956
);
8057

8158
// Compute the geometry using the SlidingMarchingCubes
82-
// geometry is kept as a global variable to be used in the following script.
59+
// mesh is kept as a global variable to be used in the following script.
8360
var geometry = smc.compute();
8461
geometry.computeBoundingBox();
85-
var material = new THREE.MeshPhongMaterial( {vertexColors:true} );
62+
var material = new MeshPhongMaterial({ vertexColors: true });
63+
var mesh = new Mesh(geometry, material);
64+
globalThis.mesh = mesh
8665

87-
var mesh = new THREE.Mesh( geometry, material );
8866
console.log(ricci_node)
8967

9068
var t0 = new Date().getTime();
91-
var myInterval = window.setInterval(function (a,b) {
69+
var myInterval = window.setInterval(function (a, b) {
9270

9371
let position = ricci_node.children[0].v[0].getPos();
9472
ricci_node.children[0].v[0].setPos(
95-
new THREE.Vector3(
96-
Math.sin((new Date().getTime()-t0)/1500)*40,
97-
position.y,
98-
position.z
99-
)
73+
new Vector3(
74+
Math.sin((new Date().getTime() - t0) / 1500) * 40,
75+
position.y,
76+
position.z
77+
)
10078
);
10179
//alpha += 1;
10280
//ricci_node.setRicciN(alpha%8 +1);
10381
mesh.geometry = smc.compute();
104-
updateShadow();
105-
},100);
82+
globalThis.updateShadow();
83+
}, 100);
10684

10785
/*
10886
window.setTimeout(function (a,b) {
10987
clearInterval(myInterval);
11088
},5000);
11189
*/
112-
113-
11490
</script>
91+
11592
<!-- Main script containing THREE.js setup for the page -->
116-
<script src="./js/smc-main-script.js"></script>
93+
<script type="module" src="./js/smc-main-script.js"></script>
11794

95+
<body>
96+
<div id="info">
97+
<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - <a href="https://github.com/dualbox/three-js-blobtree" target="_blank"
98+
rel="noopener">Blobtree</a> - Animation Ricci example
99+
</div>
118100
</body>
119-
</html>
101+
102+
<style>
103+
body {
104+
color: #000;
105+
font-family: Monospace;
106+
font-size: 13px;
107+
text-align: center;
108+
font-weight: bold;
109+
110+
background-color: #fff;
111+
margin: 0px;
112+
overflow: hidden;
113+
}
114+
115+
#info {
116+
color: #000;
117+
position: absolute;
118+
top: 0px;
119+
width: 100%;
120+
padding: 5px;
121+
122+
}
123+
124+
a {
125+
color: red;
126+
}
127+
</style>
128+
129+
</html>

‎test/browser/basic.html

Lines changed: 87 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,77 +1,93 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<title>Blobtree - Basic</title>
5-
<meta charset="utf-8">
6-
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
7-
<style>
8-
body {
9-
color: #000;
10-
font-family:Monospace;
11-
font-size:13px;
12-
text-align:center;
13-
font-weight: bold;
14-
15-
background-color: #fff;
16-
margin: 0px;
17-
overflow: hidden;
3+
4+
<head>
5+
<title>Blobtree - Basic</title>
6+
<meta charset="utf-8">
7+
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
8+
<script type="importmap">
9+
{
10+
"imports": {
11+
"three": "../../node_modules/three/build/three.module.js",
12+
"three/": "../../node_modules/three/",
13+
"@dioxygen-software/three-js-blobtree": "../../dist/three-js-blobtree.module.js"
14+
}
1815
}
16+
</script>
1917

20-
#info {
21-
color:#000;
22-
position: absolute;
23-
top: 0px; width: 100%;
24-
padding: 5px;
18+
</head>
2519

26-
}
20+
<script type="module">
2721

28-
a {
29-
color: red;
30-
}
31-
</style>
32-
</head>
33-
34-
<body>
35-
<div id="info">
36-
<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - <a href="https://github.com/dualbox/three-js-blobtree" target="_blank" rel="noopener">Blobtree</a> - Basic example
37-
</div>
38-
39-
<script src="../../node_modules/three/build/three.js"></script>
40-
<script src="../../node_modules/three/examples/js/controls/OrbitControls.js"></script>
41-
<script src="../../dist/three-js-blobtree.js"></script>
42-
<script>
43-
44-
var root = new Blobtree.RootNode();
45-
46-
root.addChild(
47-
new Blobtree.ScalisPoint(
48-
new Blobtree.ScalisVertex(
49-
new THREE.Vector3(0,0,0),
50-
5
51-
),
52-
Blobtree.ScalisPrimitive.DIST,
53-
1.0,
54-
new Blobtree.Material({color:'#dd4f43'})
55-
)
56-
);
57-
58-
var smc = new Blobtree.SlidingMarchingCubes(
59-
root,
60-
{
61-
detailRatio: 0.25 // Double resolution with respect to the primitives setup.
62-
}
63-
);
64-
65-
// Compute the geometry using the SlidingMarchingCubes
66-
// geometry is kept as a global variable to be used in the following script.
67-
var geometry = smc.compute();
68-
geometry.computeBoundingBox();
69-
var material = new THREE.MeshPhongMaterial( {vertexColors:true} );
70-
71-
var mesh = new THREE.Mesh( geometry, material );
72-
</script>
73-
<!-- Main script containing THREE.js setup for the page -->
74-
<script src="./js/smc-main-script.js"></script>
75-
76-
</body>
77-
</html>
22+
import { Vector3, MeshPhongMaterial, Mesh } from "three"
23+
import * as Blobtree from "@dioxygen-software/three-js-blobtree"
24+
25+
var root = new Blobtree.RootNode();
26+
27+
root.addChild(
28+
new Blobtree.ScalisPoint(
29+
new Blobtree.ScalisVertex(
30+
new Vector3(0, 0, 0),
31+
5
32+
),
33+
Blobtree.ScalisPrimitive.DIST,
34+
1.0,
35+
new Blobtree.Material({ color: '#dd4f43' })
36+
)
37+
);
38+
39+
var smc = new Blobtree.SlidingMarchingCubes(
40+
root,
41+
{
42+
detailRatio: 0.25 // Double resolution with respect to the primitives setup.
43+
}
44+
);
45+
46+
// Compute the geometry using the SlidingMarchingCubes
47+
// mesh is kept as a global variable to be used in the following script.
48+
var geometry = smc.compute();
49+
geometry.computeBoundingBox();
50+
var material = new MeshPhongMaterial({ vertexColors: true });
51+
var mesh = new Mesh(geometry, material);
52+
53+
globalThis.mesh = mesh;
54+
</script>
55+
56+
<!-- Main script containing THREE.js setup for the page -->
57+
<script type="module" src="./js/smc-main-script.js"></script>
58+
59+
<body>
60+
<div id="info">
61+
<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - <a href="https://github.com/dualbox/three-js-blobtree" target="_blank"
62+
rel="noopener">Blobtree</a> - Basic example
63+
</div>
64+
</body>
65+
66+
<style>
67+
body {
68+
color: #000;
69+
font-family: Monospace;
70+
font-size: 13px;
71+
text-align: center;
72+
font-weight: bold;
73+
74+
background-color: #fff;
75+
margin: 0px;
76+
overflow: hidden;
77+
}
78+
79+
#info {
80+
color: #000;
81+
position: absolute;
82+
top: 0px;
83+
width: 100%;
84+
padding: 5px;
85+
86+
}
87+
88+
a {
89+
color: red;
90+
}
91+
</style>
92+
93+
</html>

0 commit comments

Comments
 (0)