サンプルやソースを見る限り、オリジナルには実装されていないようなのですが、 メソッドとして 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
------------------------------------------------
フォントのデータは、ページを表示した後、開発者ツールで console.dir( _typeface_js.faces.lightbox.normal.normal.glyphs ) とすると確認できます
※ エキスパートモードで表示しています
アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります
