現在多くのグラフィックツールでベジェ曲線が描画方法のひとつとしてスタンダードどなっています。

私自身20年以上もこの曲線と付き合ってきましたが、初めて目にしたときの驚きは忘れません。(アルダス社の『FreeHand』でした。)

情報も無い時代なので、ベジェ曲線を使いこなすためにポストスクリプト言語の習得を目指して本を読んだり、『こんなもので絵が描けるか!!』と嘆いては無理やり使う日々が続きました。

きっとベジェ曲線の考案者もこの曲線を使って、絵を自由に描くシーンは想定していなかった思います。

学校でもベジェ曲線を自由に使いこなすためには『目から血が出るほど繰り返し描かなければならない!』と言っていたのですが、時代は21世紀です。

ツールのインターフェースは変わっていませんが少しでも簡単に初心者がこのツールを習得できないかと考え、今回は『Illustrator初心者向け、ベジェ曲線を描くときのイメージトレーニング』と銘打って記事を書きました。

どんな分野でもそうですが、“できる人”はその事を行うイメージやリズムを理解している人です。

ベジェ曲線の仕組みや練習方法を詳しく紹介した良質のサイトは数多くありますので、ここでは『イメージ』を伝えることで、少しでも習得の糧になればと思います。

是非皆さんも私のイメージを理解することによって、自分自身の描画イメージを見つけ出して下さい。



覚える固有名詞

ベジェ曲線の描画で覚える固有名詞は以下の3つだけです。
これらは描画するためのコントローラーで実際にイラストとして表示、プリントされるものではありません。

  1. アンカーポイント
  2. 方向線
  3. 方向点


小さいので拡大してみました。



描画ルール

  1. 直線を描くためにはクリックするだけ
  2. 曲線を描くにはプレスして方向線を出すだけ
 

解りにくいので、動画にしてみました。
直線の場合。

曲線の場合。



カーブを描く上で何が難しいか

基本的なルールは非常に簡単です。
それでは一体何が初心者にとって難しいのか? ポイントは以下の3点です。

  1. カーブのどこに何個アンカーポイントを打つか?
  2. 方向線はどちらの方向に伸ばすか?
  3. 方向線の長さはどの程度か?

答え

  1. カーブ上なら何個打ってもOKです。
    アンカーポイントは必ず線上に打ちます。
    個数は何個でもOKですが、少ないほどカーブが綺麗に描けますので(描きやすいので)数を少なくするように心がけてください。
  2. 方向線の方向はカーブの道なりに伸ばす
    方向線の方向を右や左に迷う必要はありません。
    基本は常に道なり(カーブに沿って)です。
  3. 方向線の長さは手前や次の方向線とクロスしないように
    方向線の長さはカーブに与える強さを決めます。方向線の方向に引っ張っているようなイメージです。
    上記の1と2を基本とすれば、方向線の長さは自ずと決まります。ただ、方向線をクロスさせるような描画は少ないでしょう。

最後に

  1. 後で修正することを念頭にカーブを描いてください。
    カーブの描画は一度でパーフェクトに描けるものではありません。
    ベジェ曲線の描画に慣れていない人は次のアンカーポイントから出る方向線だけで線を調整しようとしますが、実際には2つ後の方向線を調整してから、一つ前の方向線を調整し直すなどの操作はごく当たり前の操作です。


実際のイメージトレーニング

 只今加筆中です。

Adobe Illustrator CC|12か月版|オンラインコード版

6mmの超薄型ベゼル、できれば3台並べたいデル24型モニタS2415H!

今回紹介するのは私も使っているデル24型モニタS2415Hです。

デルの製品は以前から利用させて頂いていましたが、超薄型べセルの24型モニタS2415Hを暫く利用し、やはりベゼルの薄いのはGOOD!との報告です。

2014年に発売されたモニタですが、とりあえず購入のポイントはベゼルの薄さと24型であることのみでした!

※23.8インチフルHD 1,920 x 1,080、基本的にインチ=型で24型として選んでいます。

Dell ディスプレイ モニター S2415H 23.8インチ/ フルHD/IPS光沢/6ms/VGA,HDMI/スピーカ内蔵/フレームレス/3年間保証

特徴は何といってもベゼルの薄さ! 6.05 mm!

以前からモニタを何台か並べてはクリエイティブワークに精進してまいりましたが、前回使っていたDELLのモニタが古くなったので、今回は24型とベゼルの薄さのみを基準に探してみました。

超薄型ベゼルモニタとしては少し高いDELLのU2417H 24やLGの24MP88HV-Sもありますが、DELL好きと(最近はHPも好きですが、)2台合わせて5万円以下を目指していた私の目に留まったのがS2415Hてす。

ベゼルの薄さはカタログ値で6.05 mm。

 こんなことや、こんなこともしてみたいのですが、今は並べるだけです。

 

我が家のモニタを撮影しました 

下部はさすがに6.05mmとはいきませんが、およそ17mm程度です。

 

 

Windowsのパノラマ壁紙も映えます。

問題点としてはベゼルが薄いので、このように私のお気に入りLogicoolのカメラを上部に設置すると画面の隠れる部分が発生します。

モニタは大型かそれとも複数台か?!

私の個人的な使用目的からすれば、1台の横長モニタが良いのですが、価格的には現実的ではないので、べセルの薄いDELLのS2415Hはコストパフォーマンス的にもベストチョイスでした。

てきればグラフィックボードを入手してモニタ3台計画を実行に移したいところです。

例えばPhotoshopやillustratorでは描画のアートワーク用に2台を、3台目にコントロールパネルやツールを配置したり、AfterEffecsでは2台にタイムラインやプレビューウィンドウを、3台目にプロジェクトやエフェクトパネルをといった感じです。

大型モニタ一台よりは複数台の方が良いかな。。

以上、デル24型モニタ - S2415Hでした。

カタログデータはDELLのサイトをご覧下さい。

 

こちらは同じく6.05mmベゼルのDell ディスプレイ モニター U2414H 23.8インチ/フルHD/IPS非光沢/8ms

Fox Render Farmはアジア最大級の3Dレンダーファームです。

 

やるねイーフロンティア! 最後まで頼むよ。

以前よりこの分野のサービスは知っており、利用環境を整えるために試用を進めていましたが、今年から民事再生中のイーフロンティアが国内サービスの代理店になったようです。

http://www.e-frontier.co.jp/corporate/press/2016/20160203a.html

個人的には『Shade』、『Vue』、『Poser』、『 ArtRage』など様々なソフトで目にする会社ですが、『唾をつけるのは早いけど、しっかり面倒見てよ。』といった印象が強い会社ですね。

Fox Render Farmのサービスも大丈夫なのでしょうか。(このあたりは想像でしかありません。。)

サイトのごく一部は日本語化されていますが、サービス全てを理解して使用できるレベルでは無かったです。

英語の苦手の私ですが英語のページを見ながら、ShenzhenのRAYVISION(レイビジョン)」社担当と直接メールした方が早い気がします。

実際、時差は1時間ですし、返信も素早く頂けますし、エラーが出た時などはメールで知らせてくれます。

私の場合も画面では解らなかったのですが、Vueのファイルをレンダリングしょうと思ってポストしていたのですが、バージョン違いで出来ない旨の報告をメールで頂きました。

 

頑張れニッポン!

技術大国日本が叫ばれ『本当はすごい日本』的な右寄り大好き人がすがっている日本像がありますが、国内に満足したレンダーファームすら存在しないことでも国内ソフト産業の疲弊と将来性の無さを感じます。

個人的にはコスモポリタン(死語?)な私なので、ファイルの転送時間を無視すればレンダーファームが中国で稼働していようが、月の裏側で稼働していようが構わないのですが、日本人的な私サイドとすれば頑張ってくれよといったところも本音です。

 

基本的な使用方法は、

アカウントを作成して、クライアントソフトをローカルのコンピュータに設定し、クライアントソフトでファイルのアップロードと管理を行うと言った感じです。

サイト上の自分のアカウントではレンダリングジョブの履歴管理や使用料のチャージが可能です。

クライアントソフトにはMaya、3ds Max専用のFoxRenderfarm Rendering Clientかその他のソフト(BrenderやVue等)対応のRAYVISION syncが用意されています。

 先ずは以下にFoxRenderfarm Rendering Clienの画面スナップショットのみをアップ致します。(もし時間があれば、説明はまたの機会と言うことでご容赦を。)

 

基本的に『データ解析』のタブが選択されているウィンドウにファイルをドラッグ&ドロップするだけです。

後は自動的にファイル解析を行いレンダリングされた画像が指定のローカルにダウンロードされます。

 

『データ解析』画面にMayaファイルをドラッグ&ドロップしたところ。

 

任意の名前で作成していたプロジェクト、作成したMayaのバージョン、使用しているプラグインを指定します。

 

ファイルがリストされ解析が始まります。

 

以下は解析が終了し、エラーが見つかった状態の表示です。

 

たとえエラーが出ても、使用していないテクスチャへのリンク切れなどは無視してもOKです。

※致命的なエラーは警告を無視して送信はできません。

 

ファイル『送信』をクリックするとレンダリングの設定確認画面が表示されます。

各項目を設定して、送信ボタンを押します。

 

プロセスは『アップロード』に移り、プログレスバーが表示されます。

 

アップロードされたファイルはレンダリングが始まります。

割り当てられたコア、回線の状況等でレンダリングの始まる時間は予測できません。。

ステータスがStartになり、完了/失敗/実行中/待機 の表示が順調に消化されれば問題ありません。

アニメーションなどの連番ファイルのレンダリングでは失敗する画像が発生する場合もあります。

失敗レンダリングに関しては課金されず後に再レンダリングすることが可能です。

 

レンダリング済のファイルは“勝手に”指定場所にダウンロードされます。

もちろんPCをONにしておく必要がありますので、会社での活用は例えば社内ネットワークサーバーをダウンロード場所として指定すれば、レンダリングジョブをポスト後自分のPCは自由に停止することができます。

 

 

10年程前からWEB界で使われ始めたCMS。(コンテンツマネージメントシステム)

様々なCMSが生まれては消えていきました。

以前は業態やサイトのニーズに応じてCMSの種類も多く乱立し、私もその昔CMSに関する本なども書きましたが、現在ではWordPress一人勝ちの様相です。

 アマゾンのWordPress関連本

結局CMS本体の機能を専門化し個性を出すのではなく、モジュールやプラグインにより機能追加を行う方が簡単なためでもあります。

私の利用しているJoomla!やWordPressはエクステンションやプラグインの数が多くサイトの様々なニーズに対応可能です。

それでは時代に追いつかなくなったCMSはどうしましょうか?

migration(移行、移転)です。

今までの主なmigration方法は、

  1. 『専用エクステンションの利用』
  2. 『データベースの記事の移植』
  3. 『手作業による記事の移し替え』

あたりでした。

1の方法で上手くいけば有難いのですが実際には多くの場合、2、3の併用となります。

今回見つけたサイトはその名も『CMS2CMS』

何と素敵な名前でしょう。

全てが上手くいきそうです。

トップページは極めてシンプルです。

 

Fromを押すと懐かしいCMSの数々。

 

Toを押すと現在主流のCMS。

残念ながらこちらのFromとToボタンはSee what you can migrateへつながるデモンストレーション。

 

こちらがStart Free Demoを押したmigrationのお試し画面。

どのCMSからどのCMSへmigrationするか設定。

お試しなので、このあとmigrationされた記事が表示される。こんな感じでできますよ、って感じ。

 

実際の料金見積もり画面。https://cms2cms.com/pricing/

試しにNucleusからWordPressへ250ページ、10ユーザー、100コメントのmigration料金を出してみました。

うんっ。十分満足できる値段です。

 

 

 

と、言うことで色々調べていると、ドンピシャな情報が以下のサイトで見つかった。

プログラミング専門のQ&Aサイトteratailプログラマのための技術情報共有サービスのQiitaにも有用な情報がアップされている。

しかしながら、どうも、上手くいかない。。

仕方なく“Real-Time Find and Replace”というシンプルかつ強力なプラグインに頼ることにした。

要はページ内のhttp://https://に置換してしまう簡単方法だ。

ちょっと外部のリンクに対しては心配だが、正しい設定が見つかるまで、こいつの力を借りよう。

 

MayaでBackburnerを利用するための設定

Backburnerは単体で以下のサイト等から無料入手可能です。

https://knowledge.autodesk.com/support/3ds-max/downloads/caas/downloads/content/backburner-2016-windows-version-for-3ds-max-2016.html

3Dソフトウェアのスタンダード3D'sMAX、MayaのAutodesk

3D'sMAXの他MayaやAfterEffectsなどのレンダリングサーバーを構築可能です。

ここではローカルのコンピュータ(Mayaを使っているPC)での設定を行います。

リモートでの複数サーバーを設置するレンダーファームの構築は、先ずローカルコンピュータでの動作確認を行ってから試みましょう。

Backburnerは3つのソフトウエアから構成されています。

  • Backburner Manager
    • レンダリングジョブの割り振り、監視を行うソフトです。一つのネットワークレンダリングサーバー群で一つ立ち上げる必要があります。
  • Backburner Server
    • レンダリングを実行するためのサーバーソフトです。立ち上げたサーバーが参照するマネージャーの監視下でレンダリングワークを行います。
  • Backburner Monitor
    • レンダリングサーバーの実行状態をモニターするソフトです。レンダリング作業に必要ありませんが、実行状態確認のために適宜起動します。

 

出力先の共有設定

ローカルでは問題になりませんが、複数のユーザーが使用するネットワークレンダリングの場合は共有設定に留意し、設定を行ってください。

 

 Backburner Managerの設定

 Backburner Managerの起動

 

Backburner Server の設定

 

 

 

Backburner Serverの接続先マネージャーのIPアドレス

以下はローカル⇒ローカルなので、localhostを入力

 

Backburner Monitorの起動

 

 

Mayaからテストジョブレンダリング

ファイルの保存場所

ネットワークレンダリングを行うにはレンダリングサーバーから参照可能なネットワークサーバーにファイルを保存する必要がある。

 

以下のエラーメッセージが出たら、ファイルの保存場所に問題があるかもしれない。

Cmdjob adapter: Process exit abnormally,Exit code is 211

 

 

レンダリング画像の格納場所

 

ログファイルの所在

C:\Users\ユーザー名\AppData\Local\backburner

  • Managerログ : backburner.log
  • Serverログ : backburnerServer.log

 

C:\Program Files\Autodesk\Maya2016\bin\Render

 

息子のZenFone 5 (A501CG)はたまに強制終了されたりSIMの設定が消えて接続できなくなっていたりする。

ASUSのサポートへ連絡を入れてみると、返信は思ったより素早く以下の内容のメールが返信されてきた。

 

 

  

もちろん、これらのことは全て試していたので、その旨と次に強制終了が頻発することを再度書いて送ると以下の返信があった。

一度目の問い合わせではSIMの設定解除が発生ることだけを伝えていた。

 

なるほど。台湾か。。。

そこで購入したAmazonのショップへ連絡を入れてみた。

そうすると、こちらも直ぐに返事があり、メールの内容は “EMSで台湾に送ってくれれば、メーカーに修理依頼を出す・・”とのこと。

そうか、台湾か。。。

仕方無くOSのアップグレードを試みることにした。

OTAではアップグレードできなかったので、マニュアルアップデートを試みることにした。

How To Update Asus Zenfone 5 To Android Lollipop

ここからが本題。

元のバージョンはAndroid 4.4.2だったので、これをAndroid 5.0(Lollipop)にアップデートする。

ビルド番号は ASUS_T00J_TW_user_2.22.40.54_ 20150527_44だった。

ファームウェアを配布している以下のページで調べてみると、

http://www.asus.com/in/Phone/ZenFone_5_A501CG/HelpDesk_Download/

どのファームウェアを選べば良いかは同じSKUで判断しなくてはならない。

例えば私の息子のデバイスはTWなので、上記のダウンロードページのSKUがTWの最新のファームウェアを探す。

注意書を読むと2.22.40.54から3.24.40.78へのバージョンアップは一気に可能らしい。

そこで最新の日付の付いたファームウェアを探し、ダウンロードした。

今現在の最新バージョンは Version TW_3.24.40.78 

ダウンロードリンクはhttp://dlcdnet.asus.com/pub/ASUS/ZenFone/A500CG/UL-ASUS_T00F-TW-3.24.40.78-user.zip だ。

インストール&アップデートはPCから Zenfoneへzipファイルを転送し(ルートディレクトリへ)、Zenfoneを再起動すれば良い。

1)電源を切ります。
2)音量ボタン+を押しながら電源を入れます。

後は、画面に出てくる“アップデートしますか?”等のメッセージ読みながら進めて行くだけだ。

その後

結局、Lollipop(Android5)には問題無くアップグレードできた。

しかし、強制終了問題は解消したものの、SIMの切断現象は解消しなかった。

仕方なく販売店(台湾)へEMSで送り、、今は帰ってくるのを待っている。(´;ω;`)ウッ…

 

Nokia生活は続く。

以前、“『無線設備のスプリアス発射強度の許容値に係る技術基準の改正』により、私の愛するNokia X02NKが2015年12月1日で使用てきなくなる件について。”という記事を書いたが、その後日談。

最近ではSoftbankからの『あなたのNokiaは12月31日で使えなくなります・・・』メールが頻繁にくるようになり、愛するNokia N95もついに終わりの時を迎えるかと思われた。

この10年、702NKから X02NKとNokiaユーザーだったが、しかし、新たにLumia 535 Dual SIMを既に手に入れていたので、今後もNokiaユーザーは続く。(実際にはLumia 535 はMicrosoft販売なのだが )

X02NKの最後通牒の関係もあったので、、Vodaphone時代からのSIMをmictoSimにSIMカットしLumia 535に差し、快適に通話を楽しんでいた。

ちなみにLumia 535はWindows Phoneである。

このOS中々使いやすく良く、iOSやAndroidよりも完成度が高いかも知れない。今、大のお気に入りのモバイルフォンである。

操作していて楽しいOSは久々だ。

    

ひそかに忍び寄るパケ死

快適かに思えた新たなNokiaライフに突然の暗雲が訪れた。

私自信、実は携帯でインターネットアクセスを行ったことが殆ど無かった。

SNSの使用頻度が上がってからは早期にSIMフリー機を手に入れていたので、携帯の契約はホワイトプランのみと言った至ってシンプルなものである。

私の携帯ではWEBにアクセスすることも、メールを送受信することも出来ない。

つまり、私の契約ではLumia 535はインターネットにアクセスできないものと思っていたのだ。

Lumia 535にSIMを挿して次の日の昼頃、突然Lumiaが何かを受信した。

『・・・?』 若干不思議に思ったが仕事中でもあったので、気にも留めずにいると次はSMSの受信だ。

ちなみにSMSの使用頻度は年齢が高くなるにつれて上昇する。

このことが、携帯電話の使用を止められない原因の一つでもある。

もしかすると、SNSとSMSのユーザー数は反比例の関係にあるのかも知れない。

有難い!? パケット使用料のお知らせメール 

届いたSMSはSoftbankからのパケット使用に関するお知らせメールだった。

内容は“・・・ご利用額が20000円を超えました。”

??????!!!  私は驚き、同時に目にも止まらない速さで携帯の電源を切った。

もちろん、念のためにバッテリーを抜くことも忘れなかった。

 『何だ!?』理由は解らないが、携帯がデータ通信を行っていることは明らかだった。

直ぐに理由を確認するために別のIP電話でソフトバンクのコールセンターに電話した。

残念ながら、例の如くコールセンターは無限のお待ち下さい状態だった。

仕方なくその日の連絡は諦めた。

コモンケース?!

次の日は土曜日。

早い時間からゆったりとした気分でコールセンターに電話した。

暫くするとオペレーターの女性が例の如く、親切な声で私の問題に対応した。

もちろん彼女がどんなに親切でも、優しく対応してくれても、私の問題を解決できるはずが無い。

私の望みは単に請求金額からパケット使用料を免除してもらうだけのことなのだから。

暫く(15分あまりか)押し問答が続いた後、ようやく上司に電話を取り次いでもらえることになった。

20分後に約束通り再度上司(上席)から電話をもらうと、彼はあっさりと今回のパケット料金に関しては免除させて頂くと言った。

若干拍子抜けはしたものの、願ったとおりの結末だ。

しかし、対応の速さから考えてこれはコモンケースなのか?

今回のようなパケットに関するパケ死問題とそのことへの対応はよくあることなのかも知れない。

現実的でないパケット料金の設定

今まで縁の無いパケット費用だったが、今回調べてみると様々な事例が見られた。

そして、そのパケ死を対応する策も各社とっている様子である。

しかし本来、「パットし放題」等の定額設定を行っていない場合のパケット額が、このように現実とはかけ離れた価格設定になっていること自体がおかしい。

文句の言わない者にはパケ死がまっているのだろうか。

この意味の無い価格設定は違法ではないだろうか。

最後に設定を。

私の最大のミスは端末の『モバイルデータ通信』の設定を確認していなかったことにある。

『モバイルデータ通信』が許可されていれば、サービスの設定に関わらずアプリのリクエストによってキャリアSIMはデータ通信を行う。

もちろん定額設定などには入っていないためにパケット料金は天井知らずだ。

もしインストールしているgmailや地図アプリ、GPSアプリがバックグラウンドでデータ通信を始めると一瞬にして大量のデータが流れる。

何しろ、ソフトバンクの場合パケット割引ナシの契約で0.2円/1パケットなので、例えば100MBのデータ転送が発生した場合、パケット料金は16万円以上だ。

100MBなんて、、今のリッチデータの時代、一日もかからない。かも知れない。。

今後SIMフリー化により様々な端末が様々なキャリアのSIMによって利用されるだろう。

その場合、今回の私のケースのようなヌケた事故は多発するかも知れない。

対応策としてはスマホ端末にキャリアのSIMをさして、尚且つデータ通信をしない場合は端末の『モバイルデータ通信』をOFFにすることだ。

wifi環境下ではのデータ通信可能なように許可しておく。

また、デュアルSIM端末等で格安SIMとキャリアSIMの二枚挿しをしている場合は格安SIMには『モバイルデータ通信』を許可し、キャリアSIM側の『モバイルデータ通信』機能はOFFにしなければならない。

重ねて、万が一の為には携帯サービスで『データ転送量の通知サービス』や『一定量以上のデータ通信発生時のサービス停止』等を申し込んでおくのも良いかも知れない。

どちらにしても、何よりも精神衛生に悪い『パケ死』に見舞われないように気を付けよう。

I created a theme for Blender(2.75) based on Elysium.

The purposes are below.

  1. look cool
  2. easy to see
  3. rich & gorgeous

Surely, This is the first time to make for my Blender's theme. It will be upgraded in the future.
It's freely! Download & test it! 

I caught a news of Blender 2.76 Release Candidate just now. 
See details. http://wiki.blender.org/index.php/Dev:Ref/Release_Notes/2.76
I'll try it.

Download highland.xml

How to cut a normal SIM  into a micro SIM ?
It's easy to cut ,but carefully.

  1.  I have three SIMs that two normal SIMs and a micro SIM.
    A right side SIM is not used now.
    So it was chosen as a test cutting SIM.

    Today, I want to cut into a micro SIM is the middle SIM.(It's a old Nokia's SIM)

 

  1. Practice is very important every time.
    You can't make a mistake.
    You'll need followings.
    A very sharp knife, masking tape, double sided tape, a ruler, an adapter of micro SIM.
  2. You have to fix the SIM on the cutting mat by double sided tape.
  3. Mark the some point on the SIM by micro SIM adapter.

 

In the end, Cut slowly, carefully and take it easy.

See! Pice of cake!

HTML5でブラウザ上で3Dを表示処理するAPI。
WebGLに関に関して若干の覚え書き。

この手の技術を利用する場合、単純にどこで何を入手するか、簡単な作業フローはどのようなものなのかが解らずに単純なところで立ち止まってしまう。
今回もWebGLとthree.js、Away3D TypeScript、Brender等利用環境に関する情報が直ぐに(10分程度で)手に入らなかったのでそのあたりのメモ。
先ずHTML5で3Dを扱うにはWebGLを利用するわけだが、直接利用するよりもより簡易に便利なフレームワークが幾つか用意されている。

Blender

今現在の最新はBlender 2.74 、ダウンロードはこちらの公式サイトでOK
ちなみにこのBlender、オープンソースのフリーウェアでありながら、Killer Mayaアプリとして有望視(私見)されている。
積極的なアップデートを重ね、その進化は早くつい最近までは直立猿人とみられていたが、近年のバージョンではホモ・サピエンスと何ら見分けがつかないレベルのアプリへと姿を変えた。
今後の進化が楽しみである。

three.js

ダウンロードはhttps://github.com/mrdoob/three.js
色々とファイルがアップされているが、動作に必要なスクリプトはhttps://github.com/mrdoob/three.js/tree/master/build にあるthree.min.jsだけでOK。
JSファイルなので、使用方法は、head内に<script src="/three.min.js"></script>でOK。

Blender 用JSONエクスポートプラグイン

githubに行ったついでにBlender用のJSONエクスポートプラグインを入手。
https://github.com/mrdoob/three.js/tree/master/utils/exporters のBlenderフォルダ内のthree.js/utils/exporters/blender/addons/ 以下の io_three フォルダをダウンロードしてC:\Program Files\Blender Foundation\Blender\2.74\scripts\addons にコピー。

それと、、three.js/examples/js/shaders/ 以下にはHorizontalBlurShader.js、VerticalBlurShader.js など様々なシェーダーがあり、three.js/examples/js/controls/にはOrbitControls.jsなどの超便利ライブラリがアップされている。

基本構成

以下はthree.min.js(Three.js本体)、OrbitControls.js(マウスでマウスでビューを回転、拡縮できるライブラリ)、my3D.js(ユーザー作成のスクリプト) を読み込み、ページがロードされると、my3D.js 内のmainを実行しているシンプルなHTML。
注意: 以下のスクリプトは説明のために簡略化しています。コピー&ペーストで作成しても動作しません。

<html>
    <head>
        <title>Three.js app</title>
	<style>
		body { margin: 0; }
		canvas { width: 100%; height: 100% ; background-color:#000;}
	</style>
	<script src="/three.min.js"></script>
	<script src="/OrbitControls.js"></script>
	<script src="/my3D.js"></script>
    </head>
    <body>
	<script>
		window.addEventListener( 'DOMContentLoaded', main, false );
	</script>
    </body>
</html>


以下は my3D.jsスクリプト。
必要な処理はこちらに記述。
(もちろん、HTML内にJavascriptを直接記述してもOK)

以下のスクリプトではBlenderで作成したモデルをJSONファイルとして保存し、THREE.JSONLoader()で読み込んで表示しています。
Txtureもマッピングしていますが、マッピングするためにはBlenderでUVを作成しておく必要があります。

またJSONオブジェクト以外にTHREE.CylinderGeometry( 5, 5, 4, 36)でシリンダー形状のオブジェクトを作成し、こちらへもマッピングを行っています。

OrbitControls.jsは読み込むだけでビューのマウスによる操作が可能となる便利なライブラリです。
読み込み後の有効化は簡単で、var controls = new THREE.OrbitControls(camera); 、controls.update(); を記述するだけです。

var main = function () {
/************/
/* my3D  */	
/*************/
/*Init*/
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(35, window.innerWidth/window.innerHeight, 0.1, 1000);
var controls = new THREE.OrbitControls(camera);    

renderer = new THREE.WebGLRenderer( { alpha: true, antialias: true } )
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor( 0xffffff, 0 );
document.body.appendChild(renderer.domElement);

//Texture for JSON Model
	var texture4  = new THREE.ImageUtils.loadTexture('panel.png');	
	texture4.wrapS = THREE.RepeatWrapping;
	texture4.wrapT = THREE.RepeatWrapping;
	texture4.repeat.set( 1, 1 );
// load JSON model
var loader = new THREE.JSONLoader();
loader.load( 'panel1.json', function ( geometry ) {
	model = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial({
	map: texture4,
    	}) );
	model.position.z = 5;
	model.scale.set(40,36,38);
	scene.add( model );
} );


/*Light*/
/*Front Light*/
var light = new THREE.DirectionalLight(0xffffff,1.2);
light.position.set(0, 0, 5).normalize();
scene.add( light );

var light = new THREE.AmbientLight(0x111111);
scene.add( light );

/*Load Texture*/
var texture1  = new THREE.ImageUtils.loadTexture('reel.png');
texture1.wrapS = THREE.RepeatWrapping;
texture1.wrapT = THREE.RepeatWrapping;
texture1.repeat.set( 1, 1 );

/*Obj*/
/*reel*/
var geometry1 = new THREE.CylinderGeometry( 5, 5, 4, 36);
var material1 = new THREE.MeshPhongMaterial( {map: texture1});
var reel = new THREE.Mesh( geometry1, material1 );

camera.position.z = 30;	
scene.add( reel );
	reel.position.x = -4.1;
	reel.rotation.z = 1.57;

var render = function () {
	var deg1 = 0.5;
	requestAnimationFrame(render);
	reel.rotation.x += deg1*Math.PI*2/180 ;	

controls.update();   
renderer.render(scene, camera);
};
render();

}