ソース掲示板




すべてから検索

キーワード   条件 表示 現行ログ 過去ログ トピックス 名前 本文
Three.js キューブデモを Shdowbox IFRAME に documet.write で実装
日時: 2018/02/06 18:59
名前: lightbox










拡張子:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="http://lightbox.on.coocan.jp/sbx33/loadShadowbox.js"></script>
<script type="text/javascript">
$(function(){
	$("#image1").click(function(){
			Shadowbox.open({ 
				player: 'iframe', 
				content: 'about:blank', 
				options: { 
					onFinish: function() {
						setTimeout(  function() {
							var doc = document.getElementById("sb-player").contentWindow.document;

str="";
str+="<"+"script type=\"text/javascript\" src=\"http://lightbox.in.coocan.jp/three/three.min57.js\" charset=\"utf-8\"></"+"script> \n";
str+="<"+"script type=\"text/javascript\" src=\"http://lightbox.in.coocan.jp/three/user_cubes1.js\" charset=\"utf-8\"></"+"script> \n";
str+="<"+"script type=\"text/javascript\" src=\"http://lightbox.in.coocan.jp/three/user_play1.js\" charset=\"utf-8\"></"+"script> \n";
str+=" \n";
str+="<"+"script type=\"text/javascript\"> \n";
str+=" \n";
str+="var w = 600,h = 500; \n";
str+="var camera, scene, renderer; \n";
str+="var user_play; \n";
str+=" \n";
str+="// 表示エリア作成 \n";
str+="document.write(\"<div id=\\\"three_area\\\" style='width:100%;height:100%;'></div>\"); \n";
str+=" \n";
str+="// 処理開始 \n";
str+="build_3d_world(); \n";
str+=" \n";
str+="function build_3d_world() { \n";
str+=" \n";
str+="	// カメラ \n";
str+="	camera = new THREE.PerspectiveCamera( 70, w / h, 1, 10000 ); \n";
str+=" \n";
str+="	// シーン \n";
str+="	scene = new THREE.Scene(); \n";
str+=" \n";
str+="	// オブジェクト \n";
str+="	var UserCubes = new THREE.UserCubes1( scene ); \n";
str+=" \n";
str+="	// レンダラー \n";
str+="	renderer = new THREE.CanvasRenderer(); \n";
str+="	renderer.setSize( window.innerWidth, window.innerHeight ); \n";
str+=" \n";
str+="	// 実装 \n";
str+="	document.getElementById(\"three_area\").appendChild( renderer.domElement ); \n";
str+=" \n";
str+="	// アニメーション \n";
str+="	user_play = new THREE.UserPlay1( scene, camera, renderer, animate ); \n";
str+="	user_play.start(); \n";
str+=" \n";
str+="} \n";
str+="// ループ処理 \n";
str+="function animate() { \n";
str+=" \n";
str+="	requestAnimationFrame( animate ); \n";
str+="	user_play.render(); \n";
str+=" \n";
str+="} \n";
str+=" \n";
str+="</"+"script> ";
							doc.write(str);

							doc.close();
						},100 );
					}
				} 
	
			}); 

});
});
</script>
<button id="image1">きゅーぶす</button>

メンテナンス


日時: 2018/02/06 18:59
名前: lightbox