Material.js に、コメントで説明があります。 Overdrawn pixels (typically between 0 and 1) for fixing antialiasing gaps in CanvasRenderer CanvasRenderer でアンチエイリアシングのギャップを修正するためのフラグだそうです。他のソフトでも同様のものがあったので、その内容は以下のように書かれています。antialiasing gaps(アンチエイリアスによる隙間)を埋めるために立体表面を広げるか。広げる場合true。それ以外の場合false。内容は『よりよい描画』のようですし、サンプルではだいたい true のようなので、セットしておくと良いと思います。 ▼ 以下をクリックするとセグメント(5x5)の境界である線を見る事ができます
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<link rel="shortcut icon" href="http://winofsql.jp/WinOfSql.ico" />
<style>
body {
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div id="container_three"></div>
<script src="three.min_68.js"></script>
<script>
var v_offset = 0;
var v_width = window.innerWidth;
var v_height = window.innerHeight;
var v_action = 0.05;
var v_comera_v = 200;
var v_iamge_url = "image/f1.jpg"
var v_iamge_url2 = "image/b1.jpg";
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() {
// *****************************
// Three.js を実行するコンテナ
// *****************************
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;
// 立体表面を広げ無い(overdraw: false)
// テクスチャを使った標準材料
material = new THREE.MeshBasicMaterial({map: texture, overdraw: false });
// 平面の表 ( 300 x 300 / セグメントの数 5 x 5 )
mesh = new THREE.Mesh(new THREE.PlaneGeometry(300, 300, 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});
// 平面の裏 ( 300 x 300 / セグメントの数 5 x 5 )
mesh_r = new THREE.Mesh(new THREE.PlaneGeometry(300, 300, 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 );
// 背景色
renderer.setClearColor( 0x404040 );
// コンテナに、描画オブジェクトの本体を登録
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>
</body>
</html>
|
|
【Three.js : ベーシックの最新記事】
- 2012年04月21日 時点の Three.js の WebGL チェックと 2014年 7月17日(r68) のチェック
- Three.js(r57) : THREE.Texture のプロパティの意味
- できる限りだれでも Three.js を楽しめるように、Three.js の基本コードをできる限り簡単にして、オブジェクトやアニメーション部分をホスティングしてみました
- Three.js では、複数のオブジェクトを一つの Object3D に追加して一括管理します。
- Three.js の名前空間でユーザオブジェクトを作って、Three.js の基本を再確認する
- Three.js(51) でPlane(平面)。但し、ブログで動作するのは Canvas のみ(画像が別ドメインでも動く)。★ Google Chrome ではスクロールバーが効かなくなるのでキーボー..
- THREE.PerspectiveCamera ( 透視法射影カメラ ) の引数
- Three.js : 平面、球面、フォントと来て、次はキューブですね
- Three.js : 日本語フォントの立体表示
- Three.js の球体のテクスチャに透過部分のある画像を使って表示
- Three.js(Canvas) : ２平面(それぞれ裏表としてテクスチャ)、MeshBasicMaterial に overdraw: true をセットする意味と、Texture オブジェクトを ..
