Skip to content

Commit 71e7c61

Browse files
peteroupcpeteroupc
committed
fixes
1 parent 8749e5e commit 71e7c61

37 files changed

+419
-344
lines changed

‎demos/background.html

+59-35
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,27 @@
44
canvas { width:100%; height:100%; overflow: hidden; }
55
</style>
66
<head><meta name="viewport" content="user-scalable=no,initial-scale=1,maximum-scale=1">
7-
<script type="text/javascript" src="../h3du_min.js"></script>
87
<script type="text/javascript" src="demoutil.js"></script>
8+
<script type="importmap">
9+
{
10+
"imports": {
11+
"three": "https://threejs.org/build/three.module.js",
12+
"buffergeom": "../BufferGeometryUtils.js",
13+
"h3du": "../h3du_module.js"
14+
}
15+
}
16+
</script>
917
</head>
1018
<body>
11-
<canvas id=canvas></canvas>
12-
<script id="demo">
13-
/* global H3DU */
14-
// <!--
19+
<script type="module" id="demo">
20+
21+
import * as THREE from 'three';
22+
import * as H3DU from 'h3du';
23+
24+
import * as BufferGeometryUtils from 'buffergeom';
1525

16-
var CanvasBackground = function(canvas) {
26+
var CanvasBackground = function() {
1727
"use strict";
18-
this.canvas = canvas;
1928
};
2029
CanvasBackground.varyColor = function(n) {
2130
"use strict";
@@ -135,19 +144,15 @@
135144
CanvasBackground.prototype.start = function() {
136145
"use strict";
137146
var rgb = this.constructor.hls2rgb(this.hls);
138-
this.rend = new H3DU.Scene3D(this.canvas)
139-
.setClearColor(rgb[0] / 255.0, rgb[1] / 255.0, rgb[2] / 255.0, 1.0);
140-
this.scene = new H3DU.Batch3D();
141-
this.scene.getLights().setDirectionalLight(0, [0, 0, -1]);
142-
this.shapeGroup = new H3DU.ShapeGroup();
143-
this.scene.addShape(this.shapeGroup);
144-
this.cubeMesh = new H3DU.Shape(H3DU.Meshes.createBox(2, 2, 2));
145-
this.sphereMesh = new H3DU.Shape(H3DU.Meshes.createSphere());
146-
this.torusMesh = new H3DU.Shape(H3DU.Meshes.createTorus(0.5, 1));
147-
this.cylinderMesh = new H3DU.Shape(H3DU.Meshes.createClosedCylinder(1, 1, 2));
147+
this.scene = scene;
148+
this.cubeMesh = (H3DU.Meshes.createBox(THREE,2, 2, 2));
149+
this.sphereMesh = (H3DU.Meshes.createSphere(THREE));
150+
this.torusMesh = (H3DU.Meshes.createTorus(THREE,0.5, 1));
151+
this.cylinderMesh = (H3DU.Meshes.createClosedCylinder({"THREE":THREE,"BufferGeometryUtils":BufferGeometryUtils},
152+
1, 1, 2));
148153
this.timeInfo = {};
149154
this.count = 0;
150-
H3DU.renderLoop(this.animate.bind(this));
155+
this.items=[]
151156
};
152157
CanvasBackground.prototype.setColor = function(color) {
153158
"use strict";
@@ -165,39 +170,58 @@
165170
this.drawOne();
166171
this.count -= 4;
167172
}
168-
this.rend.render(this.scene);
169173
};
170174
CanvasBackground.prototype.drawOne = function() {
171175
"use strict";
172176
var newhls = this.constructor.varyColor(this.hls);
173-
if(this.scene.shapeCount() > 300) {
177+
if(this.items.length>300) {
174178
// Delete the oldest shape generated
175-
this.scene.removeShape(this.shapeGroup.getShape(0));
179+
var firstItem=this.items[0]
180+
this.items.unshift(0)
181+
this.scene.remove(firstItem);
176182
}
177183
var x = this.constructor.rand(2000) / 1000.0 - 1.0;
178184
var y = this.constructor.rand(2000) / 1000.0 - 1.0;
179-
var z = this.constructor.rand(60) / 60.0;
185+
var z = this.constructor.rand(60) / 60.0 + 0.4;
180186
var mesh = [this.cubeMesh, this.sphereMesh,
181187
this.torusMesh, this.cylinderMesh][this.constructor.rand(4)];
182188
var radius = (16 + this.constructor.rand(100)) / 1000.0;
183189
var rgb = this.constructor.hls2rgb(newhls);
184-
rgb[0] /= 255;
185-
rgb[1] /= 255;
186-
rgb[2] /= 255;
187-
var vector = H3DU.MathUtil.quatFromTaitBryan(
188-
this.constructor.rand(360),
189-
this.constructor.rand(360),
190-
this.constructor.rand(360));
191-
var shape = mesh.copy()
192-
.setScale(radius, radius, radius)
193-
.setQuaternion(vector)
194-
.setPosition(x, y, z)
195-
.setColor(rgb);
196-
this.shapeGroup.addShape(shape);
190+
var shape = new THREE.Mesh(mesh,
191+
new THREE.MeshLambertMaterial(
192+
{color: (rgb[0]|0)+((rgb[1]|0)<<8)+((rgb[2]|0)<<16) }
193+
))
194+
shape.position.x=x
195+
shape.position.y=y
196+
shape.position.z=z
197+
shape.scale.x=shape.scale.y=shape.scale.z=radius
198+
shape.rotateX(this.constructor.rand(Math.PI))
199+
shape.rotateY(this.constructor.rand(Math.PI))
200+
shape.rotateZ(this.constructor.rand(Math.PI))
201+
this.scene.add(shape);
202+
this.items.push(shape);
197203
};
204+
205+
const scene = new THREE.Scene();
206+
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
207+
const directionalLight = new THREE.DirectionalLight( 0xffffff, 1 );
208+
scene.add( directionalLight );
209+
const directionalLight2 = new THREE.DirectionalLight( 0xffffff, 1 );
210+
directionalLight2.position.z=1
211+
scene.add( directionalLight2 );
212+
const renderer = new THREE.WebGLRenderer();
213+
renderer.setSize(window.innerWidth, window.innerHeight)
214+
document.body.appendChild(renderer.domElement);
215+
camera.position.z = 3;
198216
var cb = new CanvasBackground(document.getElementById("canvas"));
199217
cb.setColor("lime");
200218
cb.start();
219+
renderer.setAnimationLoop(function() {
220+
renderer.setSize( window.innerWidth, window.innerHeight );
221+
cb.animate(new Date().getTime())
222+
renderer.render( scene, camera );
223+
});
224+
201225
// -->
202226
</script>
203227
</body>

‎demos/curvesexpr.html

+14-6
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,14 @@
44
body { margin: 0px; }
55
canvas { width:100%; height:100%; overflow: hidden; }
66
</style>
7-
<script type="text/javascript" src="../h3du_min.js"></script>
7+
<script type="importmap">
8+
{
9+
"imports": {
10+
"three": "https://threejs.org/build/three.module.js",
11+
"h3du": "../h3du_module.js"
12+
}
13+
}
14+
</script>
815
<script type="text/javascript" src="../extras/camera.js"></script>
916
<script type="text/javascript" src="../extras/frame.js"></script>
1017
<script type="text/javascript" src="demoutil.js"></script>
@@ -36,9 +43,10 @@
3643
<div id="settings"></div>
3744
</div>
3845
<canvas id=canvas></canvas>
39-
<script id="demo">
40-
/* global H3DU, getExpression, makeMesh, updateShape */
41-
// <!--
46+
<script type="module" id="demo">
47+
48+
import * as THREE from 'three';
49+
import * as H3DU from 'h3du';
4250

4351
if(typeof Math.sign === "undefined") {
4452
Math.sign = function(x) {
@@ -49,9 +57,9 @@
4957

5058
function makeMeshDoubleSided(func, resolution) {
5159
"use strict";
52-
var mesh = makeMesh(func, resolution, resolution);
60+
var mesh = makeMesh(three,func, resolution, resolution);
5361
var otherWinding = H3DU.Meshes.reverseWinding(mesh).reverseNormals();
54-
return mesh.merge(otherWinding);
62+
return THREE.BufferGeometryUtils.mergeGeometries([mesh,otherWinding],false);
5563
}
5664

5765
function CustomCurve(x, y, z, minu, maxu) {

‎demos/demoutil.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -215,9 +215,9 @@ function makeMesh(three, func, resolutionU, resolutionV) {
215215
// Evaluate the surface and generate a triangle
216216
// mesh, using resolution+1 different u-coordinates,
217217
// and resolution+1 different v-coordinates.
218-
// Instead of H3DU.Mesh.TRIANGLES, we could use
219-
// H3DU.Mesh.LINES to create a wireframe mesh,
220-
// or H3DU.Mesh.POINTS to create a point mesh.
218+
// Instead of H3DU.MeshBuffer.TRIANGLES, we could use
219+
// H3DU.MeshBuffer.LINES to create a wireframe mesh,
220+
// or H3DU.MeshBuffer.POINTS to create a point mesh.
221221
.evalSurface(H3DU.Mesh.TRIANGLES, resolutionU, resolutionV)
222222
.toMeshBuffer(three);
223223
}

‎demos/fallingballs.html

+12-18
Original file line numberDiff line numberDiff line change
@@ -136,8 +136,8 @@
136136

137137
function Particles(scene, count, width, height) {
138138
"use strict";
139-
this.shapeGroup = new H3DU.ShapeGroup();
140-
var sphere = new H3DU.Shape(H3DU.Meshes.createSphere(1, 64, 64));
139+
this.shapeGroup = [];
140+
var sphere = new THREE.Mesh(H3DU.Meshes.createSphere(1, 64, 64));
141141
this.bodies = [];
142142
this.bounds = [0, 0, -5000, width, height, 5000];
143143
for(var i = 0; i < count; i++) {
@@ -149,13 +149,13 @@
149149
var scale = width / 100 * mass;
150150
H3DU.MathUtil.constrainPointToBox(p, scale, 0, this.bounds);
151151
this.bodies.push(new CubicBody(scale, mass, p[0], p[1], p[2]));
152-
var shape = sphere.copy();
153-
shape.setScale(scale, scale, scale);
154-
shape.setPosition(p);
155-
shape.setColor([Math.random(), Math.random(), Math.random()]);
156-
this.shapeGroup.addShape(shape);
152+
var shape =new THREE.Mesh(sphere.geometry,
153+
new THREE.MeshLambertMaterial((Math.random()*0x1000000)|0));
154+
shape.scale=new THREE.Vector3(scale,scale,scale);
155+
shape.position=new THREE.Vector3(p[0],p[1],p[2]);
156+
this.shapeGroup.push(shape);
157157
}
158-
scene.addShape(this.shapeGroup);
158+
scene.add(this.shapeGroup);
159159
this.timeInfo = {};
160160
}
161161
Particles.prototype.update = function(time) {
@@ -165,25 +165,19 @@
165165
var body = this.bodies[i];
166166
body.integrate(timeStep);
167167
body.constrainToBox(this.bounds);
168-
this.shapeGroup.getShape(i).setPosition(body.x(), body.y(), body.z());
168+
this.shapeGroup[i].position=new THREE.Vector3(body.x(), body.y(), body.z());
169169
}
170170
};
171171

172-
// Create the 3D scene; find the HTML canvas and pass it
173-
// to Scene3D.
174-
var scene = new H3DU.Scene3D(document.getElementById("canvas"))
175-
.setClearColor("white");
176-
var sub = new H3DU.Batch3D();
177-
sub.getLights().setBasic();
178-
sub.orthoAspect(0, 12, 0, 9, -5000, 5000);
172+
//sub.orthoAspect(0, 12, 0, 9, -5000, 5000);
179173
// 12 meters wide and 9 meters high
180174
var tris = new Particles(sub, 10, 12, 9);
181175
// Set up the render loop
182-
H3DU.renderLoop(function(time) {
176+
function(time) {
183177
"use strict";
184178
tris.update(time);
185179
// Render the scene
186-
scene.render(sub);
180+
console.log("TODO")
187181
});
188182
// -->
189183
</script>

‎demos/implicit.html

+2-4
Original file line numberDiff line numberDiff line change
@@ -62,10 +62,8 @@
6262
function makeImplicit(func) {
6363
"use strict";
6464
var surf = new ImplicitSurface(func);
65-
var mesh = new H3DU.Mesh();
66-
mesh.color3("blue");
67-
surf.evalSurface(mesh, 48, 48, 48, -5, 5, -5, 5, -5, 5);
68-
return mesh.toMeshBuffer();
65+
var mesh = surf.evalSurface(THREE,mesh, 48, 48, 48, -5, 5, -5, 5, -5, 5);
66+
return H3DU.Meshes.setColor(THREE,mesh,"blue");
6967
}
7068

7169
var shapeGroup = new H3DU.ShapeGroup();

‎demos/implicit.js

+8-6
Original file line numberDiff line numberDiff line change
@@ -567,11 +567,12 @@ ImplicitSurface.prototype.findBox = function(xsize, ysize, zsize, xmin, xmax, ym
567567
* @param {number} ymax Greatest value along the y-axis.
568568
* @param {number} zmin Smallest value along the z-axis.
569569
* @param {number} zmax Greatest value along the z-axis.
570-
* @returns {ImplicitSurface} This object.
570+
* @returns {*} A mesh buffer.
571571
*/
572-
ImplicitSurface.prototype.evalSurfacePoints = function(mesh, xsize, ysize, zsize, xmin, xmax, ymin, ymax, zmin, zmax) {
572+
ImplicitSurface.prototype.evalSurfacePoints = function(three, xsize, ysize, zsize, xmin, xmax, ymin, ymax, zmin, zmax) {
573573
"use strict";
574574
if(xsize < 2 || ysize < 2 || zsize < 2)throw new Error();
575+
var mesh=new _Mesh();
575576
mesh.mode(0); // points
576577
const xstep = (xmax - xmin) / (xsize - 1);
577578
const ystep = (ymax - ymin) / (ysize - 1);
@@ -591,7 +592,7 @@ ImplicitSurface.prototype.evalSurfacePoints = function(mesh, xsize, ysize, zsize
591592
}
592593
}
593594
}
594-
return this;
595+
return H3DU.Meshes.fromPositionsNormals(three,mesh.vertices);
595596
};
596597
/**
597598
* Evaluates the grid points of the given three-dimensional area and adds to the
@@ -607,10 +608,11 @@ ImplicitSurface.prototype.evalSurfacePoints = function(mesh, xsize, ysize, zsize
607608
* @param {number} ymax Greatest value along the y-axis.
608609
* @param {number} zmin Smallest value along the z-axis.
609610
* @param {number} zmax Greatest value along the z-axis.
610-
* @returns {ImplicitSurface} This object.
611+
* @returns {*} A mesh buffer.
611612
*/
612-
ImplicitSurface.prototype.evalSurface = function(mesh, xsize, ysize, zsize, xmin, xmax, ymin, ymax, zmin, zmax) {
613+
ImplicitSurface.prototype.evalSurface = function(three, xsize, ysize, zsize, xmin, xmax, ymin, ymax, zmin, zmax) {
613614
"use strict";
615+
var mesh=new _Mesh();
614616
mesh.mode(1); // triangles
615617
const tmpobj = {
616618
"asCubePosition":[[], [], [], [], [], [], [], []],
@@ -638,7 +640,7 @@ ImplicitSurface.prototype.evalSurface = function(mesh, xsize, ysize, zsize, xmin
638640
}
639641
}
640642
}
641-
return this;
643+
return H3DU.Meshes.fromPositionsNormals(three,mesh.vertices);
642644
};
643645
/**
644646
* Returns a sampling object for the union of

‎demos/lines.html

+12-5
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<head><meta charset=utf-8>
1+
<!DOCTYPE html><head><meta charset=utf-8>
22
<style>
33
body { margin: 0px; }
44
canvas { width:100%; height:100%; overflow: hidden; }
@@ -7,11 +7,18 @@
77
</head>
88
<body>
99
<canvas id=canvas></canvas>
10+
<script type="importmap">
11+
{
12+
"imports": {
13+
"three": "https://threejs.org/build/three.module.js",
14+
"h3du": "../h3du_module.js"
15+
}
16+
}
17+
</script>
1018
<script type="module">
1119

12-
import {MathUtil,Meshes,newFrames} from "../h3du_module.js";
13-
/* global H3DU */
14-
// <!--
20+
import * as THREE from 'three';
21+
import {MathUtil,Meshes,newFrames} from 'h3du';
1522

1623
function dms2rad(d,m,s){
1724
var ret=(d<0 ? -1 : 1)*(
@@ -657,7 +664,7 @@
657664
var projUniform=context.getUniformLocation(sp,"proj")
658665
// Prepare mesh and instance buffer
659666
var bdata=prepareMeshBuffer(context,sp,sf.group,
660-
{"POSITION":"position","COLOR":"color"},buffers)
667+
{"position":"position","color":"color"},buffers)
661668
// animation loop
662669
var raf=(time)=>{
663670
// resize canvas if needed

‎demos/surfacesexpr.html

+18-10
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,9 @@
1-
<head><meta name="viewport" content="user-scalable=no,initial-scale=1,maximum-scale=1">
2-
<meta charset=utf-8>
1+
<!DOCTYPE html><head><meta charset=utf-8>
32
<style>
43
body { margin: 0px; }
54
canvas { width:100%; height:100%; overflow: hidden; }
65
</style>
7-
<script type="text/javascript" src="../h3du_min.js"></script>
8-
<script type="text/javascript" src="../extras/camera.js"></script>
9-
<script type="text/javascript" src="../extras/frame.js"></script>
10-
<script type="text/javascript" src="demoutil.js"></script>
11-
<script type="text/javascript" src="expressions.js"></script>
6+
<head><meta name="viewport" content="user-scalable=no,initial-scale=1,maximum-scale=1">
127
</head>
138
<body>
149
<div style="position:absolute;left:0;top:1em">
@@ -31,9 +26,22 @@
3126
<div id="settings"></div>
3227
</div>
3328
<canvas id=canvas></canvas>
34-
<script id="demo">
35-
/* global H3DU, addRange, getExpression, makeMesh, normalCalcExpr, updateShape */
36-
// <!--
29+
<script type="importmap">
30+
{
31+
"imports": {
32+
"three": "https://threejs.org/build/three.module.js",
33+
"h3du": "../h3du_module.js"
34+
}
35+
}
36+
</script>
37+
<script type="text/javascript" src="../extras/camera.js"></script>
38+
<script type="text/javascript" src="../extras/frame.js"></script>
39+
<script type="text/javascript" src="demoutil.js"></script>
40+
<script type="text/javascript" src="expressions.js"></script>
41+
<script type="module">
42+
43+
import * as THREE from 'three';
44+
import * as H3DU from 'h3du';
3745

3846
if(typeof Math.sign === "undefined") {
3947
Math.sign = function(x) {

0 commit comments

Comments
 (0)