ソース掲示板




すべてから検索

キーワード   条件 表示 現行ログ 過去ログ トピックス 名前 本文
Three.js : WebGL限定の Cube テクスチャによる『パノラマ背景』
日時: 2018/02/02 17:55
名前: lightbox



拡張子:
<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:400px;border: solid #000000 1px;'></div>

<script>

	var cameraCube, sceneCube;

	var w = 850;
	var h = 400;

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

	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/SwedishRoyalCastle/";
	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>
拡張子:
USER.meshPanorama = function(urls) {

	var reflectionCube = THREE.ImageUtils.loadTextureCube( urls );
	reflectionCube.format = THREE.RGBFormat;

	// Skybox
	var shader = THREE.ShaderLib[ "cube" ];
	shader.uniforms[ "tCube" ].value = reflectionCube;

	var material = new THREE.ShaderMaterial( {

		fragmentShader: shader.fragmentShader,
		vertexShader: shader.vertexShader,
		uniforms: shader.uniforms,
		depthWrite: false,
		side: THREE.BackSide

	} );

	return new THREE.Mesh( new THREE.CubeGeometry( 100, 100, 100 ), material );

}
メンテナンス


日時: 2018/02/02 17:55
名前: lightbox