Treeを表示・操作する

JavascriptでTreeを表示操作するライブラリを探してみる。 なんとなくサンプルが充実している jqTree にしてみた。 このサンプルに必要だったのでFontAwesomeも取り入れてみた。 めんどくさいので避けていたが、そろそろscssを取り入れるべきか。 [Read More]

Node.jsのアップデート

ちょうど組み込まれているv8エンジンのバージョンが3から4に上がる直前にインストールしていたようで、 node.jsのバージョン > node --version v0.12.7 > node -p process.versions.v8 3.28.71.19 だった。 最新版(node-v4.2.3-x64.msi)をインストールしてみる。 node.jsのバージョン > node --version v4.2.3 > node -p process.versions.v8 4.5.103.35 v8 4.5搭載ということでES6の機能がいろいろ使えるぞ。 http://v8project.blogspot.jp/2015/07/v8-45-release.html exp.js let x=1; console.log(x); > node exp.js SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode 最近よく見る”use strict”が要るのか。 exp.js。use strict "use strict"; let x=1; console.log(x); としたらいけた。 class構文も問題なし。typescript使った後だとちょっと機能的に物足りない・・・ class Hoge { // コンストラクタと constructor(name) { this. [Read More]

Three.jsのEditor

Three.js本家のサイトにeditor (beta)というリンクあるのだけどこれ面白いなぁ。 わりといろんなことができそうだし、いまわしの中で流行り出しているSPAとしてとてもよさげだ。 使っている外部ライブラリ いろんなものが入っている。 system.js http://www.javascriptoo.com/System-js System情報取得ライブラリ jszip.js http://stuk.github.io/jszip/ JavascriptでZipを作る。そんなライブラリあるのんか。 codemirror https://codemirror.net/ acorn https://marijnhaverbeke.nl/acorn/ ternjs http://ternjs.net/ sortable https://github.com/RubaXa/Sortable js-signals https://github.com/millermedeiros/js-signals ui.js https://jqueryui.com/ app.js http://code.kik.com/app/3/index.html という感じでいろんなライブラリが組み合わされている。 最近のJavascriptはこんなことになっているのか・・・ entrypointは・・・ index.htmlで初期化が走っていてuiの構築はたぶんこれ。 var editor = new Editor(); var viewport = new Viewport( editor ); document.body.appendChild( viewport.dom ); var player = new Player( editor ); document. [Read More]

Three.jsのBuild

骨入りモデルとかやってみようかと思ったのだけど、その前にThree.jsのソースを見やすい状態で作業したい。 結合前のThree.jsを自前ビルドしながら運用する方法を調べてみる。 build.py, or how to generate a compressed three.js file と本家に書いてある。python使うんか。gulpでやりてぇな。 全部concatしてuglifyしたらいいんじゃないか。 やってみよう。 とりあえずbowerで導入したthree.js関連を削除。 threejs.srcフォルダを作ってthree.jsソースのsrcディレクトリの中身を展開した。 gulp.task('bowerjs', function () { var files = [ './bower_components/jquery/dist/jquery.js', './bower_components/highlightjs/highlight.pack.js', './bower_components/stats.js/build/stats.min.js', './lib/**/*.js', // <-- 中にthree.jsのsrcをコピーした ]; gulp.src(files) .pipe($.plumber({ errorHandler: $.notify.onError('<%= error.message %>') })) .pipe($.debug({ title: 'bowerjs files:' })) .pipe($.sourcemaps.init()) //.pipe($.uglify()) .pipe($.concat('all.min.js')) .pipe($.sourcemaps.write('./', { sourceMappingURL: function (file) { return file.relative + '.map'; } })) .pipe(gulp.dest('build/js')) .pipe(browser.reload({ stream: true })) ; }); これで作ったall.min.jsではエラーが出てだめですね。 単にsrcをconcatするだけではだめだ。本家のドキュメントを読み始める。 /three.js/utils/build/ でビルドできるよって書いてあります。python関係ないみたいだ。 [Read More]

Three.jsのJSONモデルフォーマット

source 外部のJSONに記述されたモデルを読み込む機能がある。 External models in Three.js を見てやってみた。 OnLoad(geometry: THREE.Geometry, materials: THREE.Material[]) { // create a mesh with models geometry and material var material = new THREE.MeshPhongMaterial(materials[0]); var mesh = new THREE.Mesh( geometry, material ); mesh.rotation.y = -Math.PI / 5; this.scene.add(mesh); this.Render(); } OnProgress(event: any) { console.log('OnProgress: ', event); } OnError(event: any) { console.log('OnError: ', event); } AddModelFromJson(path: string) { var loader = new THREE.JSONLoader(); // init the loader util // init loading loader. [Read More]

Three.jsにマウスによる視点操作を入れる

source 今回は、TrackballControlsを導入します。 TrackballControlsはThree.jsのライブラリ内に含まれるのではなくexamples扱いなので、 直接コードを入手。 使い方は、TrackballControlsのソースを見ると 以下のようにするらしい。 controls = new THREE.TrackballControls( camera ); controls.rotateSpeed = 1.0; controls.zoomSpeed = 1.2; controls.panSpeed = 0.8; controls.noZoom = false; controls.noPan = false; controls.staticMoving = true; controls.dynamicDampingFactor = 0.3; controls.keys = [ 65, 83, 68 ]; controls.addEventListener( 'change', render ); もうひとつ更新用に以下のコードも必要。 function animate() { requestAnimationFrame( animate ); controls.update(); } やってみよう。 ベースのレンダリングシーン シーンに適当にキューブを描画するコード。 前回の記事をほぼ流用だけどいくつか変更点がある。 namespaceでかこって名前衝突から防衛 CreateCameraを独立 キューブがアニメーションする部分をオミット threejs_02.ts /// <reference path='. [Read More]

TypeScriptでThree.jsことはじめ

source TypeScriptを学び始めた目的のひとつであるThree.jsをようやくはじめた。 「Node.jsとSocket.IOで連結してリアルタイムにシーンをアニメーションするっ」とか 遠大な構想だったのだが小さいところから始めよう。 hello world的な 本家のgetting started htmlにスクリプトを追加。 <script src="threejs_01.js"></script> threejs_01.js var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(75 , window.innerWidth / window.innerHeight , 0.1, 1000); var renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); var geometry = new THREE.BoxGeometry(1, 1, 1); var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); var cube = new THREE.Mesh(geometry, material); scene.add(cube); camera.position.z = 5; var render = function() { requestAnimationFrame(render); cube. [Read More]

グリッドと軸と光源とFPS表示を入れる

source シーンを強化してみる。 軸 先人が記事を残してくれていたので楽ちん。 Three.js AxisHelper //軸の長さ1000 var axis = new THREE.AxisHelper(1000); //sceneに追加 this.scene.add(axis); グリッド Three.js GridHelper //GridHelper(大きさ, 1マスの大きさ) var grid = new THREE.GridHelper(100, 10); //シーンオブジェクトに追加 this.scene.add(grid); 光源 ライトを追加して、マテリアルを光に反応するタイプに付け替える。 // lights var directionalLight = new THREE.DirectionalLight(0xffffff); directionalLight.position.set(0, 0.7, 0.7); this.scene.add(directionalLight); // materialを交換 //var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); var material = new THREE.MeshPhongMaterial({ color: 0xff0000 }); FPS状態表示 WebGLのデモでよく見かけるFPS表示を入れてみる。 https://github.com/mrdoob/stats.js ライブラリと定義をインストール。 > bower install stats. [Read More]

MongoDBでCRUD

“シングルページWebアプリケーション”に説明されている mongodbをバックエンドに、node.js + expressをフロントエンドにする構成のおさらい。 MongoDB <-> node.js Express <-> Browser グローバルなnpmパッケージ > npm install -g gulp typescript tsd bower Windowsの場合、 %USERPROFILE%\AppData\Roaming\npm にインストールされるのでパスを通しておく。 Expressの準備 app.js > mkdir mongocrud > cd mongocrud mongocrud> npm init -y mongocrud> npm install express --save // app.js var http=require('http'); var express=require('express'); var port=process.env.port || 3000; var app=express(); var server=http.createServer(app); app.get('/', function(request, response){ response.send('Hello Express'); }); server.listen(port); 起動 > node app.js http://localhost:3000 で動作を確認する。 [Read More]

Jadeを入れてみる

練習用に入手してきた”HTML5/CSS3 モダンコーディング”を写経しながらjadeを取り入れてみる。 extendでlayoutを共有したかったのでejsからjadeに取り換えてみた。 sassも取り入れようかと思ったが思いとどまった。 どんどん拡大・拡散していくgulp環境なので控えめにしないと手に負えなくなりそうな感じだ。 gulp向けにjade適用plugin(ejs版の改造)を作ってみた。 既にそういうプラグインも存在していそうであるが、 このくらいなら自作した方が早かったり。 jade-applyer.js var through = require('through2'); var gutil = require('gulp-util'); var fs = require('fs'); var jade = require('jade'); module.exports = function (options, map) { options = options || {}; if (!options.filename) { throw new gutil.PluginError('jade-applyer', '`filename` required'); } options.pretty = true; map = map || {}; return through.obj(function (file, enc, cb) { if (file.isStream()) { cb(new gutil.PluginError('jade-applyer', 'Streaming not supported')); return; } try { //console. [Read More]