Html5 Snippet / dim

error

infos

dim

Snippets ( 56 / 68 )

Blog ( 4 )

Run | Edit | Fork |

Run | Edit | Fork |

Run | Edit | Fork |

Run | Edit | Fork |

Run | Edit | Fork |

Run | Edit | Fork |

Run | Edit | Fork |

Run | Edit | Fork |

Run | Edit | Fork |

Run | Edit | Fork |

Run | Edit | Fork |

Run | Edit | Fork |

Run | Edit | Fork |

Run | Edit | Fork |

Run | Edit | Fork |

Run | Edit | Fork |

Run | Edit | Fork |

Run | Edit | Fork |

Run | Edit | Fork |

Run | Edit | Fork |

Run | Edit | Fork |

Run | Edit | Fork |

Run | Edit | Fork |

Run | Edit | Fork |

Run | Edit | Fork |

Run | Edit | Fork |

Run | Edit | Fork |

Run | Edit | Fork |

Run | Edit | Fork |

Run | Edit | Fork |

Run | Edit | Fork |

Run | Edit | Fork |

Run | Edit | Fork |

Run | Edit | Fork |

Run | Edit | Fork |

Run | Edit | Fork |

Run | Edit | Fork |

Run | Edit | Fork |

Run | Edit | Fork |

Run | Edit | Fork |

Run | Edit | Fork |

Run | Edit | Fork |

Run | Edit | Fork |

Run | Edit | Fork |

Run | Edit | Fork |

Run | Edit | Fork |

Run | Edit | Fork |

Run | Edit | Fork |

Run | Edit | Fork |

Run | Edit | Fork |

Run | Edit | Fork |

Run | Edit | Fork |

Run | Edit | Fork |

Run | Edit | Fork |

Run | Edit | Fork |

Run | Edit | Fork |

HTML5 video destruction

Template PDF-Like

Stupid Bomberman

Google Web Fonts

Three.js / Hello World

Html5 - Local Storage

CofeeScript - HelloWorld

Japan Earth Quakes Visualisation - V1

Google translate bookmarklet - make french speech work

HTML5 D&D - Image Preview

Processing.js - HelloWorld

php.js - diff

ChromeFrame - Installation

Scene.js - Test

Three.js - Cross Domain 3D Model & Texture & Lighting

nivo slider test

HTML5 D&D Image Preview

Sprite3D.js - SkyBox test

html5snippet - api demo

tokbox - hello world

Threejs - SkyBox panorama

Sencha Touch - Hello World

makeHtml5SnippetLink

Grid | Slides

EDITING... Direct link

Title

Content

<p><b></b></p><p><b></b></p><p><b></b></p><p>Today we release new html5snippet BETA. What's new ?</p><p></p><p></p><h4>Download feature</h4><blockquote class="webkit-indent-blockquote" style="margin:0 0 0 40px;border:none;padding:0px;"><p>You can now download every snippet in 2 formats:</p></blockquote><blockquote class="webkit-indent-blockquote" style="margin:0 0 0 40px;border:none;padding:0px;"><blockquote class="webkit-indent-blockquote" style="margin:0 0 0 40px;border:none;padding:0px;"><p>- Single, standalone .html5 file: all code &amp; libraries are included in one standalone file ( no external dependencies )</p></blockquote></blockquote><blockquote class="webkit-indent-blockquote" style="margin:0 0 0 40px;border:none;padding:0px;"><blockquote class="webkit-indent-blockquote" style="margin:0 0 0 40px;border:none;padding:0px;"><p>- Zip archive: you get the code &amp; libraries in separate files (each library in its own file)</p></blockquote></blockquote><blockquote class="webkit-indent-blockquote" style="margin:0 0 0 40px;border:none;padding:0px;"><div>@see  <a href="http://html5snippet.net/howto#use-library">how to use libraries</a></div><div>@note You can even download unsaved snippets</div></blockquote><div><br></div><div><div style="text-align:center;"></div></div><div><img style="margin-left:40px;" width="760" src="/application/module/html5-snippet-module/public_content/img/howto/08.png" alt="08.png"></div><h4></h4><h4><br></h4><h4>Mobile &amp; Desktop apps</h4><blockquote class="webkit-indent-blockquote" style="margin:0 0 0 40px;border:none;padding:0px;"><div>Once you have downloaded your files, use <a href="https://build.phonegap.com/">phonegap build</a>, or <a href="http://www.appcelerator.com/">titanium</a> to generate a mobile or a desktop app from your snippet ;-)</div></blockquote><div></div><div></div><p></p><p></p><h4><br></h4><h4>New echo API</h4><div><span>	</span>Need to emulate server responce? We now have an api for that. Take a look at <a href="http://html5snippet.net/snippet/113">this snippet</a>, the code is self explanatory.</div><div><br></div><div><span>	</span>Simply do a post request to "/echo/html", "/echo/json", "/echo/xml", "/echo/jsonp", "/echo/js" from your snippet, with post param <span>	</span>"echoData" containing the data to send back ! That's all.</div><h4><br></h4><h4>15 New libraries supported</h4><p></p><ul><li>raphael.js  1.5.2<br></li><li>sencha touch 1.1.0<br></li><li>rightjs 2.2.3<br></li><li>my.js 0.1.1<br></li><li>knockout.js 1.2.1<br></li><li>benchmark.js 0.2.2<br></li><li>extjs 4.0.2<br></li><li>box2dweb 0.4.3<br></li><li>crafty 0.4.3<br></li><li>jsplumb 1.2.6 (jquery or yui3 versions)<br></li><li>firebug lite<br></li><li>jquery layout 1.2.0 &amp; 1.3.0<br></li><li>jstree 1.0 pre fix 1<br></li><li>uki 0.3.8<br></li><li>yui 3<br></li></ul><div>@updated   jquery &amp; jquery mobile updated to latest versions</div><div></div><p></p><p></p><p></p><h4><br></h4><h4>Blogs for everyone</h4><blockquote class="webkit-indent-blockquote" style="margin:0 0 0 40px;border:none;padding:0px;"><div>Every user, now has a blog, accessible on it's profile page. The wysiwyg editor helps you write &amp; publish your own articles.</div><div><br></div><div>You can embed snippets in your blog with this syntax:   &lt;pre class="embedsnippet-47" style="width:850px; height:800px;"&gt;&lt;/pre&gt;</div><div><br></div><div>@note Iframe tag is not supported</div><div>@see  <a href="http://html5snippet.net/howto#update-user-infos">how to access your profile page</a></div><div>@note We have a "save draft" feature ;-)</div></blockquote><div></div><div></div><div></div><h4><br></h4><h4>Firebug lite is back</h4><blockquote class="webkit-indent-blockquote" style="margin:0 0 0 40px;border:none;padding:0px;"><div>@see <a href="http://html5snippet.net/howto#keyboard-shortcuts">How to use firebug lite in your snippets</a></div></blockquote><div></div><div></div><h4><br></h4><h4>Redesigned profile &amp; editor pages</h4><blockquote class="webkit-indent-blockquote" style="margin:0 0 0 40px;border:none;padding:0px;"><div>A profile page of each user now have a slide show, generated from automated screenshots of all public snippets of the user, here is for <span>	</span>exemple <a href="http://html5snippet.net/people/4">my profile page</a>.</div><div><br></div><div>The main page looks a bit better now.</div><div><br></div><div>Now when you "mouse hover" snippets, you see automatically generated preview:</div></blockquote><div></div><div></div><div><br></div><div></div><div></div><div></div><div></div><div><img width="760" style="margin-left:40px;" src="/application/module/html5-snippet-module/public_content/img/howto/12.png" alt="12.png"></div>

<div></div><div></div><div></div><div></div><div style="text-align:center;"><br></div><div style="text-align:center;"><br></div><div style="text-align:center;"><br></div><div style="text-align:center;"><br></div><div style="text-align:center;">fin</div><div style="text-align:center;"><br></div><div style="text-align:center;"><br></div><div style="text-align:center;"><br></div><div style="text-align:center;"><br></div><div style="text-align:center;"><br></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>

html5snippet: new BETA ( 2011.07.19 )

Last updated 19.7.2011

EDITING... Direct link

Title

Content

html5snippet: new release (still beta)

Last updated 10.8.2011

EDITING... Direct link

Title

Content

how to embed iframe snippet in your blog post

Last updated 16.9.2011

EDITING... Direct link

Title

Content

<p></p><div><br></div><h4><u>The problem</u></h4>For one of my Three.js projects i needed loading a 3d model(.js) + texture from different domain than the domain hosting the app itself. Everything i tryed with "<span style="font-family:&quot;Bitstream Vera Sans Mono&quot;, &quot;Courier New&quot;, monospace;font-size:12px;line-height:16px;background-color:rgb(255,255,255);"><span style="margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;">THREE</span><span style="margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;">.</span><span style="margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;">JSONLoader</span></span>" failed :-/ ...<div><br></div><div><br></div><h4><u>The solution (1/2) : THREE.CrossDomainJSONLoader</u></h4><div>... So i ended up  writing my own loader: "THREE.CrossDomainJSONLoader". Here is the code: (it's a bit dirty, but it works)</div><div><br></div>

<pre>/**
 * 
 * Hack to load cross domain models, generated by obj_to_threejs converter from here
 * https://github.com/mrdoob/three.js/blob/master/utils/exporters/convert_obj_three.py
 * without changing generated models's code...
 * ...generates js files are supposed to run inside a worker, but workers dont support
 * cross domain scripts (yet??) :'( ...
 * 
 * Usage is EXACTLY the same as THREE.JSONLoader
 * 
 */
THREE.CrossDomainJSONLoader = function ( showStatus ) {

THREE.JSONLoader.call( this, showStatus );

};

THREE.CrossDomainJSONLoader.prototype = new THREE.JSONLoader();
THREE.CrossDomainJSONLoader.prototype.constructor = THREE.CrossDomainJSONLoader;
THREE.CrossDomainJSONLoader.prototype.supr = THREE.JSONLoader.prototype;

THREE.CrossDomainJSONLoader.prototype.load = function ( parameters ) {

var scope = this,
    	url = parameters.model,
		callback = parameters.callback, 
		texture_path = parameters.texture_path ? parameters.texture_path : this.extractUrlbase( url );
        
	this.onLoadStart();
    
    function _eval(src)
    {
        postMessage = function(model){};
        close = function(){};
        eval(src);
        return model;
    }
    
    var req = new XMLHttpRequest();
    req.open('GET', url, true);
    req.withCredentials = true;
    req.onreadystatechange = function (aEvt)
    {
        if (req.readyState == 4)
        {
            if(req.status == 200)
            {
                var tmp = _eval(req.responseText);
                scope.createModel(tmp, callback, texture_path);
                scope.onLoadComplete();
            }
            else
                console.log("ERROR loading model");
        }
    };
    req.send(null);
};

</pre><pre><br></pre><pre><br></pre><pre><br></pre><pre><span style="font-family:&quot;Times New Roman&quot;;"></span></pre><h4><u>The solution (2/2) :  Access-Control-Allow-Credentials + Access-Control-Allow-Origin</u></h4>On the server side, you will need to add 2 extra HTTP headers while serving files. Here is a simple php script i used for that:<div>Note that you can download all assets here: <a href="http://assets.devkod.com/html5snippet/threejs/cross-domain-model-loading-example/all.zip">zip</a>. This works for an app hosted here, on html5snippet.net, but to make it work with an app hosted somewhere else, simply replace "http://echo.html5snippet.net" by your own domain ;-)</div><div><br></div><div><br></div><div>

<pre>&lt;?php

header('Access-Control-Allow-Credentials: true');
header('Access-Control-Allow-Methods: GET');
header('Access-Control-Allow-Origin: http://echo.html5snippet.net');

if (isset($_GET['file']))
{
    switch($_GET['file'])
	{
		case 'texture.jpg':
			header('Content-Type: image/jpg');
			die (file_get_contents("texture.jpg"));
		break;
		
		case 'model.js':
			die (file_get_contents("model.js"));
		break;
	}
}
</pre></div><div><h4><u><br></u></h4><h4><u>The problem (bis) : Browser Compatibility &amp; Three.js version</u></h4></div><div>Expect this hack to work only in latest versions of modern browsers. You'll also need to use the latest three.js release (r43 or r44). (Note that three.js version available on html5snippet has been updated )<u><br></u></div><div><div>       chrome:</div>           +chrome 14<div>           +chrome 16(canary)</div>           ?maybe it was working before chrome 14, not sure. BTW how can i downgrade chrome version ?<div>  </div><div>       firefox:</div><div>           +firefox 8.0a2 (aurora)</div><div>           -Before ff8, we have a "Security Error: code 1000"</div><div>  </div><div>       safari:</div><div>           -This link says webgl works in safari 5.1 (<a href="https://discussions.apple.com/thread/3300585?start=0&amp;tstart=0">https://discussions.apple.com/thread/3300585?start=0&amp;tstart=0</a>)</div><div>            but, i can't find "Enable WebGL", so i think that it only works on Safari-Mac, not Safari-Windows release.</div><div>            ...If someone tested this on Safari-Mac 5.1, plz tell if that worked ;-)...</div><div>  </div><div>       IE:</div><div>           -NOTHING about supporting WebGL.... **** *** microsoft. Why do you hate web developers so much? :-/ </div></div><div><br></div><div><br></div><div><h4><u>The demo:</u></h4></div><div>

<pre class="embedsnippet-72" style="width:850px;height:800px;"></pre>

</div><p></p>

How to load 3d model from different domain and display it with Three.js

Last updated 22.9.2011