three.jsによる HTML5 3Dグラフィックス　上 ブラウザで実現するOpenGL（WebGL）の世界 著者　遠藤理平 判型　B5変型判、324頁 本体価格 3,400円 ISBN　978-4-87783-324-4 「three.jsによる HTML5 3Dグラフィックス　下」のページはこちら 本書について HTML5の登場により、ブラウザで動いているとはとても思えないようなハイクオリティな3Dグラフィックスを、特殊な環境を必要とせずに、ブラウザとテキストエディタのみで、ネイティブアプリケーション並みなハイパフォーマンスで実装できる時代が到来しました。これを可能としたのが、HTML5で初めて登場したWebGLという新しい規格です。しかしながら、WebGLは非常に精密なグラフィクスを制作できる反面、難解で非常に敷居が高いと言われており、WebGLを簡単に取り扱えるライブラリが望まれ

Webデザインをしていると、HTML と CSS だけではできない表現ってありますよね。そんな時によく使うのが jQuery。今回は jQuery っていまいちよく分からない ... っていう人が、jQuery に少しでも親しんでもらえたらいいなーと思って、知ってる事をまとめてみました。なので jQuery 初心者さん向けの記事です。 とっても当たり前なんですけど、Web サイトは基本的に HTML で書かれていて、デザインは CSS で装飾されていますよね。最近では CSS3 の登場で、簡単なアニメーションも CSS で作れるようになりました。でもクライアントワークでは、まだまだ CSS3 を使える部分が限られているし、Webデザインに少し動きなどをつけたい時などは、まだまだ jQuery を活用する事も多いです。 私は Javascript が苦手で、jQuery もどちらかというと苦

※Google Chrome以外のブラウザでは正確に表示されない部分があります。 ■サンプルコード サンプルコードを大体そのまま動かしながらコードを理解してみる。 (function(){ var camera, scene, renderer, geometry, material, mesh; init(); animate(); function init() { camera = new THREE.Camera(75, window.innerWidth / window.innerHeight, 1, 10000); camera.position.z = 1000; scene = new THREE.Scene(); geometry = new THREE.Cube(200, 200, 200 ); material = new THREE.MeshBasicMateri

The goal of this collection is to provide a set of basic and instructive examples that introduce the various features in Three.js. The source code for each page contains detailed comments. Hosted at GitHub. Total examples: 83. Last updated: 23 August 2013. Compatible with Three.js version 60.

Three.js は WebGL (OpenGL ES をブラウザから使う技術) を簡単に使うための有名なラッパーライブラリです。 OpenGL ES (OpenGL for Embedded Systems) 2.0をサポートするプラットフォーム上で、ブラウザのプラグインなしでH/Wアクセラレートされた3D描画を可能にします。 OpenGL ES は3.0 が 2012年に発表されましたが2.0 との後方互換性ありなので、WEB GLはiPhone/Androidで今後も動作すると思います。 IEも11からWebGL対応になるみたいですね。 今回は ・Three.jsのDLとサンプルの確認 ・Three.jsの基礎理解 ・Blenderで3Dモデルの作成 ・BlenderモデルのJSONエクスポートアドオン という内容です。 Three.jsのDLとサンプルの確認 公式からDLします。Z

しかし、３D表示が得意なXNAを用いているのに、数値情報の表示だけでは物足りないので、取得した骨格情報から、「棒人間」を３Dで表示したいと思います。 using System; using System.Collections.Generic; using System.Linq; using Microsoft.Xna.Framework; using Microsoft.Xna.Framework.Audio; using Microsoft.Xna.Framework.Content; using Microsoft.Xna.Framework.GamerServices; using Microsoft.Xna.Framework.Graphics; using Microsoft.Xna.Framework.Input; using Microsoft.Xna.Framework

This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.

アーマチュアはオブジェクトの骨格となる要素で、作成したキャラクターに適用すると好きなポーズに動かす事が可能になります。 使用ソフト：Blender2.49b キャラクターオブジェクトを用意 ここでは「Blenderでモデリング（人）」で作成した人体オブジェクトを使用します。 アーマチュアの作成 最初は胴体部分からアーマチュアを構成するボーンを設置していきます。 3Dビュー上で3Dカーソルを軸の原点近くに置き、Shift+Sキーでスナップメニューを出し、「Cursor->Grid」で正確に軸の原点位置にカーソルを移動させます。 （テンキーで視点を移動させて確認する） オブジェクトモードでヘッダの「Add」、またはスペースキーやマウスの左右長押しクリックでメニューを開き、「Add」→「Armature」を選択します。 最初はオブジェクトに隠れて見えなくなっているので、「Editing（F9

アーマチュアを作る 「アーマチュアとは何ぞや」といいますと、ボーンの集合体というか…。動かせる関節が寄り集まったモノだと思って下さい。それではいってみましょう！ ミラーモディファイア（Mirror Modifire）を適用させる 現時点のメッシュオブジェクトの半分は、モディファイアが見せてくれているマボロシ状態。なのでモディファイアを適用して、仮で作ってくれていた半分を実体化します。 パンダのオブジェクトを選択して、オブジェクトモードへ。プロパティパネルのモディファイアタブ（レンチのマークでおなじみ）→MirrorのApplyをクリックすればOKです。色々注意されることもありますが、全無視です。 ミラーモディファイアを適用させてしまった後に頂点を直したいよ！というときは、3D Viewのツールパネル（Tで出てきます）のX Mirrorにチェックを入れると左右対称に同じ点が動いてくれます。

3ds Max／3ds Max Design（以下「3ds Max製品」と表記）からFBXファイルを書き出した。その後Showcaseにファイルを読み込んだが、マテリアル情報が読み込まれない 例：　3ds Max製品でボックスを作成して、［Arch&Design］マテリアル（テクスチャを含む）を適用 3ds Max製品からFBXファイルを書き出す場合は、Showcaseがサポートしている種類のマテリアルを事前に適用しておく必要があります。 上図の例では［Arch&Design］マテリアルがFBXでサポートされないため、ファイルの書き出しを実行すると次のエラーメッセージが表示されます。 以下は、3ds Max製品から書き出したFBXファイルについて、Showcaseがサポートしているマテリアル（テクスチャを含む）の代表的な例となります。詳細は、ヘルプの項目「3ds Max モデルを準備する」