[29547] | 1 | <!DOCTYPE html>
|
---|
| 2 | <!-- saved from url=(0032)http://webgl.onikenkon.com/flag/ -->
|
---|
| 3 | <html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
---|
| 4 |
|
---|
| 5 | <title>three.js webgl - 3D Flag</title>
|
---|
| 6 | <meta charset="utf-8">
|
---|
| 7 | <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
|
---|
| 8 | <style>
|
---|
| 9 | body {
|
---|
| 10 | font-family: Monospace;
|
---|
| 11 | background-color: #000;
|
---|
| 12 | color: #000;
|
---|
| 13 | margin: 0px;
|
---|
| 14 | overflow: hidden;
|
---|
| 15 | }
|
---|
| 16 |
|
---|
| 17 | #info {
|
---|
| 18 | text-align: center;
|
---|
| 19 | padding: 10px;
|
---|
| 20 | z-index: 10;
|
---|
| 21 | width: 100%;
|
---|
| 22 | position: absolute;
|
---|
| 23 | top: 80%;
|
---|
| 24 | }
|
---|
| 25 |
|
---|
| 26 | a {
|
---|
| 27 | text-decoration: underline;
|
---|
| 28 | cursor: pointer;
|
---|
| 29 | }
|
---|
| 30 | </style>
|
---|
| 31 | <style type="text/css"></style></head>
|
---|
| 32 |
|
---|
| 33 | <body>
|
---|
| 34 | <div id="info">
|
---|
| 35 | Toggle: <a onclick="rotate = !rotate;">Camera</a> |
|
---|
| 36 | <a onclick="wind = !wind;">Wind</a>
|
---|
| 37 | </div>
|
---|
| 38 |
|
---|
| 39 | <script src="./Flag_files/three.js"></script>
|
---|
| 40 | <script src="./Flag_files/Detector.js"></script>
|
---|
| 41 | <script src="./Flag_files/Stats.js"></script>
|
---|
| 42 | <script src="./Flag_files/Flag.js"></script>
|
---|
| 43 | <script src="./Flag_files/KeyboardState.js"></script>
|
---|
| 44 |
|
---|
| 45 | <script type="x-shader/x-fragment" id="fragmentShaderDepth">
|
---|
| 46 |
|
---|
| 47 | uniform sampler2D texture;
|
---|
| 48 | varying vec2 vUV;
|
---|
| 49 |
|
---|
| 50 | vec4 pack_depth( const in float depth ) {
|
---|
| 51 |
|
---|
| 52 | const vec4 bit_shift = vec4( 256.0 * 256.0 * 256.0, 256.0 * 256.0, 256.0, 1.0 );
|
---|
| 53 | const vec4 bit_mask = vec4( 0.0, 1.0 / 256.0, 1.0 / 256.0, 1.0 / 256.0 );
|
---|
| 54 | vec4 res = fract( depth * bit_shift );
|
---|
| 55 | res -= res.xxyz * bit_mask;
|
---|
| 56 | return res;
|
---|
| 57 |
|
---|
| 58 | }
|
---|
| 59 |
|
---|
| 60 | void main() {
|
---|
| 61 |
|
---|
| 62 | vec4 pixel = texture2D( texture, vUV );
|
---|
| 63 |
|
---|
| 64 | if ( pixel.a < 0.5 ) discard;
|
---|
| 65 |
|
---|
| 66 | gl_FragData[ 0 ] = pack_depth( gl_FragCoord.z );
|
---|
| 67 |
|
---|
| 68 | }
|
---|
| 69 | </script>
|
---|
| 70 |
|
---|
| 71 | <script type="x-shader/x-vertex" id="vertexShaderDepth">
|
---|
| 72 |
|
---|
| 73 | varying vec2 vUV;
|
---|
| 74 |
|
---|
| 75 | void main() {
|
---|
| 76 |
|
---|
| 77 | vUV = 0.75 * uv;
|
---|
| 78 |
|
---|
| 79 | vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
|
---|
| 80 |
|
---|
| 81 | gl_Position = projectionMatrix * mvPosition;
|
---|
| 82 |
|
---|
| 83 | }
|
---|
| 84 |
|
---|
| 85 | </script>
|
---|
| 86 |
|
---|
| 87 | <script>
|
---|
| 88 | var keyboard = new KeyboardState();
|
---|
| 89 | var clothTextures = [];
|
---|
| 90 |
|
---|
| 91 | /* testing cloth simulation */
|
---|
| 92 |
|
---|
| 93 | var flagRelease;
|
---|
| 94 | var initial = true;
|
---|
| 95 |
|
---|
| 96 | var pins = [];
|
---|
| 97 | for (var j=0;j<=cloth.h;j++)
|
---|
| 98 | pins.push(cloth.index(0, j));
|
---|
| 99 |
|
---|
| 100 | /* Weather variables */
|
---|
| 101 |
|
---|
| 102 | var particle;
|
---|
| 103 | var particleSystem;
|
---|
| 104 | var particleCount;
|
---|
| 105 |
|
---|
| 106 | /* ------------------ */
|
---|
| 107 |
|
---|
| 108 | if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
|
---|
| 109 |
|
---|
| 110 | var container, stats;
|
---|
| 111 | var camera, scene, renderer;
|
---|
| 112 |
|
---|
| 113 | var clothGeometry;
|
---|
| 114 | var sphere;
|
---|
| 115 | var object, tmpFlag, arrow;
|
---|
| 116 |
|
---|
| 117 | var rotate = false;
|
---|
| 118 |
|
---|
| 119 | // array for holding existing flags
|
---|
| 120 |
|
---|
| 121 | var flags = ["./images/flag.png", "./images/random.png", "./images/canada.png"];
|
---|
| 122 | var flagSelector = 0;
|
---|
| 123 | var materials;
|
---|
| 124 | var vertexShader;
|
---|
| 125 | var fragmentShader;
|
---|
| 126 | var uniforms;
|
---|
| 127 |
|
---|
| 128 | init();
|
---|
| 129 | animate();
|
---|
| 130 |
|
---|
| 131 | function init() {
|
---|
| 132 |
|
---|
| 133 | container = document.createElement( 'div' );
|
---|
| 134 | document.body.appendChild( container );
|
---|
| 135 |
|
---|
| 136 |
|
---|
| 137 |
|
---|
| 138 | // scene
|
---|
| 139 |
|
---|
| 140 | scene = new THREE.Scene();
|
---|
| 141 |
|
---|
| 142 | //scene.fog = new THREE.Fog( 0x0, 500, 10000 );
|
---|
| 143 | //scene.fog.color.setHSL( 0.6, 0.2, 1 );
|
---|
| 144 |
|
---|
| 145 | // camera
|
---|
| 146 |
|
---|
| 147 | camera = new THREE.PerspectiveCamera( 20, window.innerWidth / window.innerHeight, 1, 10000 );
|
---|
| 148 | camera.position.y = 50;
|
---|
| 149 | camera.position.z = 1500;
|
---|
| 150 | scene.add( camera );
|
---|
| 151 |
|
---|
| 152 | // lights
|
---|
| 153 |
|
---|
| 154 | var light;
|
---|
| 155 |
|
---|
| 156 | scene.add( new THREE.AmbientLight( 0x666666 ) );
|
---|
| 157 |
|
---|
| 158 | light = new THREE.DirectionalLight( 0xffffff, 1.75 );
|
---|
| 159 | light.color.setHSL( 0.6, 0.125, 1 );
|
---|
| 160 | light.position.set( 50, 200, 100 );
|
---|
| 161 | light.position.multiplyScalar( 1.3 );
|
---|
| 162 |
|
---|
| 163 | light.castShadow = true;
|
---|
| 164 | //light.shadowCameraVisible = true;
|
---|
| 165 |
|
---|
| 166 | light.shadowMapWidth = 2048;
|
---|
| 167 | light.shadowMapHeight = 2048;
|
---|
| 168 |
|
---|
| 169 | var d = 100;
|
---|
| 170 |
|
---|
| 171 | light.shadowCameraLeft = -d;
|
---|
| 172 | light.shadowCameraRight = d;
|
---|
| 173 | light.shadowCameraTop = d;
|
---|
| 174 | light.shadowCameraBottom = -d;
|
---|
| 175 |
|
---|
| 176 | light.shadowCameraFar = 1000;
|
---|
| 177 | light.shadowDarkness = 0.5;
|
---|
| 178 |
|
---|
| 179 | scene.add( light );
|
---|
| 180 |
|
---|
| 181 | var light2 = new THREE.AmbientLight( 0x404040 ); // soft white light
|
---|
| 182 | scene.add( light2 );
|
---|
| 183 |
|
---|
| 184 | light = new THREE.DirectionalLight( 0xffffff, 0.35 );
|
---|
| 185 | light.color.setHSL( 0.3, 0.95, 1 );
|
---|
| 186 | light.position.set( 0, -1, 0 );
|
---|
| 187 |
|
---|
| 188 | scene.add( light );
|
---|
| 189 |
|
---|
| 190 | // load flag textures
|
---|
| 191 | var i;
|
---|
| 192 |
|
---|
| 193 | for(i = 0; i < flags.length; i++){
|
---|
| 194 | clothTextures[i] = THREE.ImageUtils.loadTexture( flags[i] );
|
---|
| 195 | clothTextures[i].wrapS = clothTextures[i].wrapT = THREE.RepeatWrapping;
|
---|
| 196 | clothTextures[i].anisotropy = 16;
|
---|
| 197 | }
|
---|
| 198 | createFlag();
|
---|
| 199 |
|
---|
| 200 |
|
---|
| 201 | // sphere
|
---|
| 202 |
|
---|
| 203 | var ballGeo = new THREE.SphereGeometry( ballSize, 20, 20 );
|
---|
| 204 | var ballMaterial = new THREE.MeshPhongMaterial( { color: 0xffffff } );
|
---|
| 205 |
|
---|
| 206 | sphere = new THREE.Mesh( ballGeo, ballMaterial );
|
---|
| 207 | sphere.castShadow = true;
|
---|
| 208 | sphere.receiveShadow = true;
|
---|
| 209 | scene.add( sphere );
|
---|
| 210 |
|
---|
| 211 | // arrow
|
---|
| 212 |
|
---|
| 213 | arrow = new THREE.ArrowHelper( new THREE.Vector3( 0, 1, 0 ), new THREE.Vector3( 0, 0, 0 ), 50, 0xff0000 );
|
---|
| 214 | arrow.position.set( -200, -50, -200 );
|
---|
| 215 | scene.add( arrow );
|
---|
| 216 |
|
---|
| 217 |
|
---|
| 218 | // create the particle variables
|
---|
| 219 | particleCount = 1000,
|
---|
| 220 | particles = new THREE.Geometry(),
|
---|
| 221 | pMaterial = new THREE.ParticleBasicMaterial({
|
---|
| 222 | color: 0xFFFFFF,
|
---|
| 223 | size: 20,
|
---|
| 224 | map: THREE.ImageUtils.loadTexture(
|
---|
| 225 | "./images/raindrop.png"
|
---|
| 226 | ),
|
---|
| 227 | blending: THREE.AdditiveBlending,
|
---|
| 228 | transparent: true
|
---|
| 229 | });
|
---|
| 230 |
|
---|
| 231 | // now create the individual particles
|
---|
| 232 | for(var p = 0; p < particleCount; p++) {
|
---|
| 233 |
|
---|
| 234 | // create a particle with random
|
---|
| 235 | // position values, -250 -> 250
|
---|
| 236 | var pX = Math.random() * 500 - 250,
|
---|
| 237 | pY = Math.random() * 500 - 250,
|
---|
| 238 | pZ = Math.random() * 500 - 250,
|
---|
| 239 | particle = new THREE.Vector3(pX, pY, pZ);
|
---|
| 240 |
|
---|
| 241 | // create a velocity vector
|
---|
| 242 | particle.velocity = new THREE.Vector3(
|
---|
| 243 | 0, // x
|
---|
| 244 | -Math.random(), // y
|
---|
| 245 | 0); // z
|
---|
| 246 |
|
---|
| 247 | // add it to the geometry
|
---|
| 248 | particles.vertices.push(particle);
|
---|
| 249 | }
|
---|
| 250 |
|
---|
| 251 | // create the particle system
|
---|
| 252 | particleSystem = new THREE.ParticleSystem(
|
---|
| 253 | particles,
|
---|
| 254 | pMaterial);
|
---|
| 255 |
|
---|
| 256 | particleSystem.sortParticles = true;
|
---|
| 257 |
|
---|
| 258 | // add it to the scene
|
---|
| 259 | scene.add(particleSystem);
|
---|
| 260 |
|
---|
| 261 |
|
---|
| 262 | // ground
|
---|
| 263 |
|
---|
| 264 | var initColor = new THREE.Color( 0x00ff00 );
|
---|
| 265 | initColor.setHSL( 0.25, 0.85, 0.5 );
|
---|
| 266 | var initTexture = THREE.ImageUtils.generateDataTexture( 1, 1, initColor );
|
---|
| 267 |
|
---|
| 268 | var groundMaterial = new THREE.MeshPhongMaterial( { color: 0xffffff, specular: 0x111111, map: initTexture, perPixel: true } );
|
---|
| 269 |
|
---|
| 270 | var groundTexture = THREE.ImageUtils.loadTexture( "grass.png", undefined, function() { groundMaterial.map = groundTexture } );
|
---|
| 271 | groundTexture.wrapS = groundTexture.wrapT = THREE.RepeatWrapping;
|
---|
| 272 | groundTexture.repeat.set( 1, 1 );
|
---|
| 273 | groundTexture.anisotropy = 16;
|
---|
| 274 |
|
---|
| 275 | var mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 20000, 20000 ), groundMaterial );
|
---|
| 276 | mesh.position.y = -250;
|
---|
| 277 | mesh.rotation.x = - Math.PI / 2;
|
---|
| 278 | mesh.receiveShadow = true;
|
---|
| 279 | scene.add( mesh );
|
---|
| 280 |
|
---|
| 281 | // poles
|
---|
| 282 |
|
---|
| 283 | var poleGeo = new THREE.BoxGeometry( 5, 750, 5 );
|
---|
| 284 | var poleMat = new THREE.MeshPhongMaterial( { color: 0xffffff, specular: 0x111111, shininess: 100, perPixel: true } );
|
---|
| 285 |
|
---|
| 286 | var mesh = new THREE.Mesh( poleGeo, poleMat );
|
---|
| 287 | mesh.position.y = -175; //-250
|
---|
| 288 | mesh.position.x = 0;
|
---|
| 289 | mesh.receiveShadow = true;
|
---|
| 290 | mesh.castShadow = true;
|
---|
| 291 | scene.add( mesh );
|
---|
| 292 |
|
---|
| 293 |
|
---|
| 294 | var gg = new THREE.BoxGeometry( 10, 10, 10 );
|
---|
| 295 | var mesh = new THREE.Mesh( gg, poleMat );
|
---|
| 296 | mesh.position.y = -250;
|
---|
| 297 | mesh.position.x = 0; //125
|
---|
| 298 | mesh.receiveShadow = true;
|
---|
| 299 | mesh.castShadow = true;
|
---|
| 300 | scene.add( mesh );
|
---|
| 301 |
|
---|
| 302 |
|
---|
| 303 | //
|
---|
| 304 | renderer = new THREE.WebGLRenderer( { antialias: true } );
|
---|
| 305 | renderer.setSize( window.innerWidth, window.innerHeight );
|
---|
| 306 | //renderer.setClearColor( scene.fog.color );
|
---|
| 307 |
|
---|
| 308 | container.appendChild( renderer.domElement );
|
---|
| 309 |
|
---|
| 310 | renderer.gammaInput = true;
|
---|
| 311 | renderer.gammaOutput = true;
|
---|
| 312 | renderer.physicallyBasedShading = true;
|
---|
| 313 |
|
---|
| 314 | renderer.shadowMapEnabled = true;
|
---|
| 315 |
|
---|
| 316 | //
|
---|
| 317 |
|
---|
| 318 | stats = new Stats();
|
---|
| 319 | stats.domElement.style.position = 'absolute';
|
---|
| 320 | stats.domElement.style.top = '0px';
|
---|
| 321 | container.appendChild( stats.domElement );
|
---|
| 322 |
|
---|
| 323 | stats.domElement.children[ 0 ].children[ 0 ].style.color = "#aaa";
|
---|
| 324 | stats.domElement.children[ 0 ].style.background = "transparent";
|
---|
| 325 | stats.domElement.children[ 0 ].children[ 1 ].style.display = "none";
|
---|
| 326 |
|
---|
| 327 | //
|
---|
| 328 |
|
---|
| 329 | window.addEventListener( 'resize', onWindowResize, false );
|
---|
| 330 |
|
---|
| 331 | sphere.visible = !true
|
---|
| 332 |
|
---|
| 333 | }
|
---|
| 334 |
|
---|
| 335 | //
|
---|
| 336 |
|
---|
| 337 | function createFlag() {
|
---|
| 338 |
|
---|
| 339 | // create materials
|
---|
| 340 | materials = [
|
---|
| 341 | new THREE.MeshPhongMaterial( { alphaTest: 0.5, ambient: 0xffffff, color: 0xffffff, specular: 0x030303, emissive: 0x111111, shininess: 20, perPixel: true, metal: false, map: clothTextures[flagSelector], side: THREE.DoubleSide } ),
|
---|
| 342 | new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true, transparent: true, opacity: 0.9 } )
|
---|
| 343 | ];
|
---|
| 344 |
|
---|
| 345 |
|
---|
| 346 |
|
---|
| 347 | if(initial){
|
---|
| 348 |
|
---|
| 349 | // cloth geometry
|
---|
| 350 |
|
---|
| 351 | clothGeometry = new THREE.ParametricGeometry( clothFunction, cloth.w, cloth.h, true );
|
---|
| 352 | clothGeometry.dynamic = true;
|
---|
| 353 | clothGeometry.computeFaceNormals();
|
---|
| 354 |
|
---|
| 355 | uniforms = { texture: { type: "t", value: 0, texture: clothTextures[0] } };
|
---|
| 356 | vertexShader = document.getElementById( 'vertexShaderDepth' ).textContent;
|
---|
| 357 | fragmentShader = document.getElementById( 'fragmentShaderDepth' ).textContent;
|
---|
| 358 |
|
---|
| 359 | // cloth mesh
|
---|
| 360 | object = new THREE.Mesh( clothGeometry, materials[ 0 ] );
|
---|
| 361 | object.position.set( 0, 0, 0 );
|
---|
| 362 | object.castShadow = true;
|
---|
| 363 | object.receiveShadow = true;
|
---|
| 364 | scene.add( object );
|
---|
| 365 | initial = false;
|
---|
| 366 | object.customDepthMaterial = new THREE.ShaderMaterial( { uniforms: uniforms, vertexShader: vertexShader, fragmentShader: fragmentShader } );
|
---|
| 367 |
|
---|
| 368 | }else{
|
---|
| 369 | setPinning(false);
|
---|
| 370 | flagRelease = setInterval(function () {switchFlag()}, 2000);
|
---|
| 371 | }
|
---|
| 372 |
|
---|
| 373 | }
|
---|
| 374 |
|
---|
| 375 | //
|
---|
| 376 |
|
---|
| 377 | function switchFlag() {
|
---|
| 378 |
|
---|
| 379 | scene.remove( object );
|
---|
| 380 | setPinning(true);
|
---|
| 381 | object = new THREE.Mesh( clothGeometry, materials[ 0 ] );
|
---|
| 382 |
|
---|
| 383 | object.position.set( 0, 0, 0 );
|
---|
| 384 | object.castShadow = true;
|
---|
| 385 | object.receiveShadow = true;
|
---|
| 386 | scene.add( object );
|
---|
| 387 | object.customDepthMaterial = new THREE.ShaderMaterial( { uniforms: uniforms, vertexShader: vertexShader, fragmentShader: fragmentShader } );
|
---|
| 388 |
|
---|
| 389 | // stop the timer for calling this method
|
---|
| 390 | clearInterval(flagRelease);
|
---|
| 391 | }
|
---|
| 392 |
|
---|
| 393 | //
|
---|
| 394 |
|
---|
| 395 | function onWindowResize() {
|
---|
| 396 |
|
---|
| 397 | camera.aspect = window.innerWidth / window.innerHeight;
|
---|
| 398 | camera.updateProjectionMatrix();
|
---|
| 399 |
|
---|
| 400 | renderer.setSize( window.innerWidth, window.innerHeight );
|
---|
| 401 |
|
---|
| 402 | }
|
---|
| 403 |
|
---|
| 404 | //
|
---|
| 405 |
|
---|
| 406 | function animate() {
|
---|
| 407 |
|
---|
| 408 | requestAnimationFrame( animate );
|
---|
| 409 |
|
---|
| 410 | var time = Date.now();
|
---|
| 411 |
|
---|
| 412 | windStrength = Math.cos( time / 7000 ) * 100 + 200;
|
---|
| 413 | windForce.set( 1000,500,Math.sin( time / 1000 ) ).normalize().multiplyScalar( windStrength );
|
---|
| 414 | arrow.setLength( windStrength );
|
---|
| 415 | arrow.setDirection( windForce );
|
---|
| 416 |
|
---|
| 417 | // add some rotation to the system
|
---|
| 418 | particleSystem.rotation.y += 0.01;
|
---|
| 419 |
|
---|
| 420 | var pCount = particleCount;
|
---|
| 421 | while(pCount > 0) {
|
---|
| 422 |
|
---|
| 423 | // get the particle
|
---|
| 424 | particle = particles.vertices[pCount-1];
|
---|
| 425 |
|
---|
| 426 | // check if we need to reset
|
---|
| 427 | if(particle.y < -200) {
|
---|
| 428 | particle.y = 200;
|
---|
| 429 | //particle.velocity.y = 0;
|
---|
| 430 | }
|
---|
| 431 | particle.velocity.y = -0.001;
|
---|
| 432 | particle.setY(
|
---|
| 433 | particle.y + particle.velocity);
|
---|
| 434 | pCount--;
|
---|
| 435 | }
|
---|
| 436 |
|
---|
| 437 | // flag to the particle system that we've
|
---|
| 438 | // changed its vertices. This is the
|
---|
| 439 | // dirty little secret.
|
---|
| 440 | particleSystem.geometry.__dirtyVertices = true;
|
---|
| 441 | simulate(time);
|
---|
| 442 | render();
|
---|
| 443 | stats.update();
|
---|
| 444 |
|
---|
| 445 | }
|
---|
| 446 |
|
---|
| 447 | function render() {
|
---|
| 448 |
|
---|
| 449 |
|
---|
| 450 | var timer = Date.now() * 0.0002;
|
---|
| 451 |
|
---|
| 452 | var p = cloth.particles;
|
---|
| 453 | keyboard.update();
|
---|
| 454 | if( keyboard.down("A")) {
|
---|
| 455 | flagSelector--;
|
---|
| 456 | if(flagSelector < 0) flagSelector = flags.length-1;
|
---|
| 457 | createFlag();
|
---|
| 458 |
|
---|
| 459 | }else if(keyboard.down("D")) {
|
---|
| 460 | flagSelector++;
|
---|
| 461 | if(flagSelector >= flags.length) flagSelector = 0;
|
---|
| 462 | createFlag();
|
---|
| 463 | }
|
---|
| 464 |
|
---|
| 465 |
|
---|
| 466 | for ( var i = 0, il = p.length; i < il; i ++ ) {
|
---|
| 467 |
|
---|
| 468 | clothGeometry.vertices[ i ].copy( p[ i ].position );
|
---|
| 469 |
|
---|
| 470 | }
|
---|
| 471 |
|
---|
| 472 | clothGeometry.computeFaceNormals();
|
---|
| 473 | clothGeometry.computeVertexNormals();
|
---|
| 474 |
|
---|
| 475 | clothGeometry.normalsNeedUpdate = true;
|
---|
| 476 | clothGeometry.verticesNeedUpdate = true;
|
---|
| 477 |
|
---|
| 478 | sphere.position.copy( ballPosition );
|
---|
| 479 |
|
---|
| 480 | if ( rotate ) {
|
---|
| 481 |
|
---|
| 482 | camera.position.x = Math.cos( timer ) * 1500;
|
---|
| 483 | camera.position.z = Math.sin( timer ) * 1500;
|
---|
| 484 |
|
---|
| 485 | }
|
---|
| 486 |
|
---|
| 487 | camera.lookAt( new THREE.Vector3(scene.position.x+150, scene.position.y+100, scene.position.z) );
|
---|
| 488 |
|
---|
| 489 | renderer.render( scene, camera );
|
---|
| 490 |
|
---|
| 491 | }
|
---|
| 492 |
|
---|
| 493 | </script><div><canvas width="1366" height="600"></canvas><!--<div style="cursor: pointer; width: 80px; opacity: 0.9; z-index: 10001; position: absolute; top: 0px;"><div style="padding: 2px 0px 3px; background: transparent;"><div style="font-family: Helvetica, Arial, sans-serif; text-align: left; font-size: 9px; color: rgb(170, 170, 170); margin: 0px 0px 1px 3px;"><span style="font-weight:bold">55 FPS</span> (0-60)</div><canvas width="74" height="30" style="display: none; margin-left: 3px;"></canvas></div><div style="padding: 2px 0px 3px; display: none; background-color: rgb(8, 24, 8);"><div style="font-family: Helvetica, Arial, sans-serif; text-align: left; font-size: 9px; color: rgb(0, 255, 0); margin: 0px 0px 1px 3px;"><span style="font-weight:bold">16 MS</span> (1-607201)</div><canvas width="74" height="30" style="display: block; margin-left: 3px;"></canvas></div><div style="padding: 2px 0px 3px; display: none; background-color: rgb(24, 8, 13);"><div style="font-family: Helvetica, Arial, sans-serif; text-align: left; font-size: 9px; color: rgb(255, 0, 128); margin: 0px 0px 1px 3px;"><span style="font-weight:bold">10 MEM</span> (10-10)</div><canvas width="74" height="30" style="display: block; margin-left: 3px;"></canvas></div></div></div><div><canvas height="932" width="1920"></canvas><div style="cursor: pointer; width: 80px; opacity: 0.9; z-index: 10001; position: absolute; top: 0px;"><div style="background: none repeat scroll 0% 0% transparent; padding: 2px 0px 3px;"><div style="font-family: Helvetica,Arial,sans-serif; text-align: left; font-size: 9px; color: rgb(170, 170, 170); margin: 0px 0px 1px 3px;"><span style="font-weight:bold">60 FPS</span> (30-69)</div><canvas style="display: none; margin-left: 3px;" height="30" width="74"></canvas></div><div style="background-color: rgb(8, 24, 8); padding: 2px 0px 3px; display: none;"><div style="font-family: Helvetica,Arial,sans-serif; text-align: left; font-size: 9px; color: rgb(0, 255, 0); margin: 0px 0px 1px 3px;"><span style="font-weight:bold">10 MS</span> (5-504)</div><canvas style="display: block; margin-left: 3px;" height="30" width="74"></canvas></div><div style="background-color: rgb(24, 8, 13); padding: 2px 0px 3px; display: none;"><div style="font-family: Helvetica,Arial,sans-serif; text-align: left; font-size: 9px; color: rgb(255, 0, 128); margin: 0px 0px 1px 3px;"><span style="font-weight:bold">MEM</span></div><canvas style="display: block; margin-left: 3px;" height="30" width="74"></canvas></div></div>--></div>
|
---|
| 494 |
|
---|
| 495 | </body></html> |
---|