サンプルやソースを見る限り、オリジナルには実装されていないようなのですが、 メソッドとして material の一覧を取得する事ができるのは内部コードで解った ので、実装してみました。 もちろん、もともと持っている機能ですが、単純な形状でしか表からは使えない ようでした。それに、そもそも CanvasRenderer 専用ですし、オリジナルでは Google Chrome と Safari 以外ではテクスチャがまともに貼られ無いので需要が 全くなかったので必要無いと言えば無いのですが、Win8 で Metro(JS) で動作さ せる為の確認事項です 適用前適用後
<div style='margin-left:100px;'>
<input type="button" value="境界線" onclick='toggle_overdraw();'>
<input type="button" value="回転" onclick='toggle_rotation();'>
</div>
<div id="container_three"></div>
<script src="http://winofsql.jp/js/load_three.js"></script>
<script type="text/javascript">
// ***********************************************************
// 回転切り替え
// ***********************************************************
function toggle_rotation() {
rt = !rt;
}
// ***********************************************************
// CanvasRenderer : JSONLoader 用 overdraw 切り替え
// ***********************************************************
function toggle_overdraw() {
od = !od;
var _projector = new THREE.Projector();
var _renderData = _projector.projectScene( scene, camera, true );
var _elements = _renderData.elements;
for ( var e = 0, el = _elements.length; e < el; e++ ) {
element = _elements[ e ];
material_x = element.material;
if ( material_x instanceof THREE.MeshFaceMaterial ) {
material_x = element.faceMaterial;
material_x.overdraw = od;
}
}
}
var od = false;
var rt = false;
var container, stats;
var camera, scene, renderer;
var mesh;
var mouseX = 0, mouseY = 0;
var material;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
init();
animate();
// ***********************************************************
// 初期処理
// ***********************************************************
function init() {
container = document.getElementById( 'container_three' );
scene = new THREE.Scene();
scene.position.y = 150;
camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.set( 0, 200, 650 );
scene.add( camera );
loader = new THREE.JSONLoader();
loader.load('http://winofsql.jp/js/three/data/eyes.js', function ( geometry ) {
material = new THREE.MeshFaceMaterial();
mesh = new THREE.Mesh( geometry, material );
mesh.scale.x = 100;
mesh.scale.y = 100;
mesh.scale.z = 100;
scene.add( mesh );
}, '../js/three/data' );
renderer = new THREE.CanvasRenderer( );
renderer.setSize( 700, 500 );
container.appendChild( renderer.domElement );
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
}
// ***********************************************************
// マウス位置( カメラ位置として利用 )
// ***********************************************************
function onDocumentMouseMove( event ) {
mouseX = ( event.clientX - windowHalfX );
mouseY = ( event.clientY - windowHalfY );
}
// ***********************************************************
// 一定期間の実行の繰り返し
// ***********************************************************
function animate() {
requestAnimationFrame( animate );
render();
}
// ***********************************************************
// 移動データの設定と描画
// ***********************************************************
function render() {
camera.position.x += ( mouseX - camera.position.x ) * 0.05+15;
camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
camera.lookAt( scene.position );
if ( mesh ) {
if ( rt ) {
mesh.rotation.y -= 0.005;
}
}
renderer.render( scene, camera );
}
</script>
タグ：Three.js
|
|
【Three.js & typefaceの最新記事】
- jQuery + Shadowbox.js + Three.js で『画像を蝶のように飛翔させる』デモ表示
- 別ドメインの画像を『テクスチャ』として使った、Three.js(v65) + WebGL キューブアニメーション
- Three.js( Canvas ) デモコード( 背景画像、前景画像、鳥画像変更可 ) : 200のオブジェクトが舞います。
- Three.js + Shadowbox 飛翔する200人の初音ミク
- 最新のThree.js(2012/04/22-r49)は、IEで動かないバグがあります。それと、CanvasRenderer からLambert で テクスチャの処理が削除されました
- Three.js r48 で JSONLoader が Opera で動作しない原因と対処方法
- 動的に typeface.js フォントを適用させる
- 日本語の .ttf をそのまま変換した大きな typeface.js の内容から必要な文字だけを抜き取るツールを作りました( 現在は 切り絵字/水面字/モフ字/青柳隷書しも )
- typeface.js(0.15)で、Operaが正しく動作しない理由
- typeface.js を少し変更して、データに値を追加するとドロップシャドウが実装できるようにしました
- 自作デザインフォントによる、typeface.js での表示テスト
