<style type="text/css">
body {
background: url(https://lh4.googleusercontent.com/-qGsOjUoCvyw/T-VZ62iPMSI/AAAAAAAAG5Y/O0NhvMUvm9U/s200/_img.png);
font-size: 30px;
}
span {
color: #ffffff;
font-weight:bold;
}
</style>
<div id="container"></div>
<script type="text/javascript" src="http://homepage2.nifty.com/lightbox/three/three.min56.js"></script>
<script type="text/javascript">
var webgl_flg = true;
if( !( function () { try { return !! window.WebGLRenderingContext && !! document.createElement( 'canvas' ).getContext( 'experimental-webgl' ); } catch( e ) { return false; } } )() ) {
webgl_flg = false;
}
var scene, camera;
var object;
// WebGLRenderer
var renderer
// CanvasRenderer
var renderer2;
var WIDTH = 250,
HEIGHT = 250;
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera( 60, WIDTH / HEIGHT, 1, 200 );
camera.position.z = 150;
scene = new THREE.Scene();
var geometryCube = cube( 50 );
// LineDashedMaterial で必要
geometryCube.computeLineDistances();
object = new THREE.Line( geometryCube, new THREE.LineDashedMaterial( { color: 0xffaa00, dashSize: 3, gapSize: 1, linewidth: 5 } ), THREE.LinePieces );
scene.add( object );
if ( webgl_flg ) {
renderer = new THREE.WebGLRenderer( { clearColor: 0x111111, clearAlpha: 0.8, antialias: true } );
renderer.setSize( WIDTH, HEIGHT );
}
renderer2 = new THREE.CanvasRenderer( );
renderer2.setSize( WIDTH, HEIGHT );
var container = document.getElementById( 'container' );
if ( webgl_flg ) {
container.appendChild( renderer.domElement );
}
container.appendChild( renderer2.domElement );
}
function cube( size ) {
var h = size * 0.5;
var geometry = new THREE.Geometry();
geometry.vertices.push( new THREE.Vector3( -h, -h, -h ) );
geometry.vertices.push( new THREE.Vector3( -h, h, -h ) );
geometry.vertices.push( new THREE.Vector3( -h, h, -h ) );
geometry.vertices.push( new THREE.Vector3( h, h, -h ) );
geometry.vertices.push( new THREE.Vector3( h, h, -h ) );
geometry.vertices.push( new THREE.Vector3( h, -h, -h ) );
geometry.vertices.push( new THREE.Vector3( h, -h, -h ) );
geometry.vertices.push( new THREE.Vector3( -h, -h, -h ) );
geometry.vertices.push( new THREE.Vector3( -h, -h, h ) );
geometry.vertices.push( new THREE.Vector3( -h, h, h ) );
geometry.vertices.push( new THREE.Vector3( -h, h, h ) );
geometry.vertices.push( new THREE.Vector3( h, h, h ) );
geometry.vertices.push( new THREE.Vector3( h, h, h ) );
geometry.vertices.push( new THREE.Vector3( h, -h, h ) );
geometry.vertices.push( new THREE.Vector3( h, -h, h ) );
geometry.vertices.push( new THREE.Vector3( -h, -h, h ) );
geometry.vertices.push( new THREE.Vector3( -h, -h, -h ) );
geometry.vertices.push( new THREE.Vector3( -h, -h, h ) );
geometry.vertices.push( new THREE.Vector3( -h, h, -h ) );
geometry.vertices.push( new THREE.Vector3( -h, h, h ) );
geometry.vertices.push( new THREE.Vector3( h, h, -h ) );
geometry.vertices.push( new THREE.Vector3( h, h, h ) );
geometry.vertices.push( new THREE.Vector3( h, -h, -h ) );
geometry.vertices.push( new THREE.Vector3( h, -h, h ) );
return geometry;
}
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
var time = Date.now() * 0.001;
object.rotation.x = 0.25 * time;
object.rotation.y = 0.25 * time;
if ( webgl_flg ) {
renderer.render( scene, camera );
}
renderer2.render( scene, camera );
}</script>
中央に点線でキューブが回るだけのサンプルですが、LineDashedMaterial の確認だけならこれで十分です。 cube ファンクションで 12 個の 線が作成されていますが、一つの線に Vector3 座標を二つ使って線を引いています。THREE.LinePieces を使っているので、二点のペアをを繋げるので連鎖はしません。デフォルトの THREE.LineStrip を使うと、点が連鎖して描画されるので、一筆書きになります。 このサンプルでは正確に立方体を作成する為に、『二点のペア』を使っているので、同一座標がある事に注意して下さい。 r53 では WebGL、r56 で Canvas ※ WebGL では、 geometryCube.computeLineDistances(); でキューブのデータを完成させる必要があります。また、{ antialias: true } を WebGLRenderer の引数に渡さないと、ラインの表示の乱れが大きいです 更新履歴にそうあります。このサンプルコードは r56 で動作しますし、r53 〜 r55 までなら、WebGLRenderer で動作するはずです。ですが、
( ソースコードはリンク先にあります )
このままでは、どの画像がどこに表示されるのか解りづらいのでこんなのを作りました。
▼ 
( ソースコードはリンク先にあります )
▼ 球なので元画像作るのが大変
ちょっと作るのは違う知識が必要そうなので、オリジナルの画像を使っています。
( 
▼ 実行中のスクリーンショット
飛ばしている画像
こんな感じで以下で表示できます。
この座標は x と z の座標軸で、通常の Three.js 空間で見たときは地面に対して平行な形です。実際の動きのアルゴリズムは良く解りませんのですが、動く際には必ずしも頭の方向が移動方向とは限らないようです。ただ、羽のはばたきは、この座標の２点を上下に動かして表現しています。(その位置の算出方法もまた良くわかりません)。ですから、この Bird オブジェクトのかわりに平面オブシェクトを使い、その上部の二点を同様に動かす事によって、飛翔する表現を自由に変更る事ができます。
この画像をテクスチャとして使って、球オブジェクトを作成して、画面内に複数のオブジェクトを追加して行きます。動作としてはクリックする毎に、その位置に表示されている立方体の手前の表面に球が埋め込まれて行くことになります。
このオブジェクトは、transparent: true が設定されており、PNG 画像が背景透過なので、画面内では口の中が奥まで見えて立方体の中に入った部分は見えたり見えなかったりします( 厳密な仕様は解りません )
※ 立方体側は、opacity: 0.5
画像は同一ドメインで
ご自分で再現する場合、ソースコードそのままでほぼ動作しますが、画像のみ同一ドメインである必要があります。WebGL での仕様だと思われますが、同一ドメインの画像を用意して下さい。( ここの画像をダウンロードして使って下さい )
ページ上の部分エリア用のクリック位置判定
Three.js の殆どのサンプルページはブラウザ上のページを全て使うので必要無いですが、実際の WEB ページでは、スクロールを考慮した DIV の位置よりクリックした位置を正確に計算する必要があります。その為、ちょっと面倒ですが以下のような処理を行っています
LineDashedMaterial と LineBasicMaterial
前者が新しいマテリアルですが、大きく違うのは geometry の computeLineDistances メソッドで、これを実行しないと点線になりません。何故そのような仕様なのかは解りませんが、実装されたばかりの仕様であるせいかもしれません。
参考
※ エキスパートモードで表示しています
アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります
