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

スタジオスタッフ募集!

雇用形態:
契約社員
給  与:
月給18万円~
勤 務 地:
東京都目黒区・台東区
Camera Assitant

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

雇用形態:
正社員(中途採用・新卒採用)
給  与:
月給179000円
勤 務 地:
東京都 新宿区
Package Designer

食品パッケージデザイナー募集!

雇用形態:
正社員(中途採用・新卒採用)
給  与:
月給22万円〜
勤 務 地:
大阪府 池田市
Designer

リノベーション設計スタッフ・インテリア設計スタッフ募集!

雇用形態:
1. 正社員(中途採用・新卒採用)、2. アルバイト
給  与:
1. 月給20万円〜月給30万円、2. アルバイト:時給1,000円〜1,500円
勤 務 地:
埼玉県 さいたま市
Assitant director

アシスタントディレクター(企画/ライティング)募集!

雇用形態:
正社員(中途採用)
給  与:
月給23万円〜65万円
勤 務 地:
東京都 渋谷区
Studio assitant

スタジオアシスタント募集!

雇用形態:
正社員(中途採用・新卒採用)
給  与:
月給18万円以上
勤 務 地:
東京都 渋谷区
JOB STAGE

Job Stageについて

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

  • FOLLOW US
  • twitter
  • facebook

Renewal Campaign!

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