ソース掲示板




すべてから検索

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

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

対象スレッド 件名: Three.js : 球テクスチャで、パノラマ背景( 但し Canvas )
名前: lightbox
処理選択
パスワード

件名 Three.js : 球テクスチャで、パノラマ背景( 但し Canvas )
名前 lightbox
コメント
@SHOW
良くみると、斜めのラインがカクカクしています。処理としては、CanvasRenderer を使って、
テクスチャのオプションとして、[[{ map: texture, overdraw:true }]] になっているところです
@END

@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:600px;height:400px;border: solid #000000 1px;'></div>

<script>

var img_url = "../threeimg/2294472375_24a3b8ef46_o.jpg";
var mapping = new THREE.UVMapping();	// テクスチャの普通のデフォルト値

var texture = THREE.ImageUtils.loadTexture( img_url, mapping, function () {

	var w = 830;
	var h = 400;

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

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

	// パノラマ背景
	var sg = new THREE.SphereGeometry( 500, 60, 40 );
	var mbm = new THREE.MeshBasicMaterial( { map: texture, overdraw:true } );
	var mesh = new THREE.Mesh( sg, mbm );
	mesh.scale.x = -1;
	USER.scene.add( mesh );

	// レンダラー作成
	USER.renderer = new THREE.CanvasRenderer();
	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();

} );


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

<script>

var img_url = "../threeimg/2294472375_24a3b8ef46_o.jpg";
var mapping = new THREE.UVMapping();	// テクスチャの普通のデフォルト値

var texture = THREE.ImageUtils.loadTexture( img_url, mapping, function () {

	var w = 830;
	var h = 400;

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

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

	// パノラマ背景
	var sg = new THREE.SphereGeometry( 500, 60, 40 );
	var mbm = new THREE.MeshBasicMaterial( { map: texture, overdraw:true } );
	var mesh = new THREE.Mesh( sg, mbm );
	mesh.scale.x = -1;
	USER.scene.add( mesh );

	// レンダラー作成
	USER.renderer = new THREE.CanvasRenderer();
	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();

} );


</script>
@END