Three.js(Canvas) : ２平面(それぞれ裏表としてテクスチャ)の実行ページ
セグメント
THREE.PlaneGeometry(350, 400, 5, 5) のように、第３、４引数は画面を分割する
セグメントの数で、この数が多いほど表現が正確になります。
※ 平面の場合は遠近によるテクスチャの歪みが減少
※ 球面の場合は、より細かに表現
このセグメントの境界の表示が
overdraw: true で消えました。false や 未設定で
は、薄く白いラインが表示されます。これを、領域を拡大して消しているようです。
テクスチャのロード
サンプルでは、全くそのような記述が無いのですが、本来
Image オブシェクトの
ロードが完了しないと問題が出ると思います(大きい画像では間に合わない可能性)。
しかし、ソースコードの中を見てもその処理に見合った記述が無かったので、自前
で書いています。
関連する記事
Canvas を使って 3D データを描画する JavaScript ライブラリ『Three.js』
のバグ対応( Firefox、IE9、Opera で正しくテクスチャが適用されない )
Three.js で、別ドメインのテクスチャ画像を取得する場合は、php で
Access-Control-Allow-Origin: * を返します
※ Google+(Picasa)に画像を置くと、他ドメインですがロードできます
<div id="container_three"></div>
<script src="http://winofsql.jp/js/three/Three.js"></script>
<script type="text/javascript">
var v_offset = 0;
var v_width = 700;
var v_height = 500;
var v_action = 0.05;
var v_comera_v = 200;
var v_iamge_url = 'https://lh5.googleusercontent.com/-qTCVOjIQB_s/Tvc0W4CCvBI/AAAAAAAAED4/i132mw8S30o/s300/v4gsword12_23_f3.png';
var v_iamge_url2 ='https://lh6.googleusercontent.com/-RZRlwasRBvU/TkgD69DK2dI/AAAAAAAADec/35ka_hIu0XY/s300/0814_1.png';
var container;
var camera, scene, renderer;
var mesh,mesh_r;
var mouseX = 0, mouseY = 0;
var material,texture;
var material2,texture2;
init();
animate();
function init() {
container = document.getElementById( 'container_three' );
scene = new THREE.Scene();
scene.position.y = v_offset;
camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.set( 0, v_comera_v, 650 );
scene.add( camera );
var image = new Image()
image.onload = function () {
texture = new THREE.Texture( this );
texture.needsUpdate = true;
material = new THREE.MeshBasicMaterial({map: texture, overdraw: true});
// 平面表
mesh = new THREE.Mesh(new THREE.PlaneGeometry(350, 400, 5, 5), material);
mesh.rotation.x = 0;
mesh.rotation.y = 0;
scene.add(mesh);
};
image.src = v_iamge_url;
var image2 = new Image()
image2.onload = function () {
texture2 = new THREE.Texture( this );
texture2.needsUpdate = true;
material2 = new THREE.MeshBasicMaterial({map: texture2, overdraw: true});
// 平面裏
mesh_r = new THREE.Mesh(new THREE.PlaneGeometry(350, 400, 5, 5), material2);
mesh_r.rotation.x = 0;
mesh_r.rotation.y = 180 * Math.PI / 180; // 180°( * Math.PI / 180 が固定 )
scene.add(mesh_r);
};
image2.src = v_iamge_url2;
renderer = new THREE.CanvasRenderer();
renderer.setSize( v_width, v_height );
container.appendChild( renderer.domElement );
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
}
function onDocumentMouseMove( event ) {
mouseX = event.clientX;
mouseY = event.clientY;
}
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
camera.position.x += ( mouseX - camera.position.x - v_width / 2 ) * v_action;
camera.position.y += ( - mouseY - camera.position.y + (v_offset + v_comera_v +(container.offsetTop-window.pageYOffset)) ) * v_action;
camera.lookAt( scene.position );
if ( mesh && mesh_r ) {
mesh.rotation.y -= 0.005;
mesh_r.rotation.y -= 0.005;
}
renderer.render( scene, camera );
}
</script>
posted by
at 2012-03-08 21:59
|
Comment(0)
|
Three.js : ベーシック
|
|
