Web Design Articles

babylon.jsにはよく使われる２つのカメラがあります。一つは１人称視点のユニバーサルカメラ(the Universal Camera)、もう一つはアークカメラ(Arc Rotate Camera)です。 まずカメラのコントロールを可能にしましょう camera.attachControl(canvas, true); ユニバーサルカメラ Universal Camera ユニバーサルカメラはキーボード、タッチ、ゲームパッドに対応したカメラです。これはFreeCamera,Touch Camera, Gamepad Cameraの上位互換です。ユニバーサルカメラを使うとFPSっぽい一人称視点を得られます。それぞれの入力方法のデフォルト設定は次の通り キーボード・・・上下左右キー マウス・・・視点を回転 タッチ操作・・・上下左右にスワイプ ゲームパッド・・・デバイス次第 コード // Parameters : name, position, scene var camera = new BABYLON.UniversalCamera("UniversalCamera", new BABYLON.Vector3(0, 0, -10), scene); // Targets the camera to a particular position. In this case the scene origin [...]

マテリアルを使用すると、メッシュを色とテクスチャで覆うことができます。なお、メッシュを表示するには光が必要です。拡散マテリアル(Diffuse)と鏡面マテリアル(Specular)では、光源を作成する必要があります。いきましょう！ 色 まずは、StandardMaterialでいきます。 var myMaterial = new BABYLON.StandardMaterial("myMaterial", scene); myMaterial.diffuseColor = new BABYLON.Color3(1, 0, 1); myMaterial.specularColor = new BABYLON.Color3(0.5, 0.6, 0.87); myMaterial.emissiveColor = new BABYLON.Color3(1, 1, 1); myMaterial.ambientColor = new BABYLON.Color3(0.23, 0.98, 0.53); mesh.material = myMaterial; BABYLON.Color3はそれぞれ、赤、緑、青を0~1の間で設定します。0がなし、1が一番強い状態です。 diffuseColorは拡散色(光に対して反射する基本の色) specularColorは鏡面反射(ハイライト的な反射) emissiveColorは影の色(そのメッシュ自身がその色で反射する) ambientColor 環境光の反射。シーンのアンビエントカラーが設定されている場合にのみ適用される そして、定義してマテリアルは、mesh.materialでマテリアルを設定していきます myMaterial.alpha = 0.5;aplhaで透明度を変えられる テクスチャ メッシュに対して、画像を張れる. var myMaterial [...]

babylon.js やってみようシリーズのステップ4位置、回転、スケーリングのお話です 位置の話 babylon.jsには２つの座標系があります ワールド座標系 ローカル座標系 ワールド座標系 ワールド座標系の原点は変わりません。通常、メッシュが作成されると、その中心はワールド軸の原点に配置されます。移動しても、ワールド座標系はそのワールドの中心(原点)を元に判断されます ローカル座標系 ローカル軸はメッシュの場所によって動きます。でもローカル軸の原点は、ワールド座標における位置に関係なく、常にメッシュの作成された中心にあります。 初期状態 ワールド座標とローカル座標は一致しますがメッシュが動くとズレることになります。 配置 mesh(メッシュ)に対して positionで位置を設定出来ます mesh.position = new BABYLON.Vector3(2, 3, 4); 例えばワールド軸にしたがって、2,3,4の位置に配置しますこの意味は obj.position.x = 2; obj.position.y = 3; obj.position.z = 4; です。赤がX軸、緑の線がY軸、青がZ軸 回転 meshに対して rotationで回転させることが出来ます mesh.rotation = new BABYLON.Vector3(alpha, beta, gamma);回転もVector3型でメッシュに設定します。alpha、beta、およびgammaはラジアンで設定します。 mesh.rotation.x = alpha; //rotation around x axis mesh.rotation.y = [...]

いろいろな形状シリーズです。いきましょう！ 線 //Array of points to construct lines var myPoints = [ new BABYLON.Vector3(0, 0, 0), new BABYLON.Vector3(0, 1, 1), new BABYLON.Vector3(0, 1, 0) ]; //Create lines var lines = BABYLON.MeshBuilder.CreateLines("lines", {points: myPoints}, scene); BABYLON.Vector3型で繋いでいきます Babylon.js Playground 螺旋 　//Array of points to construct a spiral with lines 　var myPoints = [...]

早速いきますBABYLON.MeshBuilderを使っていろいろ作っていきますThree.jsならジオメトリを作って、マテリアルを設定してメッシュを作るのですが、babylonは一行です。 球体 // Add and manipulate meshes in the scene var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {diameterX: 1, diameterY: 0.75, diameterZ: 0.25}, scene);diameterとは直径のことです。x,y,x好きなサイズに出来ますBabylon.js Playground 箱 // Add and manipulate meshes in the scene var box = BABYLON.MeshBuilder.CreateBox("box", {height: 1, width: 0.75, depth: 0.25}, scene); height高さ, width横幅, depth奥行きを設定出来ますhttps://www.babylonjs-playground.com/#K6M44R Plane平面 // Add and manipulate [...]