ソース掲示板




すべてから検索

キーワード   条件 表示 現行ログ 過去ログ トピックス 名前 本文

  メンテナンス 前画面に戻る

対象スレッド 件名: Three.js : WebGL Cube テクスチャパノラマ背景の画像配置が解る表示
名前: lightbox
処理選択
パスワード

件名 Three.js : WebGL Cube テクスチャパノラマ背景の画像配置が解る表示
名前 lightbox
コメント
@HTML
<script type="text/javascript" src="http://lightbox.in.coocan.jp/three/three.min57.js"></script><script type="text/javascript" src="http://lightbox.in.coocan.jp/three/OrbitControls.js"></script><script type="text/javascript" src="http://lightbox.in.coocan.jp/three/user_three.js"></script><div id="three_area" style='width:850px;height:500px;border: solid #000000 1px;'></div>

<script>

	var cameraCube, sceneCube;

	var w = 850;
	var h = 500;

	// カメラ作成
	USER.camera = new THREE.PerspectiveCamera( 70, w / h, 1, 10000 );
	USER.camera.position.set( 0, 0, 100 );

	USER.camera2 = new THREE.PerspectiveCamera( 50, w / h, 1, 500 );
	USER.camera2.position.z = 0;

	// シーン作成
	USER.scene = new THREE.Scene();
	USER.scene2 = new THREE.Scene();

	// テクスチャの準備
	var path = "../threeimg/basic/";
	var format = '.jpg';
	var urls = [
			path + 'px' + format, path + 'nx' + format,
			path + 'py' + format, path + 'ny' + format,
			path + 'pz' + format, path + 'nz' + format
		];

	// テクスチャの実装
	mesh = USER.meshPanorama(urls);
	USER.scene2.add( mesh );

	// レンダラー作成
	USER.renderer = new THREE.WebGLRenderer();
	USER.renderer.setSize( w, h );

	// 表示エリア設定
	document.getElementById("three_area").appendChild( USER.renderer.domElement );

	// コントロール作成
	USER.orbit();
//	USER.controls.autoRotate = true;
	USER.controls.autoRotateSpeed = 0.5; //default 2.0

	// アニメーション開始
	USER.animate();

// オーバーライド
USER.animate = function () {

	requestAnimationFrame( USER.animate );

	USER.camera2.rotation.copy( USER.camera.rotation );
	USER.camera2.position.copy( USER.camera.position );
	USER.controls.update();
	USER.renderer.render( USER.scene2, USER.camera2 );

}


</script>
@HEND

@DIV
<script type="text/javascript" src="http://lightbox.in.coocan.jp/three/three.min57.js"></script>
<script type="text/javascript" src="http://lightbox.in.coocan.jp/three/OrbitControls.js"></script>
<script type="text/javascript" src="http://lightbox.in.coocan.jp/three/user_three.js"></script>
<div id="three_area" style='width:850px;height:500px;border: solid #000000 1px;'></div>

<script>

	var cameraCube, sceneCube;

	var w = 850;
	var h = 500;

	// カメラ作成
	USER.camera = new THREE.PerspectiveCamera( 70, w / h, 1, 10000 );
	USER.camera.position.set( 0, 0, @c:red(100) );

	USER.camera2 = new THREE.PerspectiveCamera( 50, w / h, 1, 500 );
	USER.camera2.position.z = 0;

	// シーン作成
	USER.scene = new THREE.Scene();
	USER.scene2 = new THREE.Scene();

	// テクスチャの準備
	var path = "../threeimg/basic/";
	var format = '.jpg';
	var urls = [
			path + 'px' + format, path + 'nx' + format,
			path + 'py' + format, path + 'ny' + format,
			path + 'pz' + format, path + 'nz' + format
		];

	// テクスチャの実装
	mesh = USER.meshPanorama(urls);
	USER.scene2.add( mesh );

	// レンダラー作成
	USER.renderer = new THREE.WebGLRenderer();
	USER.renderer.setSize( w, h );

	// 表示エリア設定
	document.getElementById("three_area").appendChild( USER.renderer.domElement );

	// コントロール作成
	USER.orbit();
//	USER.controls.autoRotate = true;
	USER.controls.autoRotateSpeed = 0.5; //default 2.0

	// アニメーション開始
	USER.animate();

// オーバーライド
USER.animate = function () {

	requestAnimationFrame( USER.animate );

	USER.camera2.rotation.copy( USER.camera.rotation );
	USER.camera2.position.copy( USER.camera.position );
	USER.controls.update();
	USER.renderer.render( USER.scene2, USER.camera2 );

}


</script>
@END