JOB STAGE
デザイナー・クリエイター専門の求人情報サイト ジョブステージ

vol.1 まずは簡単なサンプルを作ろう!|three.js 入門|基本から解説!

「three.js」に興味あるWebデザイナーさん、コーダーさん、エンジニアさんに向けて、「three.js 入門 基本から解説!」を開始します!通信速度が理論値で100倍も速くなると言われる、第5世代モバイル通信「5G」。5G時代にはWebサイトの作り方も大きく変わっていくと予想されています。

3DCGライブラリと一般的に注目されている、three.js。Web業界のクライアントワークで3DでWebサイトを構築する案件は多くありません。しかしながら、画像、動画に今までにはできなかったエフェクト、アニメーションを実装できることに注目を浴び、世界に目をむければ「three.js」を使用したエフェクト、アニメーションを実装したウェブサイトが、どんどん公開されはじめています。

そこでJob Stageは「three.js」入門編を皆様にむけて展開していきます。
初回のvol.1は、「three.js」の基本中の基本を解説!
興味ある方は是非ご一読ください。

three.js公式サイト見たことない方はこちらから公式サイトをご覧ください。

最初にサンプルをご覧ください!

今回のサンプルを最初に、こちらからご覧ください。

グリーン色が一面に表示されています。ちなみにJob StageのロゴはHTML上でレイアウトしているので、three.jsには関係ありません。

この設定方法を今回は理解していきましょう。グリーン色を全面に表示するだけでも今までのHTML、CSSとは全く違ったコードの書き方になります。基本中の基本なので、必ず理解してくださいね。

three.jsの基本的な設定

まず、three.jsを読み込みます。(cdnjsにアップされています。)cdnjsはこちらから。HTML上で読み込むだけで設定完了です。jQueryもTweenMaxも現段階では必要ありません。

次に、基本的な流れを理解しましょう。
1. ステージを作成
2. カメラを作成
3. レンダラーを作成
この流れです。

1.ステージを作成

最初に、ステージを作成する必要があります。IllustratorやPhotoshopに例えると「新規ドキュメント」の作成にあたります。この3D空間のステージにオブジェクトをレイアウトしていくのです。

2.カメラを作成

IllustratorやPhotoshopと異なるのはステージを作成しても何も表示されません。そのステージを写すカメラの設定が必要になってきます。

3.レンダラーを作成

次に設定したカメラを「WebGLRenderer」「CanvasRenderer」のどちらで映し出すか?設定する必要があります。「three.js 入門」では「WebGLRenderer」を使用していきます。この耳慣れない「WebGLRenderer」「CanvasRenderer」の違いは
「WebGLRenderer」・・・GPUで演算を行うため、3Dグラフィックス処理において実行速度が早い。
「CanvasRenderer」・・・一般的に2Dグラフィックスを描画するときに使用する。
といった違いがあります。
よほどのことがない限り「WebGLRenderer」で問題ありません。

まとめ

最後に完成したJSファイルをこちらからご覧ください。

コメントで1つ1つのコードに解説を書いています。

公開日:
最終更新日:

人気アクセスランキング!Best 8!

PICK UP!

ピックアップ!注目企業を紹介!

Studio Staff

スタジオスタッフ募集!

雇用形態:
契約社員
給  与:
月給19万円~
勤 務 地:
東京都 千代田区
Sales

営業(営業ディレクター)募集!

雇用形態:
正社員(中途採用・新卒採用)
給  与:
月給24万〜35万円
勤 務 地:
東京都 板橋区
Photographer

カメラマン(男女)募集!

雇用形態:
契約社員
給  与:
月給20万円~30万円(賞与あり)
勤 務 地:
東京都 中央区
Camera Assitant

カメラアシスタント募集!

雇用形態:
契約社員
給  与:
月給13万円〜
勤 務 地:
神奈川県 横浜市
Studio Assitant

スタジオアシスタント(男女スタジオマン)募集!

雇用形態:
正社員(中途採用・新卒採用)
給  与:
月給18万円~
勤 務 地:
東京都 目黒区・渋谷区
Graphic Designer

グラフィックデザイナー募集!

雇用形態:
契約社員
給  与:
月給231,000円
勤 務 地:
東京都 品川区
JOB STAGE

Job Stageについて

ジョブステージは、デザイナー・クリエイターの為の求人サイトです。グラフィックデザイン・広告業界・DTP業界、Web業界、フォトグラファー・撮影業界、映像・動画業界、編集・出版業界、プロダクトデザイン業界、建築・インテリア業界、ゲーム業界等の求人情報を掲載中!デザイナー・クリエイターのプロフェッショナルの為に求人広告を毎日更新で掲載しています。御陰さまでジョブステージは2005年6月1日より運営開始、2020年で運営16年目を迎える運びとなりました。各業界のお仕事をお探しの方は、ジョブステージをどうぞご利用ください。

  • FOLLOW US
  • twitter
  • facebook

Renewal Campaign!

採用担当者様、掲載お申込みはこちらから
現在、リニューアルキャンペーン開催中!7週間、無料で掲載できます! 先着30社様迄!
J
※過去にJob Stageをご利用されてない企業様に限ります