Ticket #24601: tmp_2E60EC.html

File tmp_2E60EC.html, 9.9 KB (added by andy, 4 years ago)

Generated HTML for plot

Line 
1<!DOCTYPE html>
2<html>
3<head>
4<title></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
9    body { margin: 0px; overflow: hidden; }
10 
11</style>
12</head>
13
14<body>
15
16<script src="/home/andy/bin/SageMath-8.0/local/share/threejs/three.min.js"></script>
17<script src="/home/andy/bin/SageMath-8.0/local/share/threejs/OrbitControls.js"></script>
18       
19<script>
20
21    var scene = new THREE.Scene();
22
23    var renderer = new THREE.WebGLRenderer( { antialias: true } );
24    renderer.setSize( window.innerWidth, window.innerHeight );
25    renderer.setClearColor( 0xffffff, 1 );
26    document.body.appendChild( renderer.domElement );
27
28    var options = {"aspect_ratio": [1.0, 1.0, 1.0], "decimals": 2, "frame": true, "axes": true, "axes_labels": ["x", "y", "z"]};
29
30    // When animations are supported by the viewer, the value 'false'
31    // will be replaced with an option set in Python by the user
32    var animate = false; // options.animate;
33
34    var b = [{"x":0.0, "y":0.0, "z":0.0}, {"x":1.0, "y":1.0, "z":1.0}]; // bounds
35
36    if ( b[0].x === b[1].x ) {
37        b[0].x -= 1;
38        b[1].x += 1;
39    }
40    if ( b[0].y === b[1].y ) {
41        b[0].y -= 1;
42        b[1].y += 1;
43    }
44    if ( b[0].z === b[1].z ) {
45        b[0].z -= 1;
46        b[1].z += 1;
47    }
48
49    var rRange = Math.sqrt( Math.pow( b[1].x - b[0].x, 2 )
50                            + Math.pow( b[1].x - b[0].x, 2 ) );
51    var xRange = b[1].x - b[0].x;
52    var yRange = b[1].y - b[0].y;
53    var zRange = b[1].z - b[0].z;
54
55    var ar = options.aspect_ratio;
56    var a = [ ar[0], ar[1], ar[2] ]; // aspect multipliers
57    var autoAspect = 2.5;
58    if ( zRange > autoAspect * rRange && a[2] === 1 ) a[2] = autoAspect * rRange / zRange;
59
60    var xMid = ( b[0].x + b[1].x ) / 2;
61    var yMid = ( b[0].y + b[1].y ) / 2;
62    var zMid = ( b[0].z + b[1].z ) / 2;
63
64    var box = new THREE.Geometry();
65    box.vertices.push( new THREE.Vector3( a[0]*b[0].x, a[1]*b[0].y, a[2]*b[0].z ) );
66    box.vertices.push( new THREE.Vector3( a[0]*b[1].x, a[1]*b[1].y, a[2]*b[1].z ) );
67    var boxMesh = new THREE.LineSegments( box );
68    if ( options.frame ) scene.add( new THREE.BoxHelper( boxMesh, 'black' ) );
69
70    if ( options.axes_labels ) {
71        var d = options.decimals; // decimals
72        var offsetRatio = 0.1;
73        var al = options.axes_labels;
74
75        var offset = offsetRatio * a[1]*( b[1].y - b[0].y );
76        var xm = xMid.toFixed(d);
77        if ( /^-0.?0*$/.test(xm) ) xm = xm.substr(1);
78        addLabel( al[0] + '=' + xm, a[0]*xMid, a[1]*b[1].y+offset, a[2]*b[0].z );
79        addLabel( ( b[0].x ).toFixed(d), a[0]*b[0].x, a[1]*b[1].y+offset, a[2]*b[0].z );
80        addLabel( ( b[1].x ).toFixed(d), a[0]*b[1].x, a[1]*b[1].y+offset, a[2]*b[0].z );
81
82        var offset = offsetRatio * a[0]*( b[1].x - b[0].x );
83        var ym = yMid.toFixed(d);
84        if ( /^-0.?0*$/.test(ym) ) ym = ym.substr(1);
85        addLabel( al[1] + '=' + ym, a[0]*b[1].x+offset, a[1]*yMid, a[2]*b[0].z );
86        addLabel( ( b[0].y ).toFixed(d), a[0]*b[1].x+offset, a[1]*b[0].y, a[2]*b[0].z );
87        addLabel( ( b[1].y ).toFixed(d), a[0]*b[1].x+offset, a[1]*b[1].y, a[2]*b[0].z );
88
89        var offset = offsetRatio * a[1]*( b[1].y - b[0].y );
90        var zm = zMid.toFixed(d);
91        if ( /^-0.?0*$/.test(zm) ) zm = zm.substr(1);
92        addLabel( al[2] + '=' + zm, a[0]*b[1].x, a[1]*b[0].y-offset, a[2]*zMid );
93        addLabel( ( b[0].z ).toFixed(d), a[0]*b[1].x, a[1]*b[0].y-offset, a[2]*b[0].z );
94        addLabel( ( b[1].z ).toFixed(d), a[0]*b[1].x, a[1]*b[0].y-offset, a[2]*b[1].z );
95    }
96
97    function addLabel( text, x, y, z ) {
98        var fontsize = 14;
99
100        var canvas = document.createElement( 'canvas' );
101        canvas.width = 128;
102        canvas.height = 32; // powers of two
103
104        var context = canvas.getContext( '2d' );
105        context.fillStyle = 'black';
106        context.font = fontsize + 'px monospace';
107        context.textAlign = 'center';
108        context.textBaseline = 'middle';
109        context.fillText( text, .5*canvas.width, .5*canvas.height );
110
111        var texture = new THREE.Texture( canvas );
112        texture.needsUpdate = true;
113
114        var sprite = new THREE.Sprite( new THREE.SpriteMaterial( { map: texture } ) );
115        sprite.position.set( x, y, z );
116        sprite.scale.set( 1, .25 ); // ratio of width to height
117        scene.add( sprite );
118    }
119
120    if ( options.axes ) scene.add( new THREE.AxisHelper( Math.min( a[0]*b[1].x, a[1]*b[1].y, a[2]*b[1].z ) ) );
121
122    var camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 1000 );
123    camera.up.set( 0, 0, 1 );
124    camera.position.set( a[0]*(xMid+xRange), a[1]*(yMid+yRange), a[2]*(zMid+zRange) );
125
126    var lights = [{"x":-5, "y":3, "z":0, "color":"#7f7f7f", "parent":"camera"}];
127    for ( var i=0 ; i < lights.length ; i++ ) {
128        var light = new THREE.DirectionalLight( lights[i].color, 1 );
129        light.position.set( a[0]*lights[i].x, a[1]*lights[i].y, a[2]*lights[i].z );
130        if ( lights[i].parent === 'camera' ) {
131            light.target.position.set( a[0]*xMid, a[1]*yMid, a[2]*zMid );
132            scene.add( light.target );
133            camera.add( light );
134        } else scene.add( light );
135    }
136    scene.add( camera );
137
138    var ambient = {"color":"#7f7f7f"};
139    scene.add( new THREE.AmbientLight( ambient.color, 1 ) );
140
141    var controls = new THREE.OrbitControls( camera, renderer.domElement );
142    controls.target.set( a[0]*xMid, a[1]*yMid, a[2]*zMid );
143    controls.addEventListener( 'change', function() { if ( !animate ) render(); } );
144
145    window.addEventListener( 'resize', function() {
146       
147        renderer.setSize( window.innerWidth, window.innerHeight );
148        camera.aspect = window.innerWidth / window.innerHeight;
149        camera.updateProjectionMatrix();
150        if ( !animate ) render();
151       
152    } );
153
154    var texts = [];
155    for ( var i=0 ; i < texts.length ; i++ )
156        addLabel( texts[i].text, a[0]*texts[i].x, a[1]*texts[i].y, a[2]*texts[i].z );
157
158    var points = [];
159    for ( var i=0 ; i < points.length ; i++ ) addPoint( points[i] );
160
161    function addPoint( json ) {
162        var geometry = new THREE.Geometry();
163        var v = json.point;
164        geometry.vertices.push( new THREE.Vector3( a[0]*v[0], a[1]*v[1], a[2]*v[2] ) );
165
166        var canvas = document.createElement( 'canvas' );
167        canvas.width = 128;
168        canvas.height = 128;
169
170        var context = canvas.getContext( '2d' );
171        context.arc( 64, 64, 64, 0, 2 * Math.PI );
172        context.fillStyle = json.color;
173        context.fill();
174
175        var texture = new THREE.Texture( canvas );
176        texture.needsUpdate = true;
177
178        var transparent = json.opacity < 1 ? true : false;
179        var material = new THREE.PointsMaterial( { size: json.size/100, map: texture,
180                                                   transparent: transparent, opacity: json.opacity,
181                                                   alphaTest: .1 } );
182
183        var c = geometry.center().multiplyScalar( -1 );
184        var mesh = new THREE.Points( geometry, material );
185        mesh.position.set( c.x, c.y, c.z );
186        scene.add( mesh );
187    }
188
189    var lines = [{"points":[[0.0, 0.0, 0.0], [1.0, 1.0, 1.0]], "color":"blue", "opacity":1, "linewidth":1}];
190    for ( var i=0 ; i < lines.length ; i++ ) addLine( lines[i] );
191
192    function addLine( json ) {
193        var geometry = new THREE.Geometry();
194        for ( var i=0 ; i < json.points.length - 1 ; i++ ) {
195            var v = json.points[i];
196            geometry.vertices.push( new THREE.Vector3( a[0]*v[0], a[1]*v[1], a[2]*v[2] ) );
197            var v = json.points[i+1];
198            geometry.vertices.push( new THREE.Vector3( a[0]*v[0], a[1]*v[1], a[2]*v[2] ) );
199        }
200
201        var transparent = json.opacity < 1 ? true : false;
202        var material = new THREE.LineBasicMaterial( { color: json.color, linewidth: json.linewidth,
203                                                      transparent: transparent, opacity: json.opacity } );
204
205        var c = geometry.center().multiplyScalar( -1 );
206        var mesh = new THREE.LineSegments( geometry, material );
207        mesh.position.set( c.x, c.y, c.z );
208        scene.add( mesh );
209    }
210
211    var surfaces = [];
212    for ( var i=0 ; i < surfaces.length ; i++ ) addSurface( surfaces[i] );
213
214    function addSurface( json ) {
215        var geometry = new THREE.Geometry();
216        for ( var i=0 ; i < json.vertices.length ; i++ ) {
217            var v = json.vertices[i];
218            geometry.vertices.push( new THREE.Vector3( a[0]*v.x, a[1]*v.y, a[2]*v.z ) );
219        }
220        for ( var i=0 ; i < json.faces.length ; i++ ) {
221            var f = json.faces[i];
222            for ( var j=0 ; j < f.length - 2 ; j++ ) {
223                geometry.faces.push( new THREE.Face3( f[0], f[j+1], f[j+2] ) );
224            }
225        }
226        geometry.computeVertexNormals();
227
228        var transparent = json.opacity < 1 ? true : false;
229        var material = new THREE.MeshPhongMaterial( {
230                                     color: json.color, side: THREE.DoubleSide,
231                                     transparent: transparent, opacity: json.opacity,
232                                     shininess: 20 } );
233
234        var c = geometry.center().multiplyScalar( -1 );
235        var mesh = new THREE.Mesh( geometry, material );
236        mesh.position.set( c.x, c.y, c.z );
237        scene.add( mesh );
238    }
239
240    var scratch = new THREE.Vector3();
241
242    function render() {
243
244        if ( animate ) requestAnimationFrame( render );
245        renderer.render( scene, camera );
246
247        for ( var i=0 ; i < scene.children.length ; i++ ) {
248            if ( scene.children[i].type === 'Sprite' ) {
249                var sprite = scene.children[i];
250                var adjust = scratch.addVectors( sprite.position, scene.position )
251                               .sub( camera.position ).length() / 5;
252                sprite.scale.set( adjust, .25*adjust ); // ratio of canvas width to height
253            }
254        }
255    }
256   
257    render();
258    controls.update();
259    if ( !animate ) render();
260
261</script>
262
263</body>
264</html>