私の前の多くの人と同じように、私は今、Web 開発者/デザイナーが直面しなければならない最大の課題に直面しています。それは、個人のポートフォリオを作成することです。あなたが私のような完璧主義者なら、特にそのアイデアがあなたの才能、スキル、および全体的な能力を直接反映するものである場合、1つのアイデアに満足を見つけることがいかに難しいかを知っています. クライアントのウェブサイトを作る: 問題ありません。自分用の Web サイトを作成する: 世紀の戦い。
私の以前の個人ポートフォリオ Web サイトは、典型的な Web ポートフォリオに見られる共通要素の多くを使用するという点で、常に基本的なものでした。ここに小さな jQuery Isotopes があり、そこに小さな Scroll.js があり、レスポンシブ デザインの Foundations フレームワークの背後にラップされています。ブーム。Instopresto、あなたはポートフォリオを手に入れました...他の人と同じように見えるものです.
今、私は車輪を再発明しようとはしていません。ポートフォリオは、意図されていることを達成し、以前の経験/仕事を示し、全体的な「能力」またはスキルレベルをカプセル化する必要があります.
このラウンドでは、全幅のビデオ背景を使用したかったのです。他のデザイン要素は簡単に外せます。サイトにオフセット メニューを追加するか、1 ページの最小限のデザインにするか、ページ/コンテンツ ナビゲーションに Ajax を使用します。
ビデオの背景に問題が続いています。これは、HTML5 ビデオで直面している制限と、モバイル デバイスでの表示方法です。ユーザーに再生ボタンを押すように強制したり、騙したりすることは、アイデアを台無しにする 1 つの余分なステップであり、代替手段として画像を使用すると、そもそもビデオを使用することの素晴らしさが失われます。
ただし、代替手段があります。Three.js を使用し、グラフィックス レンダリングを介して現在のマシンで提供されているテクノロジを利用して、全幅の背景として使用するアニメーションを作成しましょう。クロスブラウザ互換性があり、タブレットやモバイルデバイスでうまく機能します.
私の質問は、Javascript や Python の経験が豊富な方、および以前に three.js を利用したことがある方です。私は通常、Cinema4D をアニメーションに使用します。これは、Cinema4D と After Effects 間の滑らかでシームレスなワークフローを提供するためです。アニメーションを指定して 3D 要素を作成し、それをすべてキャプチャするカメラを作成しました。
WebGL と Three.js を使用するために Cinema4D からエクスポートするにはどうすればよいですか。Web 上のほとんどのチュートリアル/情報は非常に古くなっています。C4D から Blender、WebGL への実行可能なワークフローでさえ、プロセスを理解している人だけが説明できれば、私にとってはうまくいくでしょう。
このプロジェクトの背後にあるインスピレーションを刺激したいくつかの例を次に示します。
http://mrdoob.com/lab/javascript/threejs/css3d/periodictable/ - 全体的な機能のために CSS3 を使用して構築されています。
http://blogs.truthlabs.com/2013/11/12/illustrator-webgl-workflow-tips/ - このチュートリアルは素晴らしいですが、Blender をベースにしているため、私は無人地帯にいます。単純なソリューションの場合、これはうまく機能します。C4D での作成には時間がかかりません。それを WebGL に取り込む方法です。
アドバイスをいただき、この投稿を読んでいただきありがとうございます。
-乾杯、ブランデンデーン