<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://winofsql.jp/js/three/three69.min.js"></script>
<script type="text/javascript" src="http://winofsql.jp/js/three/renderers/Projector.js"></script>
<script type="text/javascript" src="http://winofsql.jp/js/three/renderers/CanvasRenderer.js"></script>
<div id="three_canvas_container"></div>
<script type="text/javascript">
var WIDTH = 600;
var HEIGHT = 600;
var renderer, scene, camera, stats;
var object;
$("#three_canvas_container")
.css({
width: WIDTH+"px",
height: HEIGHT+"px"
});
init(); // 仕様作成
animate(); // アニメーション開始
// ***********************************
// 描画仕様作成
// ***********************************
function init() {
// 遠近法カメラ作成
camera = new THREE.PerspectiveCamera(
// 視野の上下角度
40,
// カメラビューのアスペクト比
WIDTH / HEIGHT,
// 表示可能な一番近い距離
1,
// 表示可能な一番遠い距離
200
);
// 座標におけるカメラの位置
camera.position.z = 150;
// シーン作成
scene = new THREE.Scene();
// 一辺 50 のキューブの座標を作成
var geometryCube = cube( 50 );
// ラインでキューブを作成
object = new THREE.Line(
geometryCube,
// 点線の仕様を決定
new THREE.LineDashedMaterial( {
color: 0xffaa00,
dashSize: 3,
gapSize: 1,
linewidth: 2
} ),
// 二つの座標をペアとして使用する
THREE.LinePieces
);
// シーンにオブジェクト(ラインで作成したキューブ)を追加
scene.add( object );
// Canvas で描画します
renderer = new THREE.CanvasRenderer( );
// 描画サイズの設定
renderer.setSize( WIDTH, HEIGHT );
// 描画領域の色を設定します
renderer.setClearColor( 0x404040 );
// 描画対象とする three_canvas_container に Three.js の
// 描画システムを実装
var container = $( '#three_canvas_container' )[0];
container.appendChild( renderer.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;
// x 軸で回転
object.rotation.x = 0.25 * time;
// object.rotation.y = 0.25 * time;
// 描画実行
renderer.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 で動作するはずです。ですが、
てっきり、もうボロボロなんだと思ってたので、ある意味感動的な再会をしたような気分です。
当時の PC から比べると高性能にもなっているので、動作も軽快です( 以前はドラッグして動かすと、IE では残像が出てました )
そういえば、IE ではどうなのかな?
試してみよう。
おっと、IE と Firefox は、Flash インストールして無かった・・・。
まあ、たぶん動くんでしょう。
ヒマな時に、もっと使いやすく書き直してみましょうか。見栄えももっと CSS 使ってかっこよくしてみたい気もして来ました。
カスタムパレットツールのほうは、レジストリを使うので今時では無いので見る気もしませんが、ブックマークレットに関しては、ここまで実装したものは世間にも少ないはずなので、再度技術的な切り口から解説付けるのも面白いと思ったりもしています。
でも。
ペンタブも欲しいと今とても思っています。
関連する記事
▼ Google Chrome のデベロッパーツール使う上で、日本語のあるスタイルシートでは最近は必要です
で、右サイドの GenratePress で親テーマに移動します。
▼ すると、やっとヘッダ情報にたどり着きます。
とりあえず、ここに追加スクリプトを入れていけばいいという事です。テンプレートとは関係無いスクリプトなんで PHP のコードとして追加する必要はありません、たぶん。
それで、P 要素はどうするかと言うと
元のテンプレートへ戻ります
このテーマの functions へ移動
▼ ここですね。
このあたりは、さすがにインターネットを調べるとすぐヒットしますが、はたして普通の人がこの理由にすぐたどり着くかどうかは難しいところです。
これで何をするかというと、この IFRAME の中に SCRIPT 要素を document.write して、画面作成します。画面が出来たら、元々の親ページをコントロールする機能を実装します。
▼ ブックマークレット
※ エキスパートモードで表示しています
アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります
