move www
This commit is contained in:
cheney
@@ -1,72 +0,0 @@
|
||||
{
|
||||
"glyphs": {
|
||||
"\"": {
|
||||
"ha": 694,
|
||||
"x_min": 174,
|
||||
"x_max": 521,
|
||||
"o": "m 304 982 q 282 841 288 911 l 271 700 l 190 700 l 184 873 q 174 982 179 928 l 304 982 m 521 982 q 499 841 505 911 l 488 700 l 407 700 l 401 873 q 391 982 396 928 l 521 982 z "
|
||||
},
|
||||
"M": {
|
||||
"ha": 694,
|
||||
"x_min": 49,
|
||||
"x_max": 635,
|
||||
"o": "m 635 27 l 526 27 l 526 689 l 515 689 l 385 27 l 298 27 l 168 689 l 157 689 l 157 27 l 49 27 l 49 955 l 217 955 l 336 342 l 347 342 l 467 955 l 635 955 l 635 27 z "
|
||||
},
|
||||
"d": {
|
||||
"ha": 694,
|
||||
"x_min": 49,
|
||||
"x_max": 597,
|
||||
"o": "m 597 27 l 488 27 l 488 109 q 412 38 456 60 q 309 16 369 16 q 125 95 201 16 q 49 331 49 174 q 125 570 49 488 q 309 651 201 651 q 412 627 369 651 q 488 553 456 602 l 488 955 l 597 955 l 597 27 m 488 331 q 442 494 488 434 q 331 553 396 553 q 209 494 250 553 q 168 331 168 434 q 209 171 168 228 q 331 114 250 114 q 442 171 396 114 q 488 331 488 228 z "
|
||||
},
|
||||
"r": {
|
||||
"ha": 694,
|
||||
"x_min": 141,
|
||||
"x_max": 543,
|
||||
"o": "m 543 526 q 369 496 439 543 q 250 336 298 450 l 250 27 l 141 27 l 141 635 l 250 635 l 250 477 q 372 605 298 564 q 543 646 445 646 l 543 526 z "
|
||||
},
|
||||
"汪": {
|
||||
"ha": 1389,
|
||||
"x_min": 141,
|
||||
"x_max": 1313,
|
||||
"o": "m 830 781 q 863 719 873 738 q 846 564 852 700 q 958 589 906 575 q 1050 564 1009 602 q 1020 518 1090 526 q 846 494 949 510 l 841 228 q 982 241 906 233 q 1142 258 1058 250 q 1270 212 1226 266 q 1221 171 1313 157 q 1004 179 1128 184 q 743 155 879 174 q 534 122 608 136 q 415 146 461 109 q 418 184 369 184 q 543 193 467 184 q 776 222 618 201 l 776 483 q 640 472 684 472 q 572 496 602 472 q 581 524 543 521 q 776 553 618 526 l 776 646 q 760 770 776 711 q 578 776 629 754 q 567 806 526 798 q 727 838 608 814 q 939 887 846 863 q 1069 882 1031 911 q 1031 827 1107 852 q 830 781 955 803 m 412 494 q 347 315 391 418 q 279 133 304 212 q 244 14 255 54 q 187 73 233 -27 q 174 182 141 174 q 252 260 206 190 q 369 453 298 331 q 412 494 439 575 m 385 873 q 298 968 320 928 q 377 985 277 1009 q 464 890 477 960 q 385 873 450 819 m 222 564 q 152 659 163 629 q 201 678 141 689 q 290 637 260 667 q 304 553 320 608 q 222 564 288 499 z "
|
||||
},
|
||||
"狗": {
|
||||
"ha": 1389,
|
||||
"x_min": 81,
|
||||
"x_max": 1270,
|
||||
"o": "m 423 705 q 312 632 374 662 q 190 581 250 602 q 206 608 130 559 q 401 770 282 656 q 334 871 369 830 q 263 947 298 911 q 277 960 228 982 q 369 903 326 939 q 445 825 412 868 q 532 936 494 873 q 564 1039 570 998 q 586 1066 559 1080 q 648 1017 613 1053 q 662 960 684 982 q 589 879 640 939 q 483 754 537 819 q 526 461 521 624 q 518 182 532 298 q 461 5 505 65 q 399 0 418 -54 q 312 95 380 54 q 312 125 244 136 q 407 125 380 114 q 448 285 434 136 q 450 499 461 434 q 301 326 385 407 q 149 212 217 244 q 138 228 81 179 q 285 391 195 277 q 434 635 374 505 q 423 705 429 673 m 792 722 q 914 727 846 722 q 1036 746 982 732 q 1107 773 1090 760 q 1166 770 1123 787 q 1240 724 1210 754 q 1242 662 1270 694 q 1218 467 1215 629 q 1204 206 1221 304 q 1158 43 1188 109 q 1080 -57 1128 -22 q 1020 -33 1031 -92 q 958 90 1009 27 q 982 114 906 152 q 1080 103 1058 76 q 1120 220 1101 130 q 1142 496 1139 309 q 1101 694 1145 684 q 990 692 1058 705 q 871 670 922 678 q 776 694 819 662 q 643 605 700 629 q 656 646 586 581 q 803 846 727 711 q 863 1034 879 982 q 949 1036 846 1085 q 987 987 1009 1009 q 917 890 966 966 q 792 722 868 814 m 895 347 q 884 293 955 293 q 684 271 819 293 q 648 244 662 190 q 624 372 635 298 q 594 486 613 445 q 605 521 575 526 q 662 507 635 515 q 757 510 689 499 q 846 540 825 521 q 898 548 868 559 q 963 513 928 537 q 966 461 998 488 q 895 347 933 434 m 678 461 q 684 315 684 358 q 846 336 732 320 q 852 450 852 418 q 806 483 852 488 q 678 461 760 477 z "
|
||||
},
|
||||
"白": {
|
||||
"ha": 1389,
|
||||
"x_min": 250,
|
||||
"x_max": 1172,
|
||||
"o": "m 472 678 q 817 732 711 716 q 958 765 922 749 q 1047 760 993 781 q 1137 708 1101 738 q 1142 643 1172 678 q 1101 407 1112 608 q 1063 125 1090 206 q 998 -11 1036 43 q 947 -3 960 -65 q 895 136 933 60 q 608 119 694 125 q 429 114 521 114 q 388 35 412 -5 q 358 149 363 76 q 347 288 353 222 q 320 475 342 353 q 274 635 298 597 q 277 673 250 673 q 334 667 304 673 q 423 667 363 662 q 545 863 483 743 q 600 1034 608 982 q 684 1036 591 1085 q 724 952 770 982 q 627 860 678 922 q 472 678 575 798 m 407 418 q 570 442 483 423 q 719 477 656 461 q 814 456 781 494 q 670 396 846 418 q 412 385 494 374 q 429 157 423 250 q 684 176 559 163 q 846 190 808 190 q 922 157 884 190 q 982 220 960 125 q 1009 385 1004 315 q 1015 553 1015 456 q 982 673 1015 651 q 863 686 949 694 q 385 624 776 678 q 407 418 401 461 z "
|
||||
}
|
||||
},
|
||||
"familyName": "KaiTi",
|
||||
"ascender": 1194,
|
||||
"descender": -195,
|
||||
"underlinePosition": -119,
|
||||
"underlineThickness": 65,
|
||||
"boundingBox": {
|
||||
"yMin": -255,
|
||||
"xMin": -65,
|
||||
"yMax": 1194,
|
||||
"xMax": 1432
|
||||
},
|
||||
"resolution": 1000,
|
||||
"original_font_information": {
|
||||
"format": 0,
|
||||
"copyright": "© Beijing ZhongYi Electronics Co., 1995-2005, All rights reserved",
|
||||
"fontFamily": "KaiTi",
|
||||
"fontSubfamily": "Regular",
|
||||
"uniqueID": "KaiTi",
|
||||
"fullName": "KaiTi",
|
||||
"version": "Version 5.01",
|
||||
"postScriptName": "KaiTi",
|
||||
"trademark": "Trademark of Beijing ZhongYi Electronics Co., China",
|
||||
"licence": "Microsoft supplied font. You may use this font to create, display, and print content as permitted by the license terms or terms of use, of the Microsoft product, service, or content in which this font was included. You may only (i) embed this font in content as permitted by the embedding restrictions included in this font; and (ii) temporarily download this font to a printer or other output device to help print content. Any other use is prohibited."
|
||||
},
|
||||
"cssFontWeight": "normal",
|
||||
"cssFontStyle": "normal"
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@@ -1,29 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="chrome=1">
|
||||
<title>Title</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
<script type="application/javascript" src="ht.js"></script>
|
||||
<script type="application/javascript">
|
||||
|
||||
function init(){
|
||||
dataModel = new ht.DataModel();
|
||||
g3d = new ht.graph3d.Graph3dView(dataModel);
|
||||
g3d.setGridVisible(true);
|
||||
|
||||
borderPane = new ht.widget.BorderPane();
|
||||
borderPane.addToDOM();
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -1,78 +0,0 @@
|
||||
/**
|
||||
* @author alteredq / http://alteredqualia.com/
|
||||
* @author mr.doob / http://mrdoob.com/
|
||||
*/
|
||||
|
||||
var Detector = {
|
||||
|
||||
canvas: !! window.CanvasRenderingContext2D,
|
||||
webgl: ( function () {
|
||||
|
||||
try {
|
||||
|
||||
var canvas = document.createElement( 'canvas' ); return !! ( window.WebGLRenderingContext && ( canvas.getContext( 'webgl' ) || canvas.getContext( 'experimental-webgl' ) ) );
|
||||
|
||||
} catch ( e ) {
|
||||
|
||||
return false;
|
||||
|
||||
}
|
||||
|
||||
} )(),
|
||||
workers: !! window.Worker,
|
||||
fileapi: window.File && window.FileReader && window.FileList && window.Blob,
|
||||
|
||||
getWebGLErrorMessage: function () {
|
||||
|
||||
var element = document.createElement( 'div' );
|
||||
element.id = 'webgl-error-message';
|
||||
element.style.fontFamily = 'monospace';
|
||||
element.style.fontSize = '13px';
|
||||
element.style.fontWeight = 'normal';
|
||||
element.style.textAlign = 'center';
|
||||
element.style.background = '#fff';
|
||||
element.style.color = '#000';
|
||||
element.style.padding = '1.5em';
|
||||
element.style.width = '400px';
|
||||
element.style.margin = '5em auto 0';
|
||||
|
||||
if ( ! this.webgl ) {
|
||||
|
||||
element.innerHTML = window.WebGLRenderingContext ? [
|
||||
'Your graphics card does not seem to support <a href="http://khronos.org/webgl/wiki/Getting_a_WebGL_Implementation" style="color:#000">WebGL</a>.<br />',
|
||||
'Find out how to get it <a href="http://get.webgl.org/" style="color:#000">here</a>.'
|
||||
].join( '\n' ) : [
|
||||
'Your browser does not seem to support <a href="http://khronos.org/webgl/wiki/Getting_a_WebGL_Implementation" style="color:#000">WebGL</a>.<br/>',
|
||||
'Find out how to get it <a href="http://get.webgl.org/" style="color:#000">here</a>.'
|
||||
].join( '\n' );
|
||||
|
||||
}
|
||||
|
||||
return element;
|
||||
|
||||
},
|
||||
|
||||
addGetWebGLMessage: function ( parameters ) {
|
||||
|
||||
var parent, id, element;
|
||||
|
||||
parameters = parameters || {};
|
||||
|
||||
parent = parameters.parent !== undefined ? parameters.parent : document.body;
|
||||
id = parameters.id !== undefined ? parameters.id : 'oldie';
|
||||
|
||||
element = Detector.getWebGLErrorMessage();
|
||||
element.id = id;
|
||||
|
||||
parent.appendChild( element );
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
// browserify support
|
||||
if ( typeof module === 'object' ) {
|
||||
|
||||
module.exports = Detector;
|
||||
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
Vendored
-14
File diff suppressed because one or more lines are too long
Vendored
-13
@@ -1,13 +0,0 @@
|
||||
// tween.js - http://github.com/sole/tween.js
|
||||
'use strict';var TWEEN=TWEEN||function(){var a=[];return{REVISION:"7",getAll:function(){return a},removeAll:function(){a=[]},add:function(c){a.push(c)},remove:function(c){c=a.indexOf(c);-1!==c&&a.splice(c,1)},update:function(c){if(0===a.length)return!1;for(var b=0,d=a.length,c=void 0!==c?c:Date.now();b<d;)a[b].update(c)?b++:(a.splice(b,1),d--);return!0}}}();
|
||||
TWEEN.Tween=function(a){var c={},b={},d=1E3,e=0,f=null,h=TWEEN.Easing.Linear.None,r=TWEEN.Interpolation.Linear,k=[],l=null,m=!1,n=null,p=null;this.to=function(a,c){null!==c&&(d=c);b=a;return this};this.start=function(d){TWEEN.add(this);m=!1;f=void 0!==d?d:Date.now();f+=e;for(var g in b)if(null!==a[g]){if(b[g]instanceof Array){if(0===b[g].length)continue;b[g]=[a[g]].concat(b[g])}c[g]=a[g]}return this};this.stop=function(){TWEEN.remove(this);return this};this.delay=function(a){e=a;return this};this.easing=
|
||||
function(a){h=a;return this};this.interpolation=function(a){r=a;return this};this.chain=function(){k=arguments;return this};this.onStart=function(a){l=a;return this};this.onUpdate=function(a){n=a;return this};this.onComplete=function(a){p=a;return this};this.update=function(e){if(e<f)return!0;!1===m&&(null!==l&&l.call(a),m=!0);var g=(e-f)/d,g=1<g?1:g,i=h(g),j;for(j in c){var s=c[j],q=b[j];a[j]=q instanceof Array?r(q,i):s+(q-s)*i}null!==n&&n.call(a,i);if(1==g){null!==p&&p.call(a);g=0;for(i=k.length;g<
|
||||
i;g++)k[g].start(e);return!1}return!0}};
|
||||
TWEEN.Easing={Linear:{None:function(a){return a}},Quadratic:{In:function(a){return a*a},Out:function(a){return a*(2-a)},InOut:function(a){return 1>(a*=2)?0.5*a*a:-0.5*(--a*(a-2)-1)}},Cubic:{In:function(a){return a*a*a},Out:function(a){return--a*a*a+1},InOut:function(a){return 1>(a*=2)?0.5*a*a*a:0.5*((a-=2)*a*a+2)}},Quartic:{In:function(a){return a*a*a*a},Out:function(a){return 1- --a*a*a*a},InOut:function(a){return 1>(a*=2)?0.5*a*a*a*a:-0.5*((a-=2)*a*a*a-2)}},Quintic:{In:function(a){return a*a*a*
|
||||
a*a},Out:function(a){return--a*a*a*a*a+1},InOut:function(a){return 1>(a*=2)?0.5*a*a*a*a*a:0.5*((a-=2)*a*a*a*a+2)}},Sinusoidal:{In:function(a){return 1-Math.cos(a*Math.PI/2)},Out:function(a){return Math.sin(a*Math.PI/2)},InOut:function(a){return 0.5*(1-Math.cos(Math.PI*a))}},Exponential:{In:function(a){return 0===a?0:Math.pow(1024,a-1)},Out:function(a){return 1===a?1:1-Math.pow(2,-10*a)},InOut:function(a){return 0===a?0:1===a?1:1>(a*=2)?0.5*Math.pow(1024,a-1):0.5*(-Math.pow(2,-10*(a-1))+2)}},Circular:{In:function(a){return 1-
|
||||
Math.sqrt(1-a*a)},Out:function(a){return Math.sqrt(1- --a*a)},InOut:function(a){return 1>(a*=2)?-0.5*(Math.sqrt(1-a*a)-1):0.5*(Math.sqrt(1-(a-=2)*a)+1)}},Elastic:{In:function(a){var c,b=0.1;if(0===a)return 0;if(1===a)return 1;!b||1>b?(b=1,c=0.1):c=0.4*Math.asin(1/b)/(2*Math.PI);return-(b*Math.pow(2,10*(a-=1))*Math.sin((a-c)*2*Math.PI/0.4))},Out:function(a){var c,b=0.1;if(0===a)return 0;if(1===a)return 1;!b||1>b?(b=1,c=0.1):c=0.4*Math.asin(1/b)/(2*Math.PI);return b*Math.pow(2,-10*a)*Math.sin((a-c)*
|
||||
2*Math.PI/0.4)+1},InOut:function(a){var c,b=0.1;if(0===a)return 0;if(1===a)return 1;!b||1>b?(b=1,c=0.1):c=0.4*Math.asin(1/b)/(2*Math.PI);return 1>(a*=2)?-0.5*b*Math.pow(2,10*(a-=1))*Math.sin((a-c)*2*Math.PI/0.4):0.5*b*Math.pow(2,-10*(a-=1))*Math.sin((a-c)*2*Math.PI/0.4)+1}},Back:{In:function(a){return a*a*(2.70158*a-1.70158)},Out:function(a){return--a*a*(2.70158*a+1.70158)+1},InOut:function(a){return 1>(a*=2)?0.5*a*a*(3.5949095*a-2.5949095):0.5*((a-=2)*a*(3.5949095*a+2.5949095)+2)}},Bounce:{In:function(a){return 1-
|
||||
TWEEN.Easing.Bounce.Out(1-a)},Out:function(a){return a<1/2.75?7.5625*a*a:a<2/2.75?7.5625*(a-=1.5/2.75)*a+0.75:a<2.5/2.75?7.5625*(a-=2.25/2.75)*a+0.9375:7.5625*(a-=2.625/2.75)*a+0.984375},InOut:function(a){return 0.5>a?0.5*TWEEN.Easing.Bounce.In(2*a):0.5*TWEEN.Easing.Bounce.Out(2*a-1)+0.5}}};
|
||||
TWEEN.Interpolation={Linear:function(a,c){var b=a.length-1,d=b*c,e=Math.floor(d),f=TWEEN.Interpolation.Utils.Linear;return 0>c?f(a[0],a[1],d):1<c?f(a[b],a[b-1],b-d):f(a[e],a[e+1>b?b:e+1],d-e)},Bezier:function(a,c){var b=0,d=a.length-1,e=Math.pow,f=TWEEN.Interpolation.Utils.Bernstein,h;for(h=0;h<=d;h++)b+=e(1-c,d-h)*e(c,h)*a[h]*f(d,h);return b},CatmullRom:function(a,c){var b=a.length-1,d=b*c,e=Math.floor(d),f=TWEEN.Interpolation.Utils.CatmullRom;return a[0]===a[b]?(0>c&&(e=Math.floor(d=b*(1+c))),f(a[(e-
|
||||
1+b)%b],a[e],a[(e+1)%b],a[(e+2)%b],d-e)):0>c?a[0]-(f(a[0],a[0],a[1],a[1],-d)-a[0]):1<c?a[b]-(f(a[b],a[b],a[b-1],a[b-1],d-b)-a[b]):f(a[e?e-1:0],a[e],a[b<e+1?b:e+1],a[b<e+2?b:e+2],d-e)},Utils:{Linear:function(a,c,b){return(c-a)*b+a},Bernstein:function(a,c){var b=TWEEN.Interpolation.Utils.Factorial;return b(a)/b(c)/b(a-c)},Factorial:function(){var a=[1];return function(c){var b=1,d;if(a[c])return a[c];for(d=c;1<d;d--)b*=d;return a[c]=b}}(),CatmullRom:function(a,c,b,d,e){var a=0.5*(b-a),d=0.5*(d-c),f=
|
||||
e*e;return(2*c-2*b+a+d)*e*f+(-3*c+3*b-2*a-d)*f+a*e+c}}};
|
||||
@@ -1,441 +0,0 @@
|
||||
// ----- setup ----- //
|
||||
|
||||
var illoElem = document.querySelector('.illo');
|
||||
var sceneSize = 96;
|
||||
var TAU = Zdog.TAU;
|
||||
var ROOT3 = Math.sqrt(3);
|
||||
var ROOT5 = Math.sqrt(5);
|
||||
var PHI = ( 1 + ROOT5 ) / 2;
|
||||
var isSpinning = true;
|
||||
var viewRotation = new Zdog.Vector();
|
||||
var displaySize;
|
||||
|
||||
// colors
|
||||
var eggplant = '#636';
|
||||
var garnet = '#C25';
|
||||
var orange = '#E62';
|
||||
var gold = '#EA0';
|
||||
var yellow = '#ED0';
|
||||
|
||||
var illo = new Zdog.Illustration({
|
||||
element: illoElem,
|
||||
scale: 8,
|
||||
resize: 'fullscreen',
|
||||
onResize: function( width, height ) {
|
||||
displaySize = Math.min( width, height );
|
||||
this.zoom = Math.floor( displaySize / sceneSize );
|
||||
},
|
||||
});
|
||||
|
||||
var solids = [];
|
||||
|
||||
// ----- hourglass ----- //
|
||||
|
||||
( function() {
|
||||
|
||||
var hourglass = new Zdog.Anchor({
|
||||
addTo: illo,
|
||||
translate: { x: 0, y: -4 },
|
||||
});
|
||||
|
||||
solids.push( hourglass );
|
||||
|
||||
var hemi = new Zdog.Hemisphere({
|
||||
diameter: 2,
|
||||
translate: { z: -1 },
|
||||
addTo: hourglass,
|
||||
color: garnet,
|
||||
backface: orange,
|
||||
stroke: false,
|
||||
});
|
||||
|
||||
hemi.copy({
|
||||
translate: { z: 1 },
|
||||
rotate: { y: TAU/2 },
|
||||
color: eggplant,
|
||||
backface: gold,
|
||||
});
|
||||
|
||||
})();
|
||||
|
||||
// ----- sphere ----- //
|
||||
|
||||
( function() {
|
||||
|
||||
var sphere = new Zdog.Anchor({
|
||||
addTo: illo,
|
||||
translate: { x: -4, y: -4 },
|
||||
});
|
||||
|
||||
solids.push( sphere );
|
||||
|
||||
var hemi = new Zdog.Hemisphere({
|
||||
diameter: 2,
|
||||
addTo: sphere,
|
||||
color: orange,
|
||||
backface: eggplant,
|
||||
stroke: false,
|
||||
});
|
||||
|
||||
hemi.copy({
|
||||
rotate: { y: TAU/2 },
|
||||
color: eggplant,
|
||||
backface: orange,
|
||||
});
|
||||
|
||||
})();
|
||||
|
||||
// ----- cylinder ----- //
|
||||
|
||||
var cylinder = new Zdog.Cylinder({
|
||||
diameter: 2,
|
||||
length: 2,
|
||||
addTo: illo,
|
||||
translate: { x: 4, y: -4 },
|
||||
// rotate: { x: TAU/4 },
|
||||
color: gold,
|
||||
backface: garnet,
|
||||
stroke: false,
|
||||
});
|
||||
|
||||
solids.push( cylinder );
|
||||
|
||||
// ----- cone ----- //
|
||||
|
||||
var cone = new Zdog.Anchor({
|
||||
addTo: illo,
|
||||
translate: { x: -4, y: 0 },
|
||||
});
|
||||
|
||||
solids.push( cone );
|
||||
|
||||
new Zdog.Cone({
|
||||
diameter: 2,
|
||||
length: 2,
|
||||
addTo: cone,
|
||||
translate: { z: 1 },
|
||||
rotate: { y: TAU/2 },
|
||||
color: garnet,
|
||||
backface: gold,
|
||||
stroke: false,
|
||||
});
|
||||
|
||||
// ----- tetrahedron ----- //
|
||||
|
||||
( function() {
|
||||
|
||||
var tetrahedron = new Zdog.Anchor({
|
||||
addTo: illo,
|
||||
translate: { x: 0, y: 0 },
|
||||
scale: 2.5,
|
||||
});
|
||||
|
||||
var radius = 0.5;
|
||||
var inradius = Math.cos( TAU/6 ) * radius;
|
||||
var height = radius + inradius;
|
||||
|
||||
solids.push( tetrahedron );
|
||||
|
||||
var triangle = new Zdog.Polygon({
|
||||
sides: 3,
|
||||
radius: radius,
|
||||
addTo: tetrahedron,
|
||||
translate: { y: height/2 },
|
||||
fill: true,
|
||||
stroke: false,
|
||||
color: eggplant,
|
||||
// backface: false,
|
||||
});
|
||||
|
||||
|
||||
for ( var i=0; i < 3; i++ ) {
|
||||
var rotor1 = new Zdog.Anchor({
|
||||
addTo: tetrahedron,
|
||||
rotate: { y: TAU/3 * -i },
|
||||
});
|
||||
var rotor2 = new Zdog.Anchor({
|
||||
addTo: rotor1,
|
||||
translate: { z: inradius, y: height/2 },
|
||||
rotate: { x: Math.acos(1/3) * -1 + TAU/4 },
|
||||
});
|
||||
triangle.copy({
|
||||
addTo: rotor2,
|
||||
translate: { y: -inradius },
|
||||
color: [ gold, garnet, orange ][i],
|
||||
});
|
||||
}
|
||||
|
||||
triangle.rotate.set({ x: -TAU/4, z: -TAU/2 });
|
||||
|
||||
})();
|
||||
|
||||
// ----- octahedron ----- //
|
||||
|
||||
( function() {
|
||||
|
||||
var octahedron = new Zdog.Anchor({
|
||||
addTo: newcanvas,
|
||||
translate: { x: -4, y: 4 },
|
||||
scale: 1.75,
|
||||
});
|
||||
|
||||
var colorWheel = [ eggplant, garnet, orange, gold, yellow ];
|
||||
|
||||
// radius of triangle with side length = 1
|
||||
var radius = ROOT3/2 * 2/3;
|
||||
var height = radius * 3/2;
|
||||
var tilt = Math.asin( 0.5 / height );
|
||||
|
||||
[ -1, 1 ].forEach( function( ySide ) {
|
||||
for ( var i=0; i < 4; i++ ) {
|
||||
var rotor = new Zdog.Anchor({
|
||||
addTo: octahedron,
|
||||
rotate: { y: TAU/4 * (i + 1.5) * -1 },
|
||||
});
|
||||
|
||||
var anchor = new Zdog.Anchor({
|
||||
addTo: rotor,
|
||||
translate: { z: 0.5 },
|
||||
rotate: { x: tilt * ySide },
|
||||
// scale: { y: -ySide },
|
||||
});
|
||||
|
||||
new Zdog.Polygon({
|
||||
sides: 3,
|
||||
radius: radius,
|
||||
addTo: anchor,
|
||||
translate: { y: -radius/2 * ySide },
|
||||
scale: { y: ySide },
|
||||
stroke: false,
|
||||
fill: true,
|
||||
color: colorWheel[ i + 0.5 + 0.5*ySide ],
|
||||
backface: false,
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
})();
|
||||
|
||||
// ----- cube ----- //
|
||||
|
||||
var cube = new Zdog.Box({
|
||||
addTo: illo,
|
||||
width: 2,
|
||||
height: 2,
|
||||
depth: 2,
|
||||
translate: { x: 4, y: 0 },
|
||||
topFace: yellow,
|
||||
frontFace: gold,
|
||||
leftFace: orange,
|
||||
rightFace: orange,
|
||||
rearFace: garnet,
|
||||
bottomFace: eggplant,
|
||||
stroke: false,
|
||||
});
|
||||
|
||||
solids.push( cube );
|
||||
|
||||
// ----- dodecahedron ----- //
|
||||
|
||||
( function() {
|
||||
|
||||
var dodecahedron = new Zdog.Anchor({
|
||||
addTo: illo,
|
||||
translate: { x: 0, y: 4 },
|
||||
scale: 0.75,
|
||||
});
|
||||
|
||||
solids.push( dodecahedron );
|
||||
|
||||
// https://en.wikipedia.org/wiki/Regular_dodecahedron#Dimensions
|
||||
var midradius = ( PHI * PHI ) / 2;
|
||||
|
||||
// top & bottom faces
|
||||
var face = new Zdog.Polygon({
|
||||
sides: 5,
|
||||
radius: 1,
|
||||
addTo: dodecahedron,
|
||||
translate: { y: -midradius },
|
||||
rotate: { x: TAU/4 },
|
||||
fill: true,
|
||||
stroke: false,
|
||||
color: yellow,
|
||||
// backface: false,
|
||||
});
|
||||
|
||||
face.copy({
|
||||
translate: { y: midradius },
|
||||
rotate: { x: -TAU/4 },
|
||||
color: eggplant,
|
||||
});
|
||||
|
||||
|
||||
[ -1, 1 ].forEach( function( ySide ) {
|
||||
|
||||
|
||||
var colorWheel = {
|
||||
'-1': [ eggplant, garnet, gold, orange, garnet ],
|
||||
1: [ yellow, gold, garnet, orange, gold ],
|
||||
}[ ySide ];
|
||||
|
||||
for ( var i=0; i < 5; i++ ) {
|
||||
var rotor1 = new Zdog.Anchor({
|
||||
addTo: dodecahedron,
|
||||
rotate: { y: TAU/5 * (i) },
|
||||
});
|
||||
var rotor2 = new Zdog.Anchor({
|
||||
addTo: rotor1,
|
||||
rotate: { x: TAU/4*ySide - Math.atan(2) },
|
||||
});
|
||||
|
||||
face.copy({
|
||||
addTo: rotor2,
|
||||
translate: { z: midradius },
|
||||
rotate: { z: TAU/2 },
|
||||
color: colorWheel[i],
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
})();
|
||||
|
||||
// ----- isocahedron ----- //
|
||||
|
||||
( function() {
|
||||
|
||||
var isocahedron = new Zdog.Anchor({
|
||||
addTo: illo,
|
||||
translate: { x: 4, y: 4 },
|
||||
scale: 1.2,
|
||||
});
|
||||
|
||||
solids.push( isocahedron );
|
||||
|
||||
// geometry
|
||||
// radius of triangle with side length = 1
|
||||
var faceRadius = ROOT3/2 * 2/3;
|
||||
var faceHeight = faceRadius * 3/2;
|
||||
var capApothem = 0.5 / Math.tan( TAU/10 );
|
||||
var capRadius = 0.5 / Math.sin( TAU/10 );
|
||||
var capTilt = Math.asin( capApothem / faceHeight );
|
||||
var capSagitta = capRadius - capApothem;
|
||||
var sideTilt = Math.asin( capSagitta / faceHeight );
|
||||
var sideHeight = Math.sqrt( faceHeight*faceHeight - capSagitta*capSagitta );
|
||||
|
||||
// var colorWheel = [ eggplant, garnet, orange, gold, yellow ];
|
||||
|
||||
[ -1, 1 ].forEach( function( ySide ) {
|
||||
var capColors = {
|
||||
'-1': [ garnet, gold, yellow, gold, orange ],
|
||||
1: [ gold, garnet, eggplant, garnet, orange ],
|
||||
}[ ySide ];
|
||||
|
||||
var sideColors = {
|
||||
'-1': [ garnet, gold, yellow, orange, garnet ],
|
||||
1: [ gold, garnet, eggplant, orange, orange ],
|
||||
}[ ySide ];
|
||||
|
||||
for ( var i=0; i < 5; i++ ) {
|
||||
var rotor = new Zdog.Anchor({
|
||||
addTo: isocahedron,
|
||||
rotate: { y: TAU/5 * -i },
|
||||
translate: { y: sideHeight/2 * ySide },
|
||||
});
|
||||
|
||||
var capRotateX = -capTilt;
|
||||
var isYPos = ySide > 0;
|
||||
capRotateX += isYPos ? TAU/2 : 0;
|
||||
|
||||
var capAnchor = new Zdog.Anchor({
|
||||
addTo: rotor,
|
||||
translate: { z: capApothem * ySide },
|
||||
rotate: { x: capRotateX },
|
||||
});
|
||||
|
||||
// cap face
|
||||
var face = new Zdog.Polygon({
|
||||
sides: 3,
|
||||
radius: faceRadius,
|
||||
addTo: capAnchor,
|
||||
translate: { y: -faceRadius/2 },
|
||||
stroke: false,
|
||||
fill: true,
|
||||
color: capColors[i],
|
||||
// backface: false,
|
||||
});
|
||||
|
||||
var sideRotateX = -sideTilt;
|
||||
sideRotateX += isYPos ? 0 : TAU/2;
|
||||
var sideAnchor = capAnchor.copy({
|
||||
rotate: { x: sideRotateX },
|
||||
});
|
||||
|
||||
face.copy({
|
||||
addTo: sideAnchor,
|
||||
translate: { y: -faceRadius/2 },
|
||||
rotate: { y: TAU/2 },
|
||||
color: sideColors[i]
|
||||
});
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
})();
|
||||
|
||||
// -- animate --- //
|
||||
|
||||
var keyframes = [
|
||||
{ x: 0, y: 0 },
|
||||
{ x: 0, y: TAU },
|
||||
{ x: TAU, y: TAU },
|
||||
];
|
||||
|
||||
var ticker = 0;
|
||||
var cycleCount = 180;
|
||||
var turnLimit = keyframes.length - 1;
|
||||
|
||||
function animate() {
|
||||
update();
|
||||
illo.renderGraph();
|
||||
requestAnimationFrame( animate );
|
||||
}
|
||||
|
||||
animate();
|
||||
|
||||
function update() {
|
||||
|
||||
if ( isSpinning ) {
|
||||
var progress = ticker / cycleCount;
|
||||
var tween = Zdog.easeInOut( progress % 1, 4 );
|
||||
var turn = Math.floor( progress % turnLimit );
|
||||
var keyA = keyframes[ turn ];
|
||||
var keyB = keyframes[ turn + 1 ];
|
||||
viewRotation.x = Zdog.lerp( keyA.x, keyB.x, tween );
|
||||
viewRotation.y = Zdog.lerp( keyA.y, keyB.y, tween );
|
||||
ticker++;
|
||||
}
|
||||
|
||||
solids.forEach( function( solid ) {
|
||||
solid.rotate.set( viewRotation );
|
||||
});
|
||||
|
||||
illo.updateGraph();
|
||||
}
|
||||
|
||||
// ----- inputs ----- //
|
||||
|
||||
var dragStartRX, dragStartRY;
|
||||
|
||||
new Zdog.Dragger({
|
||||
startElement: illoElem,
|
||||
onDragStart: function() {
|
||||
isSpinning = false;
|
||||
dragStartRX = viewRotation.x;
|
||||
dragStartRY = viewRotation.y;
|
||||
},
|
||||
onDragMove: function( pointer, moveX, moveY ) {
|
||||
viewRotation.x = dragStartRX - ( moveY / displaySize * TAU );
|
||||
viewRotation.y = dragStartRY - ( moveX / displaySize * TAU );
|
||||
},
|
||||
});
|
||||
Vendored
-6
@@ -1,6 +0,0 @@
|
||||
// stats.js - http://github.com/mrdoob/stats.js
|
||||
var Stats=function(){var l=Date.now(),m=l,g=0,n=Infinity,o=0,h=0,p=Infinity,q=0,r=0,s=0,f=document.createElement("div");f.id="stats";f.addEventListener("mousedown",function(b){b.preventDefault();t(++s%2)},!1);f.style.cssText="width:80px;opacity:0.9;cursor:pointer";var a=document.createElement("div");a.id="fps";a.style.cssText="padding:0 0 3px 3px;text-align:left;background-color:#002";f.appendChild(a);var i=document.createElement("div");i.id="fpsText";i.style.cssText="color:#0ff;font-family:Helvetica,Arial,sans-serif;font-size:9px;font-weight:bold;line-height:15px";
|
||||
i.innerHTML="FPS";a.appendChild(i);var c=document.createElement("div");c.id="fpsGraph";c.style.cssText="position:relative;width:74px;height:30px;background-color:#0ff";for(a.appendChild(c);74>c.children.length;){var j=document.createElement("span");j.style.cssText="width:1px;height:30px;float:left;background-color:#113";c.appendChild(j)}var d=document.createElement("div");d.id="ms";d.style.cssText="padding:0 0 3px 3px;text-align:left;background-color:#020;display:none";f.appendChild(d);var k=document.createElement("div");
|
||||
k.id="msText";k.style.cssText="color:#0f0;font-family:Helvetica,Arial,sans-serif;font-size:9px;font-weight:bold;line-height:15px";k.innerHTML="MS";d.appendChild(k);var e=document.createElement("div");e.id="msGraph";e.style.cssText="position:relative;width:74px;height:30px;background-color:#0f0";for(d.appendChild(e);74>e.children.length;)j=document.createElement("span"),j.style.cssText="width:1px;height:30px;float:left;background-color:#131",e.appendChild(j);var t=function(b){s=b;switch(s){case 0:a.style.display=
|
||||
"block";d.style.display="none";break;case 1:a.style.display="none",d.style.display="block"}};return{REVISION:11,domElement:f,setMode:t,begin:function(){l=Date.now()},end:function(){var b=Date.now();g=b-l;n=Math.min(n,g);o=Math.max(o,g);k.textContent=g+" MS ("+n+"-"+o+")";var a=Math.min(30,30-30*(g/200));e.appendChild(e.firstChild).style.height=a+"px";r++;b>m+1E3&&(h=Math.round(1E3*r/(b-m)),p=Math.min(p,h),q=Math.max(q,h),i.textContent=h+" FPS ("+p+"-"+q+")",a=Math.min(30,30-30*(h/100)),c.appendChild(c.firstChild).style.height=
|
||||
a+"px",m=b,r=0);return b},update:function(){l=this.end()}}};
|
||||
@@ -1,379 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Title</title>
|
||||
<style>
|
||||
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
/*canvas {*/
|
||||
/*width: 100%;*/
|
||||
/*height: 100%*/
|
||||
/*}*/
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<script type="application/javascript" src="three.js"></script>
|
||||
<script type="application/javascript" src="stats.min.js"></script>
|
||||
<script>
|
||||
console.log( "document.body.clientWidth", document.body.clientWidth )
|
||||
console.log( "document.body.clientHeight", document.body.clientHeight)
|
||||
console.log( "document.body.offsetWidth", document.body.offsetWidth)
|
||||
console.log( "document.body.offsetHeight", document.body.offsetHeight)
|
||||
console.log( "document.body.scrollWidth", document.body.scrollWidth)
|
||||
console.log( "document.body.scrollHeight", document.body.scrollHeight)
|
||||
console.log( "document.body.scrollTop", document.body.scrollTop)
|
||||
console.log( "document.body.scrollLeft", document.body.scrollLeft)
|
||||
console.log( "window.screenTop", window.screenTop)
|
||||
console.log( "window.screenLeft", window.screenLeft)
|
||||
console.log( "window.screen.height", window.screen.height)
|
||||
console.log( "window.screen.width", window.screen.width)
|
||||
console.log( "window.screen.availHeight", window.screen.availHeight)
|
||||
console.log( "window.screen.availWidth", window.screen.availWidth)
|
||||
|
||||
|
||||
var mouseX = 0;
|
||||
var mouseY = 0;
|
||||
|
||||
var w = document.body.clientWidth
|
||||
var h = document.body.clientHeight
|
||||
|
||||
document.addEventListener('mousemove', onDocumentMouseMove, false );
|
||||
function onDocumentMouseMove( event ) {
|
||||
mouseX = ( event.clientX - w/2 );
|
||||
mouseY = ( event.clientY - h/2 );
|
||||
}
|
||||
|
||||
|
||||
var scene = new THREE.Scene();
|
||||
|
||||
|
||||
|
||||
var camera = new THREE.PerspectiveCamera(45, w / h , 0.1, 500);
|
||||
// var camera = new THREE.OrthographicCamera( w / -2, w /2, h/ 2, h/-2, 0.1, 500 );
|
||||
|
||||
var far = 50
|
||||
camera.position.x = 0;
|
||||
camera.position.y = - far / 2;
|
||||
camera.position.z = far;
|
||||
|
||||
// camera.up.set(1, 1, 1)
|
||||
camera.lookAt(new THREE.Vector3( 0, 0, 0 ));
|
||||
// console.log("scene.position)", scene.position)
|
||||
|
||||
var renderer = new THREE.WebGLRenderer({
|
||||
antialias:true
|
||||
});
|
||||
renderer.setSize(w, h);
|
||||
|
||||
|
||||
var stats = new Stats();
|
||||
stats.domElement.style.position = 'absolute';
|
||||
stats.domElement.style.left = '0px';
|
||||
stats.domElement.style.top = '0px';
|
||||
|
||||
document.body.appendChild(renderer.domElement);
|
||||
document.body.appendChild(stats.domElement);
|
||||
|
||||
{
|
||||
{
|
||||
var light = new THREE.AmbientLight(0xFFFFFF);
|
||||
light.position.set(100, 100, 200);
|
||||
scene.add(light);
|
||||
|
||||
}
|
||||
}
|
||||
// {
|
||||
// var light = new THREE.DirectionalLight(0xFFFFFF, 1.0, 0);
|
||||
// light.position.set(200, 100, 0);
|
||||
// scene.add(light);
|
||||
// }
|
||||
// {
|
||||
// var geometry = new THREE.CubeGeometry( 50, 50, 50, 4, 4);
|
||||
// // B start
|
||||
// var material = new THREE.MeshLambertMaterial( { color:0x880000} );
|
||||
// // B end
|
||||
// var mesh = new THREE.Mesh( geometry,material);
|
||||
// mesh.position = new THREE.Vector3(0,0,0);
|
||||
// scene.add(mesh);
|
||||
// }
|
||||
{
|
||||
// 网格的边长是1000，每个小网格的边长是50
|
||||
var helper = new THREE.GridHelper( 1000, 50 , 0x0000ff, 0x808080 );
|
||||
scene.add( helper );
|
||||
}
|
||||
var curMeth;
|
||||
{
|
||||
var geometry = new THREE.BoxGeometry( 1,1,1 );
|
||||
|
||||
for ( var i = 0; i < geometry.faces.length; i += 2 ) {
|
||||
|
||||
var hex = Math.random() * 0xffffff;
|
||||
geometry.faces[ i ].color.setHex( hex );
|
||||
geometry.faces[ i + 1 ].color.setHex( hex );
|
||||
|
||||
}
|
||||
|
||||
var material = new THREE.LineBasicMaterial( { vertexColors: THREE.FaceColors} );
|
||||
var mesh = new THREE.Mesh( geometry,material);
|
||||
mesh.position = new THREE.Vector3(0, -10 ,0);
|
||||
scene.add(mesh);
|
||||
curMeth = mesh
|
||||
}
|
||||
|
||||
var watting;
|
||||
{
|
||||
var loader = new THREE.FontLoader();
|
||||
//导入字体，设定字体，这里的话，你们找对自己的字体路径，可能和我的不一样的！！下载的three.js包里面examples/fonts里面有字体
|
||||
loader.load('./helvetiker_bold.typeface.json', function(font) {
|
||||
|
||||
// 文字
|
||||
var text = "Watting...";
|
||||
|
||||
|
||||
var g = new THREE.TextGeometry(text, {
|
||||
// 设定文字字体，
|
||||
font: font,
|
||||
//尺寸
|
||||
size: 20,
|
||||
//厚度
|
||||
height: 5,
|
||||
});
|
||||
//计算边界，暂时不用管
|
||||
g.computeBoundingBox();
|
||||
|
||||
|
||||
{
|
||||
g = new THREE.EdgesGeometry(g); //或WireframeGeometry(几何)
|
||||
|
||||
var mat = new THREE.LineBasicMaterial({color : 0xffffff, linewidth : 2});
|
||||
|
||||
var wireframe = new THREE.LineSegments( g , mat );
|
||||
|
||||
scene.add(wireframe);
|
||||
watting = wireframe
|
||||
}
|
||||
|
||||
|
||||
// //3D文字材质
|
||||
// var m = new THREE.LineBasicMaterial({color: 0xffff00});
|
||||
// var mesh = new THREE.Mesh(g, m);
|
||||
// mesh.position = new THREE.Vector3(0, -100, 0);
|
||||
//
|
||||
// // 加入到场景中
|
||||
// scene.add(mesh);
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
{
|
||||
var loader = new THREE.FontLoader();
|
||||
//导入字体，设定字体，这里的话，你们找对自己的字体路径，可能和我的不一样的！！下载的three.js包里面examples/fonts里面有字体
|
||||
loader.load('./yahei.json', function(font){
|
||||
|
||||
{
|
||||
var xMid;
|
||||
|
||||
var color = 0x006699;
|
||||
|
||||
var matDark = new THREE.LineBasicMaterial( {
|
||||
color: color,
|
||||
side: THREE.DoubleSide
|
||||
} );
|
||||
|
||||
var matLite = new THREE.MeshBasicMaterial( {
|
||||
color: color,
|
||||
transparent: true,
|
||||
opacity: 0.4,
|
||||
side: THREE.DoubleSide
|
||||
} );
|
||||
|
||||
var message = "亿企云平台";
|
||||
|
||||
var shapes = font.generateShapes( message, 10 );
|
||||
|
||||
var geometry = new THREE.ShapeBufferGeometry( shapes );
|
||||
|
||||
geometry.computeBoundingBox();
|
||||
|
||||
xMid = - 0.5 * ( geometry.boundingBox.max.x - geometry.boundingBox.min.x );
|
||||
|
||||
geometry.translate( xMid, 0, 0 );
|
||||
|
||||
// make shape ( N.B. edge view not visible )
|
||||
|
||||
text = new THREE.Mesh( geometry, matLite );
|
||||
text.position.z = - 10;
|
||||
scene.add( text );
|
||||
|
||||
// make line shape ( N.B. edge view remains visible )
|
||||
|
||||
var holeShapes = [];
|
||||
|
||||
for ( var i = 0; i < shapes.length; i ++ ) {
|
||||
|
||||
var shape = shapes[ i ];
|
||||
|
||||
if ( shape.holes && shape.holes.length > 0 ) {
|
||||
|
||||
for ( var j = 0; j < shape.holes.length; j ++ ) {
|
||||
|
||||
var hole = shape.holes[ j ];
|
||||
holeShapes.push( hole );
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
shapes.push.apply( shapes, holeShapes );
|
||||
|
||||
var lineText = new THREE.Object3D();
|
||||
|
||||
for ( var i = 0; i < shapes.length; i ++ ) {
|
||||
|
||||
var shape = shapes[ i ];
|
||||
|
||||
var points = shape.getPoints();
|
||||
var geometry = new THREE.BufferGeometry().setFromPoints( points );
|
||||
|
||||
geometry.translate( xMid, 0, 0 );
|
||||
|
||||
var lineMesh = new THREE.Line( geometry, matDark );
|
||||
lineText.add( lineMesh );
|
||||
|
||||
}
|
||||
|
||||
scene.add( lineText );
|
||||
}
|
||||
|
||||
|
||||
if ( watting ){
|
||||
setTimeout(function () {
|
||||
scene.remove( watting )
|
||||
}, 10000 )
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
// {
|
||||
// var geometry = new THREE.CylinderGeometry( 5,5,5);
|
||||
// var material = new THREE.MeshLambertMaterial( { color:0xFFFFFF} );
|
||||
// var mesh = new THREE.Mesh( geometry,material);
|
||||
// mesh.position = new THREE.Vector3(0,0,0);
|
||||
// scene.add(mesh);
|
||||
// }
|
||||
// {
|
||||
// var axisHelper =new THREE.AxisHelper(20);
|
||||
// scene.add(axisHelper);
|
||||
//
|
||||
// }
|
||||
// {
|
||||
//
|
||||
//
|
||||
//
|
||||
// var material = new THREE.LineBasicMaterial( { vertexColors: true } );
|
||||
// var color0 = new THREE.Color( 0x444444 );
|
||||
// var color1 = new THREE.Color( 0xFF0000 );
|
||||
// var color2 = new THREE.Color( 0x00FF00 );
|
||||
// var color3 = new THREE.Color( 0x0000FF );
|
||||
//
|
||||
//
|
||||
// // 线的材质可以由2点的颜色决定
|
||||
// var p0 = new THREE.Vector3( 0, 0, 0 );
|
||||
// var p1 = new THREE.Vector3( 100, 0, 0 );
|
||||
// var p2 = new THREE.Vector3( 0, 100, 0 );
|
||||
// var p3 = new THREE.Vector3( 0, 0, 100 );
|
||||
// var geometry1 = new THREE.Geometry();
|
||||
// geometry1.vertices.push(p0);
|
||||
// geometry1.vertices.push(p1);
|
||||
// geometry1.colors.push( color0, color1 );
|
||||
//
|
||||
// var geometry2 = new THREE.Geometry();
|
||||
// geometry2.vertices.push(p0);
|
||||
// geometry2.vertices.push(p2);
|
||||
// geometry2.colors.push( color0, color2 );
|
||||
// // geometry.vertices.push(p3);
|
||||
//
|
||||
// var geometry3 = new THREE.Geometry();
|
||||
// geometry3.vertices.push(p0);
|
||||
// geometry3.vertices.push(p3);
|
||||
// geometry3.colors.push( color0, color3 );
|
||||
//
|
||||
// var line1 = new THREE.Line( geometry1, material, THREE.LineSegments );
|
||||
// var line2 = new THREE.Line( geometry2, material, THREE.LineSegments );
|
||||
// var line3 = new THREE.Line( geometry3, material, THREE.LineSegments );
|
||||
//
|
||||
// scene.add(line1);
|
||||
// scene.add(line2);
|
||||
// scene.add(line3);
|
||||
// }
|
||||
|
||||
function render() {
|
||||
requestAnimationFrame(render);
|
||||
renderer.render(scene, camera);
|
||||
}
|
||||
|
||||
function round(a, b, r, angle) {
|
||||
var na = r * Math.sin( angle )
|
||||
var nb = r * Math.cos( angle )
|
||||
return {
|
||||
na,nb
|
||||
}
|
||||
}
|
||||
var angle = 0
|
||||
var v = 0.01
|
||||
|
||||
setInterval(function () {
|
||||
|
||||
if ( v == 0.01 ){
|
||||
v = 0.1
|
||||
} else {
|
||||
v = 0.01
|
||||
}
|
||||
|
||||
}, 3000 )
|
||||
|
||||
function animate() {
|
||||
|
||||
// // curMeth.rotation.y += 0.01;
|
||||
// camera.position.x += ( mouseX - camera.position.x ) * 0.05;
|
||||
// camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
|
||||
// // 相机永远指向场景的原点位置，场景的位置默认在世界坐标的原点，而且一般我们不会移动scene的位置
|
||||
// camera.lookAt( scene.position );
|
||||
|
||||
// camera.position.x = camera.position.x - 0.11;
|
||||
|
||||
angle += v
|
||||
var p = round(camera.position.x, camera.position.z, 50, angle)
|
||||
camera.position.x = p.na
|
||||
camera.position.z = p.nb
|
||||
camera.lookAt( scene.position )
|
||||
|
||||
|
||||
stats.update()
|
||||
render();
|
||||
|
||||
requestAnimationFrame( animate );
|
||||
|
||||
}
|
||||
|
||||
animate()
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
-48034
File diff suppressed because one or more lines are too long
@@ -1,519 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="full-screen" content="yes">
|
||||
<meta name="browsermode" content="application">
|
||||
<meta name="x5-orientation" content="portrait">
|
||||
<meta name="x5-fullscreen" content="true">
|
||||
<meta name="x5-page-mode" content="app">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
|
||||
|
||||
<meta name="apple-mobile-web-app-title" content="应用标题">
|
||||
<meta content="telephone=no" name="format-detection" />
|
||||
<meta content="email=no" name="format-detection" />
|
||||
|
||||
|
||||
|
||||
<title>VR 亿企云平台</title>
|
||||
</head>
|
||||
<body onload="draw();">
|
||||
|
||||
|
||||
<div style="position: fixed;">
|
||||
<div id="moAccel"></div>
|
||||
<div id="moCalcTiltLR"></div>
|
||||
<div id="moCalcTiltFB"></div>
|
||||
<div id="imgLogo">-----------------</div>
|
||||
|
||||
<div id="arrow"></div>
|
||||
<div id="acceleration"></div>
|
||||
</div>
|
||||
|
||||
<script type="application/javascript">
|
||||
|
||||
(function () {
|
||||
var arrow = document.getElementById("arrow");
|
||||
try {
|
||||
var text = "";
|
||||
window.addEventListener("deviceorientation", orientationHandler, false);
|
||||
function orientationHandler(event) {
|
||||
text = ""
|
||||
|
||||
text += "左右旋转：rotate alpha{" + Math.round(event.alpha) + "deg)<br>";
|
||||
text += "前后旋转：rotate beta{" + Math.round(event.beta) + "deg)<br>";
|
||||
text += "扭转设备：rotate gamma{" + Math.round(event.gamma) + "deg)<br>";
|
||||
arrow.innerHTML = text;
|
||||
}
|
||||
}
|
||||
catch (e) {
|
||||
arrow.innerHTML = e.message
|
||||
}
|
||||
})()
|
||||
|
||||
</script>
|
||||
<script type="application/javascript">
|
||||
|
||||
var vx = vy = vz = 0; //用以获取xyz轴当前的数据
|
||||
var sx = sy = sz = 0;
|
||||
|
||||
var startTime = new Date().getTime(); // 最初的开始时间，单位：毫秒
|
||||
|
||||
function deviceMotionHandler2(eventData) {
|
||||
// 捕捉重力加速度
|
||||
var acceleration = eventData.accelerationIncludingGravity;
|
||||
// 打印加速数据
|
||||
var rawAcceleration = "[" + Math.round(acceleration.x) + ", " +Math.round(acceleration.y) + ", " + Math.round(acceleration.z) + "]";
|
||||
// Z轴,可知设备朝上或者朝下
|
||||
var facingUp = -1;
|
||||
if (acceleration.z > 0) {
|
||||
facingUp = +1;
|
||||
}
|
||||
// 根据重力通过 acceleration.x|y 转换得到加速值,
|
||||
// 运用重力加速度9.81来计算得到一个百分比然后乘以转换角度90
|
||||
var tiltLR = Math.round(((acceleration.x) / 9.81) * -90);
|
||||
var tiltFB = Math.round(((acceleration.y + 9.81) / 9.81) * 90 * facingUp);
|
||||
// 打印加速度的计算结果
|
||||
document.getElementById("moAccel").innerHTML = rawAcceleration;
|
||||
document.getElementById("moCalcTiltLR").innerHTML = tiltLR;
|
||||
document.getElementById("moCalcTiltFB").innerHTML = tiltFB;
|
||||
// 将2D和3D的转换应用到图片上
|
||||
var rotation = "rotate(" + tiltLR + "deg) (1,0,0, " + (tiltFB) + "deg)";
|
||||
document.getElementById("imgLogo").innerHTML = rotation;
|
||||
}
|
||||
|
||||
if (window.DeviceMotionEvent) {
|
||||
|
||||
window.addEventListener('devicemotion', function deviceMotionHandler(eventData){
|
||||
deviceMotionHandler2(eventData)
|
||||
|
||||
// document.getElementById("acceleration").innerText = "dz = " + eventData.acceleration.x.toFixed(2) + " " + eventData.accelerationIncludingGravity.x.toFixed(2)
|
||||
var currTime = new Date().getTime(); //当前时间
|
||||
|
||||
var diffTime = currTime - startTime;//当前时间减最初时间，得到当前时间差
|
||||
|
||||
|
||||
var acceleration = eventData.acceleration; //获得加速器对象
|
||||
|
||||
var x = acceleration.x
|
||||
var y = acceleration.y
|
||||
var z = acceleration.z
|
||||
vx += x; //获取x轴当前加速度
|
||||
|
||||
vy += y; //获取y轴当前加速度
|
||||
|
||||
vz += z; //获取z轴当前加速度
|
||||
|
||||
sx += diffTime * vx
|
||||
sy += diffTime * vy
|
||||
sz += diffTime * vz
|
||||
|
||||
|
||||
document.getElementById("acceleration").innerText = "\r\n" +
|
||||
"x = " + x.toFixed(2) + "\n" +
|
||||
"y = " + y.toFixed(2) + "\n" +
|
||||
"z = " + z.toFixed(2) + "\n" +
|
||||
"vx = " + vx.toFixed(2) + "\n" +
|
||||
"vy = " + vy.toFixed(2) + "\n" +
|
||||
"vz = " + vz.toFixed(2) + "\n" +
|
||||
"sx = " + sx.toFixed(2) + "\n" +
|
||||
"sy = " + sy.toFixed(2) + "\n" +
|
||||
"sz = " + sz.toFixed(2) + "\n" +
|
||||
"\n";
|
||||
|
||||
}, false);
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<script src="./three.js"></script>
|
||||
<script src="./lib/OrbitControls.js"></script>
|
||||
<script src="./stats.min.js"></script>
|
||||
<script src="./lib/dat.gui.min.js"></script>
|
||||
<script src="./lib/Detector.js"></script>
|
||||
<script src="./lib/tween.min.js"></script>
|
||||
|
||||
|
||||
<script>
|
||||
var renderer, camera, scene, gui, light, stats, controls;
|
||||
//字体的点集
|
||||
var originParticleField,pointsMaterial,geo_ver,geo_ver2,tween,hearts=[];
|
||||
//初始点
|
||||
var baseLens =10000,basePoint=[],baseArea=160;
|
||||
for(var i=0;i<baseLens;i++){
|
||||
var x= Number(Math.random()*baseArea)-baseArea/2;
|
||||
var y= Number(Math.random()*baseArea)-baseArea/2;
|
||||
var z= Number(Math.random()*baseArea)-baseArea/2;
|
||||
var obj = {
|
||||
x:x,
|
||||
y:y,
|
||||
z:z
|
||||
}
|
||||
basePoint.push(obj);
|
||||
}
|
||||
|
||||
|
||||
|
||||
function initRender() {
|
||||
renderer = new THREE.WebGLRenderer({antialias: true});
|
||||
renderer.setPixelRatio(window.devicePixelRatio);
|
||||
renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
renderer.setClearColor(0xeeeeee);
|
||||
renderer.shadowMap.enabled = true;
|
||||
//告诉渲染器需要阴影效果
|
||||
document.body.appendChild(renderer.domElement);
|
||||
}
|
||||
|
||||
function initCamera() {
|
||||
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 200);
|
||||
camera.position.set(0, 20, 80 );
|
||||
}
|
||||
|
||||
function initScene() {
|
||||
scene = new THREE.Scene();
|
||||
scene.background = new THREE.Color( 0xa0a0a0 );
|
||||
scene.fog = new THREE.Fog( 0xa0a0a0, 5, 250 );
|
||||
}
|
||||
|
||||
//初始化dat.GUI简化试验流程
|
||||
function initGui() {
|
||||
// //声明一个保存需求修改的相关数据的对象
|
||||
// gui = {
|
||||
// bump:0.03,
|
||||
// animation:false
|
||||
// };
|
||||
// var datGui = new dat.GUI();
|
||||
// //将设置属性添加到gui当中，gui.add(对象，属性，最小值，最大值)
|
||||
// datGui.add(gui, "bump", -1, 1).onChange(function (e) {
|
||||
// cube1.material.bumpScale = e;
|
||||
// });
|
||||
//
|
||||
// datGui.add(gui, "animation");
|
||||
}
|
||||
|
||||
function initLight() {
|
||||
scene.add(new THREE.AmbientLight(0x444444));
|
||||
|
||||
light = new THREE.DirectionalLight(0xffffff);
|
||||
light.position.set(0, 600, 240 );
|
||||
|
||||
light.castShadow = true;
|
||||
light.shadow.camera.top = 10;
|
||||
light.shadow.camera.bottom = -10;
|
||||
light.shadow.camera.left = -10;
|
||||
light.shadow.camera.right = 10;
|
||||
|
||||
//告诉平行光需要开启阴影投射
|
||||
light.castShadow = true;
|
||||
|
||||
// scene.add(light);
|
||||
}
|
||||
|
||||
function initModel() {
|
||||
|
||||
//辅助工具
|
||||
var helper = new THREE.AxesHelper(50);
|
||||
scene.add(helper);
|
||||
|
||||
// 地板
|
||||
var mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 400, 400 ), new THREE.MeshPhongMaterial( { color: 0xffffff, depthWrite: false } ) );
|
||||
mesh.rotation.x = - Math.PI / 2;
|
||||
mesh.receiveShadow = true;
|
||||
scene.add( mesh );
|
||||
|
||||
//添加地板割线
|
||||
var grid = new THREE.GridHelper( 400, 50, 0x000000, 0x000000 );
|
||||
grid.material.opacity = 0.2;
|
||||
grid.material.transparent = true;
|
||||
scene.add( grid );
|
||||
|
||||
|
||||
{
|
||||
var loader = new THREE.FontLoader();
|
||||
//导入字体，设定字体，这里的话，你们找对自己的字体路径，可能和我的不一样的！！下载的three.js包里面examples/fonts里面有字体
|
||||
loader.load('./yahei.json', function(font) {
|
||||
|
||||
// 文字
|
||||
var text = "Watting...";
|
||||
|
||||
var g = new THREE.TextGeometry(text, {
|
||||
// 设定文字字体，
|
||||
font: font,
|
||||
//尺寸
|
||||
size: 2,
|
||||
//厚度
|
||||
height: 1,
|
||||
});
|
||||
//计算边界，暂时不用管
|
||||
g.computeBoundingBox();
|
||||
|
||||
g = new THREE.EdgesGeometry(g); //或WireframeGeometry(几何)
|
||||
|
||||
var mat = new THREE.LineBasicMaterial({color : 0xffffff, linewidth : 2});
|
||||
|
||||
var wireframe = new THREE.LineSegments( g , mat );
|
||||
|
||||
scene.add(wireframe);
|
||||
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
//获取点集
|
||||
getFontPoints('白狗','geo_ver',-23,0,0);
|
||||
getFontPoints('云平台','geo_ver2',-35,0,0)
|
||||
|
||||
|
||||
|
||||
//用点画字
|
||||
pointsMaterial = new THREE.PointsMaterial({
|
||||
color:0xffffff,
|
||||
size:0.5,
|
||||
transparent:true,//使材质透明
|
||||
blending:THREE.AdditiveBlending,
|
||||
depthTest:false,//深度测试关闭，不消去场景的不可见面
|
||||
map:createLightMateria()//刚刚创建的粒子贴图就在这里用上
|
||||
});
|
||||
|
||||
var originGeo = new THREE.Geometry();
|
||||
for (var i = 0; i <baseLens; i++){//循环创建Geo
|
||||
var x = basePoint[i].x;
|
||||
var y = basePoint[i].y;
|
||||
var z = basePoint[i].z;
|
||||
originGeo.vertices.push(new THREE.Vector3(x,y,z));
|
||||
}
|
||||
originParticleField = new THREE.Points(originGeo,pointsMaterial);
|
||||
// originParticleField.position.set(-20,10,0);
|
||||
scene.add(originParticleField);
|
||||
|
||||
}
|
||||
//获取 文字的点集
|
||||
function getFontPoints(txt,type,x,y,z){
|
||||
if(!x){var x=0;}
|
||||
if(!y){var y=0;}
|
||||
if(!z){var z=0;}
|
||||
var move =true;
|
||||
if(x==0&&y==0&&z==0){move = false;}
|
||||
var res = [];
|
||||
var loader = new THREE.FontLoader();
|
||||
loader.load("./yahei.json",function(font){
|
||||
// var gem2 = new THREE.TextGeometry(txt, {
|
||||
// size: 16, //字号大小，一般为大写字母的高度
|
||||
// height: 0.5, //文字的厚度
|
||||
// weight: 'bold', //值为'normal'或'bold'，表示是否加粗
|
||||
// font: font, //字体，默认是'helvetiker'，需对应引用的字体文件
|
||||
// style: 'normal', //值为'normal'或'italics'，表示是否斜体
|
||||
// bevelThickness: 0.5, //倒角厚度
|
||||
// bevelSize: 0.5, //倒角宽度
|
||||
// curveSegments: 8,//弧线分段数，使得文字的曲线更加光滑
|
||||
// bevelEnabled: true, //布尔值，是否使用倒角，意为在边缘处斜切
|
||||
// });
|
||||
//
|
||||
// //计算边界
|
||||
// gem2.computeBoundingBox();
|
||||
|
||||
// var gem2 = new THREE.TextGeometry(txt, {
|
||||
// // 设定文字字体，
|
||||
// font: font,
|
||||
// //尺寸
|
||||
// size: 2,
|
||||
// //厚度
|
||||
// height: 1,
|
||||
// });
|
||||
|
||||
var shapes = font.generateShapes( txt, 2 );
|
||||
|
||||
var geometry = new THREE.ShapeBufferGeometry( shapes );
|
||||
|
||||
geometry.computeBoundingBox();
|
||||
|
||||
// 取线框图
|
||||
// EdgesGeometry
|
||||
var g = new THREE.WireframeGeometry(geometry);
|
||||
|
||||
// console.log("res = g.position", g.position)
|
||||
res = g.attributes.position.array;
|
||||
console.log("res", res.length)
|
||||
//字体一般不是居中的，需要手动调下
|
||||
if(move){
|
||||
var lens= res.length;
|
||||
var attrs = [];
|
||||
for(var i=0;i<lens;i++){
|
||||
var obj = {
|
||||
x:res[i].x+x,
|
||||
y:res[i].y+y,
|
||||
z:res[i].z+z,
|
||||
}
|
||||
attrs.push(obj);
|
||||
}
|
||||
res = attrs;
|
||||
}
|
||||
|
||||
switch(type){
|
||||
case 'geo_ver':
|
||||
geo_ver = res;
|
||||
break;
|
||||
case 'geo_ver2':
|
||||
geo_ver2 = res;
|
||||
break;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function pointMove(position1){
|
||||
//移除粒子浮动动画
|
||||
// TWEEN.removeAll();
|
||||
var pointNow = originParticleField.geometry.vertices;
|
||||
var lens0 = position1.length;
|
||||
var pos = {val:1};
|
||||
var callback=function(){
|
||||
var val = this.val;
|
||||
var particles = originParticleField.geometry.vertices;
|
||||
// return console.log(particles);
|
||||
for(var i = 0; i < baseLens; i++) {
|
||||
var pos = particles[i];
|
||||
|
||||
if(i<lens0){
|
||||
pos.x = pointNow[i].x * val + position1[i].x * (1-val);
|
||||
pos.y = pointNow[i].y * val + position1[i].y * (1-val);
|
||||
pos.z = pointNow[i].z * val + position1[i].z * (1-val);
|
||||
}else{
|
||||
pos.x = pointNow[i].x * val + basePoint[i].x * (1-val);
|
||||
pos.y = pointNow[i].y * val + basePoint[i].y * (1-val);
|
||||
pos.z = pointNow[i].z * val + basePoint[i].z * (1-val);
|
||||
}
|
||||
}
|
||||
originParticleField.geometry.verticesNeedUpdate = true;
|
||||
}
|
||||
tween = new TWEEN.Tween(pos).to({val: 0}, 2000).easing(TWEEN.Easing.Quadratic.InOut).delay(500).onUpdate(callback);
|
||||
tween.start();
|
||||
}
|
||||
//粒子浮动动画
|
||||
|
||||
//绘制粒子贴图，
|
||||
function createLightMateria() {
|
||||
var canvasDom = document.createElement('canvas');
|
||||
canvasDom.width = 16;
|
||||
canvasDom.height = 16;
|
||||
var ctx = canvasDom.getContext('2d');
|
||||
//根据参数确定两个圆的坐标，绘制放射性渐变的方法，一个圆在里面，一个圆在外面
|
||||
var gradient = ctx.createRadialGradient(
|
||||
canvasDom.width/2,
|
||||
canvasDom.height/2,
|
||||
0,
|
||||
canvasDom.width/2,
|
||||
canvasDom.height/2,
|
||||
canvasDom.width/2);
|
||||
|
||||
gradient.addColorStop(0,'rgba(255,255,255,1)');
|
||||
gradient.addColorStop(0.005,'rgba(139,69,19,1)');
|
||||
gradient.addColorStop(0.4,'rgba(139,69,19,1)');
|
||||
gradient.addColorStop(1,'rgba(0,0,0,1)');
|
||||
|
||||
//设置颜色为渐变
|
||||
ctx.fillStyle = gradient;
|
||||
//绘图
|
||||
ctx.fillRect(0,0,canvasDom.width,canvasDom.height);
|
||||
|
||||
//贴图使用
|
||||
let texture = new THREE.Texture(canvasDom);
|
||||
texture.needsUpdate = true;//使用贴图时进行更新
|
||||
return texture;
|
||||
}
|
||||
|
||||
//初始化性能插件
|
||||
function initStats() {
|
||||
stats = new Stats();
|
||||
document.body.appendChild(stats.domElement);
|
||||
}
|
||||
|
||||
function initControls() {
|
||||
|
||||
controls = new THREE.OrbitControls(camera, renderer.domElement);
|
||||
//设置控制器的中心点
|
||||
controls.target.set( 0, 5, 0 );
|
||||
// 如果使用animate方法时，将此函数删除
|
||||
//controls.addEventListener( 'change', render );
|
||||
// 使动画循环使用时阻尼或自转 意思是否有惯性
|
||||
controls.enableDamping = true;
|
||||
//动态阻尼系数 就是鼠标拖拽旋转灵敏度
|
||||
//controls.dampingFactor = 0.25;
|
||||
//是否可以缩放
|
||||
controls.enableZoom = true;
|
||||
//是否自动旋转
|
||||
controls.autoRotate = false;
|
||||
controls.autoRotateSpeed = 0.5;
|
||||
//设置相机距离原点的最远距离
|
||||
controls.minDistance = 1;
|
||||
//设置相机距离原点的最远距离
|
||||
controls.maxDistance = 2000;
|
||||
//是否开启右键拖拽
|
||||
controls.enablePan = true;
|
||||
}
|
||||
|
||||
function render() {
|
||||
controls.update();
|
||||
}
|
||||
|
||||
//窗口变动触发的函数
|
||||
function onWindowResize() {
|
||||
|
||||
camera.aspect = window.innerWidth / window.innerHeight;
|
||||
camera.updateProjectionMatrix();
|
||||
renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
|
||||
}
|
||||
|
||||
function animate() {
|
||||
//更新控制器
|
||||
render();
|
||||
|
||||
//更新性能插件
|
||||
stats.update();
|
||||
|
||||
TWEEN.update();
|
||||
|
||||
renderer.render(scene, camera);
|
||||
|
||||
requestAnimationFrame(animate);
|
||||
}
|
||||
|
||||
function draw() {
|
||||
//兼容性判断
|
||||
if (!Detector.webgl) Detector.addGetWebGLMessage();
|
||||
|
||||
initGui();
|
||||
initRender();
|
||||
initScene();
|
||||
initCamera();
|
||||
initLight();
|
||||
initModel();
|
||||
initControls();
|
||||
initStats();
|
||||
|
||||
animate();
|
||||
window.onresize = onWindowResize;
|
||||
}
|
||||
|
||||
var t = 0
|
||||
setInterval(function () {
|
||||
|
||||
if ( 0 == t ){
|
||||
pointMove(geo_ver);
|
||||
t = 1
|
||||
} else {
|
||||
t = 0
|
||||
pointMove(geo_ver2);
|
||||
}
|
||||
|
||||
|
||||
}, 3000 )
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,494 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="full-screen" content="yes">
|
||||
<meta name="browsermode" content="application">
|
||||
<meta name="x5-orientation" content="portrait">
|
||||
<meta name="x5-fullscreen" content="true">
|
||||
<meta name="x5-page-mode" content="app">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
|
||||
|
||||
<meta name="apple-mobile-web-app-title" content="应用标题">
|
||||
<meta content="telephone=no" name="format-detection" />
|
||||
<meta content="email=no" name="format-detection" />
|
||||
|
||||
|
||||
|
||||
<title>VR 亿企云平台</title>
|
||||
</head>
|
||||
<body onload="draw();">
|
||||
|
||||
|
||||
<div style="position: fixed;">
|
||||
<div id="moAccel"></div>
|
||||
<div id="moCalcTiltLR"></div>
|
||||
<div id="moCalcTiltFB"></div>
|
||||
<div id="imgLogo">-----------------</div>
|
||||
|
||||
<div id="arrow"></div>
|
||||
<div id="acceleration"></div>
|
||||
</div>
|
||||
|
||||
<script type="application/javascript">
|
||||
|
||||
(function () {
|
||||
var arrow = document.getElementById("arrow");
|
||||
try {
|
||||
var text = "";
|
||||
window.addEventListener("deviceorientation", orientationHandler, false);
|
||||
function orientationHandler(event) {
|
||||
text = ""
|
||||
|
||||
text += "左右旋转：rotate alpha{" + Math.round(event.alpha) + "deg)<br>";
|
||||
text += "前后旋转：rotate beta{" + Math.round(event.beta) + "deg)<br>";
|
||||
text += "扭转设备：rotate gamma{" + Math.round(event.gamma) + "deg)<br>";
|
||||
arrow.innerHTML = text;
|
||||
}
|
||||
}
|
||||
catch (e) {
|
||||
arrow.innerHTML = e.message
|
||||
}
|
||||
})()
|
||||
|
||||
</script>
|
||||
<script type="application/javascript">
|
||||
|
||||
var vx = vy = vz = 0; //用以获取xyz轴当前的数据
|
||||
var sx = sy = sz = 0;
|
||||
|
||||
var startTime = new Date().getTime(); // 最初的开始时间，单位：毫秒
|
||||
|
||||
function deviceMotionHandler2(eventData) {
|
||||
// 捕捉重力加速度
|
||||
var acceleration = eventData.accelerationIncludingGravity;
|
||||
// 打印加速数据
|
||||
var rawAcceleration = "[" + Math.round(acceleration.x) + ", " +Math.round(acceleration.y) + ", " + Math.round(acceleration.z) + "]";
|
||||
// Z轴,可知设备朝上或者朝下
|
||||
var facingUp = -1;
|
||||
if (acceleration.z > 0) {
|
||||
facingUp = +1;
|
||||
}
|
||||
// 根据重力通过 acceleration.x|y 转换得到加速值,
|
||||
// 运用重力加速度9.81来计算得到一个百分比然后乘以转换角度90
|
||||
var tiltLR = Math.round(((acceleration.x) / 9.81) * -90);
|
||||
var tiltFB = Math.round(((acceleration.y + 9.81) / 9.81) * 90 * facingUp);
|
||||
// 打印加速度的计算结果
|
||||
document.getElementById("moAccel").innerHTML = rawAcceleration;
|
||||
document.getElementById("moCalcTiltLR").innerHTML = tiltLR;
|
||||
document.getElementById("moCalcTiltFB").innerHTML = tiltFB;
|
||||
// 将2D和3D的转换应用到图片上
|
||||
var rotation = "rotate(" + tiltLR + "deg) (1,0,0, " + (tiltFB) + "deg)";
|
||||
document.getElementById("imgLogo").innerHTML = rotation;
|
||||
}
|
||||
|
||||
if (window.DeviceMotionEvent) {
|
||||
|
||||
window.addEventListener('devicemotion', function deviceMotionHandler(eventData){
|
||||
deviceMotionHandler2(eventData)
|
||||
|
||||
// document.getElementById("acceleration").innerText = "dz = " + eventData.acceleration.x.toFixed(2) + " " + eventData.accelerationIncludingGravity.x.toFixed(2)
|
||||
var currTime = new Date().getTime(); //当前时间
|
||||
|
||||
var diffTime = currTime - startTime;//当前时间减最初时间，得到当前时间差
|
||||
|
||||
|
||||
var acceleration = eventData.acceleration; //获得加速器对象
|
||||
|
||||
var x = acceleration.x
|
||||
var y = acceleration.y
|
||||
var z = acceleration.z
|
||||
vx += x; //获取x轴当前加速度
|
||||
|
||||
vy += y; //获取y轴当前加速度
|
||||
|
||||
vz += z; //获取z轴当前加速度
|
||||
|
||||
sx += diffTime * vx
|
||||
sy += diffTime * vy
|
||||
sz += diffTime * vz
|
||||
|
||||
|
||||
document.getElementById("acceleration").innerText = "\r\n" +
|
||||
"x = " + x.toFixed(2) + "\n" +
|
||||
"y = " + y.toFixed(2) + "\n" +
|
||||
"z = " + z.toFixed(2) + "\n" +
|
||||
"vx = " + vx.toFixed(2) + "\n" +
|
||||
"vy = " + vy.toFixed(2) + "\n" +
|
||||
"vz = " + vz.toFixed(2) + "\n" +
|
||||
"sx = " + sx.toFixed(2) + "\n" +
|
||||
"sy = " + sy.toFixed(2) + "\n" +
|
||||
"sz = " + sz.toFixed(2) + "\n" +
|
||||
"\n";
|
||||
|
||||
}, false);
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<script src="./three.js"></script>
|
||||
<script src="./lib/OrbitControls.js"></script>
|
||||
<script src="./stats.min.js"></script>
|
||||
<script src="./lib/dat.gui.min.js"></script>
|
||||
<script src="./lib/Detector.js"></script>
|
||||
<script src="./lib/tween.min.js"></script>
|
||||
|
||||
|
||||
<script>
|
||||
var renderer, camera, scene, gui, light, stats, controls;
|
||||
//字体的点集
|
||||
var originParticleField,pointsMaterial,geo_ver,geo_ver2,tween,hearts=[];
|
||||
//初始点
|
||||
var baseLens =10000,basePoint=[],baseArea=160;
|
||||
for(var i=0;i<baseLens;i++){
|
||||
var x= Number(Math.random()*baseArea)-baseArea/2;
|
||||
var y= Number(Math.random()*baseArea)-baseArea/2;
|
||||
var z= Number(Math.random()*baseArea)-baseArea/2;
|
||||
var obj = {
|
||||
x:x,
|
||||
y:y,
|
||||
z:z
|
||||
}
|
||||
basePoint.push(obj);
|
||||
}
|
||||
|
||||
|
||||
|
||||
function initRender() {
|
||||
renderer = new THREE.WebGLRenderer({antialias: true});
|
||||
renderer.setPixelRatio(window.devicePixelRatio);
|
||||
renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
renderer.setClearColor(0xeeeeee);
|
||||
renderer.shadowMap.enabled = true;
|
||||
//告诉渲染器需要阴影效果
|
||||
document.body.appendChild(renderer.domElement);
|
||||
}
|
||||
|
||||
function initCamera() {
|
||||
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 200);
|
||||
camera.position.set(0, 20, 80 );
|
||||
}
|
||||
|
||||
function initScene() {
|
||||
scene = new THREE.Scene();
|
||||
scene.background = new THREE.Color( 0xa0a0a0 );
|
||||
scene.fog = new THREE.Fog( 0xa0a0a0, 5, 250 );
|
||||
}
|
||||
|
||||
//初始化dat.GUI简化试验流程
|
||||
function initGui() {
|
||||
// //声明一个保存需求修改的相关数据的对象
|
||||
// gui = {
|
||||
// bump:0.03,
|
||||
// animation:false
|
||||
// };
|
||||
// var datGui = new dat.GUI();
|
||||
// //将设置属性添加到gui当中，gui.add(对象，属性，最小值，最大值)
|
||||
// datGui.add(gui, "bump", -1, 1).onChange(function (e) {
|
||||
// cube1.material.bumpScale = e;
|
||||
// });
|
||||
//
|
||||
// datGui.add(gui, "animation");
|
||||
}
|
||||
|
||||
function initLight() {
|
||||
scene.add(new THREE.AmbientLight(0x444444));
|
||||
|
||||
light = new THREE.DirectionalLight(0xffffff);
|
||||
light.position.set(0, 600, 240 );
|
||||
|
||||
light.castShadow = true;
|
||||
light.shadow.camera.top = 10;
|
||||
light.shadow.camera.bottom = -10;
|
||||
light.shadow.camera.left = -10;
|
||||
light.shadow.camera.right = 10;
|
||||
|
||||
//告诉平行光需要开启阴影投射
|
||||
light.castShadow = true;
|
||||
|
||||
// scene.add(light);
|
||||
}
|
||||
|
||||
function initModel() {
|
||||
|
||||
//辅助工具
|
||||
var helper = new THREE.AxesHelper(50);
|
||||
scene.add(helper);
|
||||
|
||||
// 地板
|
||||
var mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 400, 400 ), new THREE.MeshPhongMaterial( { color: 0xffffff, depthWrite: false } ) );
|
||||
mesh.rotation.x = - Math.PI / 2;
|
||||
mesh.receiveShadow = true;
|
||||
scene.add( mesh );
|
||||
|
||||
//添加地板割线
|
||||
var grid = new THREE.GridHelper( 400, 50, 0x000000, 0x000000 );
|
||||
grid.material.opacity = 0.2;
|
||||
grid.material.transparent = true;
|
||||
scene.add( grid );
|
||||
|
||||
|
||||
{
|
||||
var loader = new THREE.FontLoader();
|
||||
//导入字体，设定字体，这里的话，你们找对自己的字体路径，可能和我的不一样的！！下载的three.js包里面examples/fonts里面有字体
|
||||
loader.load('./yahei.json', function(font) {
|
||||
|
||||
// 文字
|
||||
var text = "银企云平台";
|
||||
|
||||
var g = new THREE.TextGeometry(text, {
|
||||
// 设定文字字体，
|
||||
font: font,
|
||||
//尺寸
|
||||
size: 15,
|
||||
//厚度
|
||||
height: 5,
|
||||
});
|
||||
//计算边界，暂时不用管
|
||||
g.computeBoundingBox();
|
||||
|
||||
g = new THREE.EdgesGeometry(g); //或 WireframeGeometry(几何)
|
||||
|
||||
var mat = new THREE.LineBasicMaterial({color : 0xffffff, linewidth : 5});
|
||||
|
||||
var wireframe = new THREE.LineSegments( g , mat );
|
||||
|
||||
wireframe.position.set( -50, 0, 0);
|
||||
|
||||
scene.add(wireframe);
|
||||
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
//获取 文字的点集
|
||||
function getFontPoints(txt,type,x,y,z){
|
||||
if(!x){var x=0;}
|
||||
if(!y){var y=0;}
|
||||
if(!z){var z=0;}
|
||||
var move =true;
|
||||
if(x==0&&y==0&&z==0){move = false;}
|
||||
var res = [];
|
||||
var loader = new THREE.FontLoader();
|
||||
loader.load("./yahei.json",function(font){
|
||||
// var gem2 = new THREE.TextGeometry(txt, {
|
||||
// size: 16, //字号大小，一般为大写字母的高度
|
||||
// height: 0.5, //文字的厚度
|
||||
// weight: 'bold', //值为'normal'或'bold'，表示是否加粗
|
||||
// font: font, //字体，默认是'helvetiker'，需对应引用的字体文件
|
||||
// style: 'normal', //值为'normal'或'italics'，表示是否斜体
|
||||
// bevelThickness: 0.5, //倒角厚度
|
||||
// bevelSize: 0.5, //倒角宽度
|
||||
// curveSegments: 8,//弧线分段数，使得文字的曲线更加光滑
|
||||
// bevelEnabled: true, //布尔值，是否使用倒角，意为在边缘处斜切
|
||||
// });
|
||||
//
|
||||
// //计算边界
|
||||
// gem2.computeBoundingBox();
|
||||
|
||||
// var gem2 = new THREE.TextGeometry(txt, {
|
||||
// // 设定文字字体，
|
||||
// font: font,
|
||||
// //尺寸
|
||||
// size: 2,
|
||||
// //厚度
|
||||
// height: 1,
|
||||
// });
|
||||
|
||||
var shapes = font.generateShapes( txt, 2 );
|
||||
|
||||
var geometry = new THREE.ShapeBufferGeometry( shapes );
|
||||
|
||||
geometry.computeBoundingBox();
|
||||
|
||||
// 取线框图
|
||||
// EdgesGeometry
|
||||
var g = new THREE.WireframeGeometry(geometry);
|
||||
|
||||
// console.log("res = g.position", g.position)
|
||||
res = g.attributes.position.array;
|
||||
console.log("res", res.length)
|
||||
//字体一般不是居中的，需要手动调下
|
||||
if(move){
|
||||
var lens= res.length;
|
||||
var attrs = [];
|
||||
for(var i=0;i<lens;i++){
|
||||
var obj = {
|
||||
x:res[i].x+x,
|
||||
y:res[i].y+y,
|
||||
z:res[i].z+z,
|
||||
}
|
||||
attrs.push(obj);
|
||||
}
|
||||
res = attrs;
|
||||
}
|
||||
|
||||
switch(type){
|
||||
case 'geo_ver':
|
||||
geo_ver = res;
|
||||
break;
|
||||
case 'geo_ver2':
|
||||
geo_ver2 = res;
|
||||
break;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function pointMove(position1){
|
||||
//移除粒子浮动动画
|
||||
// TWEEN.removeAll();
|
||||
var pointNow = originParticleField.geometry.vertices;
|
||||
var lens0 = position1.length;
|
||||
var pos = {val:1};
|
||||
var callback=function(){
|
||||
var val = this.val;
|
||||
var particles = originParticleField.geometry.vertices;
|
||||
// return console.log(particles);
|
||||
for(var i = 0; i < baseLens; i++) {
|
||||
var pos = particles[i];
|
||||
|
||||
if(i<lens0){
|
||||
pos.x = pointNow[i].x * val + position1[i].x * (1-val);
|
||||
pos.y = pointNow[i].y * val + position1[i].y * (1-val);
|
||||
pos.z = pointNow[i].z * val + position1[i].z * (1-val);
|
||||
}else{
|
||||
pos.x = pointNow[i].x * val + basePoint[i].x * (1-val);
|
||||
pos.y = pointNow[i].y * val + basePoint[i].y * (1-val);
|
||||
pos.z = pointNow[i].z * val + basePoint[i].z * (1-val);
|
||||
}
|
||||
}
|
||||
originParticleField.geometry.verticesNeedUpdate = true;
|
||||
}
|
||||
tween = new TWEEN.Tween(pos).to({val: 0}, 2000).easing(TWEEN.Easing.Quadratic.InOut).delay(500).onUpdate(callback);
|
||||
tween.start();
|
||||
}
|
||||
//粒子浮动动画
|
||||
|
||||
//绘制粒子贴图，
|
||||
function createLightMateria() {
|
||||
var canvasDom = document.createElement('canvas');
|
||||
canvasDom.width = 16;
|
||||
canvasDom.height = 16;
|
||||
var ctx = canvasDom.getContext('2d');
|
||||
//根据参数确定两个圆的坐标，绘制放射性渐变的方法，一个圆在里面，一个圆在外面
|
||||
var gradient = ctx.createRadialGradient(
|
||||
canvasDom.width/2,
|
||||
canvasDom.height/2,
|
||||
0,
|
||||
canvasDom.width/2,
|
||||
canvasDom.height/2,
|
||||
canvasDom.width/2);
|
||||
|
||||
gradient.addColorStop(0,'rgba(255,255,255,1)');
|
||||
gradient.addColorStop(0.005,'rgba(139,69,19,1)');
|
||||
gradient.addColorStop(0.4,'rgba(139,69,19,1)');
|
||||
gradient.addColorStop(1,'rgba(0,0,0,1)');
|
||||
|
||||
//设置颜色为渐变
|
||||
ctx.fillStyle = gradient;
|
||||
//绘图
|
||||
ctx.fillRect(0,0,canvasDom.width,canvasDom.height);
|
||||
|
||||
//贴图使用
|
||||
let texture = new THREE.Texture(canvasDom);
|
||||
texture.needsUpdate = true;//使用贴图时进行更新
|
||||
return texture;
|
||||
}
|
||||
|
||||
//初始化性能插件
|
||||
function initStats() {
|
||||
stats = new Stats();
|
||||
document.body.appendChild(stats.domElement);
|
||||
}
|
||||
|
||||
function initControls() {
|
||||
|
||||
controls = new THREE.OrbitControls(camera, renderer.domElement);
|
||||
//设置控制器的中心点
|
||||
controls.target.set( 0, 5, 0 );
|
||||
// 如果使用animate方法时，将此函数删除
|
||||
//controls.addEventListener( 'change', render );
|
||||
// 使动画循环使用时阻尼或自转 意思是否有惯性
|
||||
controls.enableDamping = true;
|
||||
//动态阻尼系数 就是鼠标拖拽旋转灵敏度
|
||||
//controls.dampingFactor = 0.25;
|
||||
//是否可以缩放
|
||||
controls.enableZoom = true;
|
||||
//是否自动旋转
|
||||
controls.autoRotate = false;
|
||||
controls.autoRotateSpeed = 0.5;
|
||||
//设置相机距离原点的最远距离
|
||||
controls.minDistance = 1;
|
||||
//设置相机距离原点的最远距离
|
||||
controls.maxDistance = 2000;
|
||||
//是否开启右键拖拽
|
||||
controls.enablePan = true;
|
||||
}
|
||||
|
||||
function render() {
|
||||
controls.update();
|
||||
}
|
||||
|
||||
//窗口变动触发的函数
|
||||
function onWindowResize() {
|
||||
|
||||
camera.aspect = window.innerWidth / window.innerHeight;
|
||||
camera.updateProjectionMatrix();
|
||||
renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
|
||||
}
|
||||
|
||||
function animate() {
|
||||
//更新控制器
|
||||
render();
|
||||
|
||||
//更新性能插件
|
||||
stats.update();
|
||||
|
||||
TWEEN.update();
|
||||
|
||||
renderer.render(scene, camera);
|
||||
|
||||
requestAnimationFrame(animate);
|
||||
}
|
||||
|
||||
function draw() {
|
||||
//兼容性判断
|
||||
if (!Detector.webgl) Detector.addGetWebGLMessage();
|
||||
|
||||
initGui();
|
||||
initRender();
|
||||
initScene();
|
||||
initCamera();
|
||||
initLight();
|
||||
initModel();
|
||||
initControls();
|
||||
initStats();
|
||||
|
||||
animate();
|
||||
window.onresize = onWindowResize;
|
||||
}
|
||||
|
||||
// var t = 0
|
||||
// setInterval(function () {
|
||||
//
|
||||
// if ( 0 == t ){
|
||||
// pointMove(geo_ver);
|
||||
// t = 1
|
||||
// } else {
|
||||
// t = 0
|
||||
// pointMove(geo_ver2);
|
||||
// }
|
||||
//
|
||||
//
|
||||
// }, 3000 )
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
@@ -1,263 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Logo - 全栈工程师俱乐部</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div style="border: 10px dotted #EEE; width:600px">
|
||||
<h1>方案 1 </h1>
|
||||
<canvas id="zdog1" width="500" height="500"></canvas>
|
||||
</div>
|
||||
|
||||
|
||||
<div style="border: 10px dotted #EEE; width:600px; background: #00b7ee">
|
||||
<h1>方案 2 </h1>
|
||||
<canvas id="zdog2" width="500" height="500"></canvas>
|
||||
</div>
|
||||
|
||||
|
||||
<div style="border: 10px dotted #EEE; width:600px">
|
||||
<h1>方案 3 </h1>
|
||||
<canvas id="zdog3" width="500" height="500"></canvas>
|
||||
</div>
|
||||
|
||||
<canvas id="zdog" width="500" height="500"></canvas>
|
||||
|
||||
|
||||
|
||||
<!--引入zdog文件-->
|
||||
<script src="https://unpkg.com/zdog@1/dist/zdog.dist.min.js"></script>
|
||||
<script type="application/javascript">
|
||||
|
||||
|
||||
class Yun extends Zdog.Shape {
|
||||
constructor( options ){
|
||||
|
||||
options.path = [
|
||||
{ x: -0.6 , y : -0.5 }, // start at 1st point
|
||||
{ x: 0.6 , y : -0.5 }, // line to 2nd point
|
||||
{ move: {x: -0.8 , y: 0} },
|
||||
{ x: 0.8 , y: 0},
|
||||
{ move: {x: 0, y: 0} },
|
||||
{ x: -0.5, y: 0.7 },
|
||||
{ x: 0.4, y: 0.6 },
|
||||
{ move: {x: 0.4, y: 0.5} },
|
||||
{ x: 0.6, y: 0.7 },
|
||||
],
|
||||
super(options);
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
Zdog.Yun = Yun
|
||||
</script>
|
||||
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
|
||||
var sceneSize = 500;
|
||||
var TAU = Zdog.TAU;
|
||||
var ROOT2 = Math.sqrt(2);
|
||||
var ROOT3 = Math.sqrt(3);
|
||||
var ROOT5 = Math.sqrt(5);
|
||||
var PHI = ( 1 + ROOT5 ) / 2;
|
||||
|
||||
// colors
|
||||
var color = '#FA5';
|
||||
|
||||
var newcanvas = new Zdog.Illustration({
|
||||
// 用id选择器设置画布
|
||||
element: '#zdog1',
|
||||
dragRotate: true,
|
||||
});
|
||||
|
||||
// var yun = new Zdog.Yun({
|
||||
// addTo: newcanvas,
|
||||
// stroke: 20,
|
||||
// color: '#636',
|
||||
// });
|
||||
|
||||
new Zdog.Yun({
|
||||
addTo: newcanvas,
|
||||
closed: false,
|
||||
stroke: 20,
|
||||
scale : 50,
|
||||
color: '#636',
|
||||
});
|
||||
|
||||
|
||||
function animate() {
|
||||
|
||||
// 通过逐步增加xxx.rotate.y来改变场景的旋转。值越大越快。
|
||||
newcanvas.rotate.y += 0.01;
|
||||
// newcanvas.rotate.x += 0.02;
|
||||
newcanvas.updateRenderGraph();
|
||||
// 动画下一帧继续执行函数
|
||||
requestAnimationFrame( animate );
|
||||
}
|
||||
// 开始动画，执行函数
|
||||
animate();
|
||||
})()
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<script>
|
||||
// 方案二
|
||||
|
||||
( function() {
|
||||
var beigeDark = '#F96';
|
||||
var beigeLight = '#FC9';
|
||||
var skinDark = '#F66';
|
||||
var skinMedium = '#F88';
|
||||
var skinLight = '#FAA';
|
||||
var navy = '#036';
|
||||
var midnight = '#003';
|
||||
var auburn = '#903';
|
||||
var red = '#C33';
|
||||
var sky = '#09D';
|
||||
var offWhite = '#FFD';
|
||||
var white = 'white';
|
||||
var blueDark = '#66C';
|
||||
var bluePale = '#CCF';
|
||||
var TAU = Zdog.TAU;
|
||||
var sceneStartRotation = { y: -TAU/8 };
|
||||
var newcanvas = new Zdog.Illustration({
|
||||
// 用id选择器设置画布
|
||||
element: '#zdog2',
|
||||
dragRotate: true,
|
||||
});
|
||||
|
||||
// big puff
|
||||
var cloud = new Zdog.Shape({
|
||||
addTo: newcanvas,
|
||||
translate: { x: 34, y: -26, z: -20 },
|
||||
rotate: { y: -sceneStartRotation.y },
|
||||
stroke: 16,
|
||||
color: white,
|
||||
// scale : 5,
|
||||
});
|
||||
|
||||
// left small puff
|
||||
var smallPuff = new Zdog.Shape({
|
||||
addTo: cloud,
|
||||
translate: { x: -9, y: 4, z: 4 },
|
||||
stroke: 8,
|
||||
color: white,
|
||||
});
|
||||
smallPuff.copy({
|
||||
translate: { x: 9, y: 5, z: 6 },
|
||||
stroke: 10,
|
||||
});
|
||||
|
||||
var disk = new Zdog.RoundedRect({
|
||||
addTo: cloud,
|
||||
width: 26,
|
||||
height: 12,
|
||||
cornerRadius: 6,
|
||||
translate: { x: -6, y: 7, z: 4 },
|
||||
rotate: { x: TAU/4 },
|
||||
stroke: 3,
|
||||
color: white,
|
||||
fill: true,
|
||||
});
|
||||
disk.copy({
|
||||
translate: { x: 6, y: 9, z: 8 },
|
||||
});
|
||||
|
||||
// sun
|
||||
new Zdog.Shape({
|
||||
addTo: cloud,
|
||||
translate: { x: -13, y: 0, z: -14 },
|
||||
stroke: 8,
|
||||
color: beigeLight,
|
||||
});
|
||||
|
||||
|
||||
function animate() {
|
||||
|
||||
// 通过逐步增加xxx.rotate.y来改变场景的旋转。值越大越快。
|
||||
newcanvas.rotate.y += 0.01;
|
||||
// newcanvas.rotate.x += 0.02;
|
||||
newcanvas.updateRenderGraph();
|
||||
// 动画下一帧继续执行函数
|
||||
requestAnimationFrame( animate );
|
||||
}
|
||||
// 开始动画，执行函数
|
||||
animate();
|
||||
|
||||
})();
|
||||
|
||||
</script>
|
||||
|
||||
<script>
|
||||
|
||||
(function () {
|
||||
|
||||
// Made with Zdog
|
||||
|
||||
const TAU = Zdog.TAU;
|
||||
let isSpinning = true;
|
||||
|
||||
let illo = new Zdog.Illustration({
|
||||
element: '#zdog3',
|
||||
rotate: { x: -TAU/16},
|
||||
dragRotate: true,
|
||||
onDragStart: function() {
|
||||
isSpinning = false;
|
||||
},
|
||||
});
|
||||
|
||||
var rotor = new Zdog.Anchor({
|
||||
addTo: illo,
|
||||
});
|
||||
|
||||
new Zdog.Rect({
|
||||
addTo: rotor,
|
||||
width: 80,
|
||||
height: 60,
|
||||
translate: { z: 50 },
|
||||
stroke: 8,
|
||||
fill: true,
|
||||
color: '#EA0',
|
||||
// backface color
|
||||
backface: '#636',
|
||||
});
|
||||
|
||||
new Zdog.Yun({
|
||||
addTo: rotor,
|
||||
closed: false,
|
||||
stroke: 8,
|
||||
scale : 25,
|
||||
translate: { z: 60 },
|
||||
color: '#636',
|
||||
});
|
||||
|
||||
rotor.copyGraph({
|
||||
rotate: { y: TAU * 1/4 },
|
||||
});
|
||||
rotor.copyGraph({
|
||||
rotate: { y: TAU * 2/4 },
|
||||
});
|
||||
rotor.copyGraph({
|
||||
rotate: { y: TAU * 3/4 },
|
||||
});
|
||||
|
||||
function animate() {
|
||||
illo.rotate.y += isSpinning ? 0.03 : 0;
|
||||
illo.updateRenderGraph();
|
||||
requestAnimationFrame( animate );
|
||||
}
|
||||
|
||||
animate();
|
||||
|
||||
})()
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user