2018-07-02 03:05:26

License: MIT License

Fork: 0

Fav: 0

View: 144

Play
Stop
Reload

Fullscreen

Smart Phone

Readme
JavaScript 74 lines
HTML 7 lines
CSS 13 lines

[WebGL] Babylon.js + glTF2FileLoader を試してみるテスト（その１３）（調整中）

// forked from cx20's "[WebGL] Babylon.js + glTF2FileLoader を試してみるテスト（その１２）（調整中）" http://jsdo.it/cx20/4D3s
// forked from cx20's "[WebGL] Babylon.js + glTF2FileLoader を試してみるテスト（その１１）（調整中）" http://jsdo.it/cx20/Kxcp
// forked from cx20's "[WebGL] Babylon.js + glTF2FileLoader を試してみるテスト（その１０）（調整中）" http://jsdo.it/cx20/Wij6
// forked from cx20's "[WebGL] Babylon.js + glTF2FileLoader を試してみるテスト（その９）（調整中）" http://jsdo.it/cx20/gu06
// forked from cx20's "[WebGL] Babylon.js + glTF2FileLoader を試してみるテスト（その８）（調整中）" http://jsdo.it/cx20/aGqk
// forked from cx20's "[WebGL] Babylon.js + glTF2FileLoader を試してみるテスト（その７）" http://jsdo.it/cx20/eqP2
// forked from cx20's "[WebGL] Babylon.js + glTF2FileLoader を試してみるテスト（その６）" http://jsdo.it/cx20/8tlG
// forked from cx20's "[WebGL] Babylon.js + glTF2FileLoader を試してみるテスト（その５）（調整中）" http://jsdo.it/cx20/On4X
// forked from cx20's "[WebGL] Babylon.js + glTF2FileLoader を試してみるテスト（その４）" http://jsdo.it/cx20/4ELKC
// forked from cx20's "[WebGL] Babylon.js + glTF2FileLoader を試してみるテスト（その３）（調整中）" http://jsdo.it/cx20/U1kH
// forked from cx20's "[WebGL] Babylon.js + glTF2FileLoader を試してみるテスト（その２）" http://jsdo.it/cx20/cL80
// forked from cx20's "[WebGL] Babylon.js + glTF2FileLoader を試してみるテスト" http://jsdo.it/cx20/KKp9
// forked from cx20's "[WebGL] Babylon.js + glTFFileLoader を試してみるテスト" http://jsdo.it/cx20/yptM
// forked from cx20's "[WebGL] Babylon.js + objFileLoaderを試してみるテスト（失敗）" http://jsdo.it/cx20/eMAN
// forked from cx20's "[WebGL] Babylon.js を試してみるテスト（組み込み関数編）（その４）" http://jsdo.it/cx20/jwt0
// forked from cx20's "[WebGL] Babylon.js を試してみるテスト（組み込み関数編）（その３）" http://jsdo.it/cx20/uqcv
// forked from cx20's "[WebGL] Babylon.js を試してみるテスト（組み込み関数編）（その２）" http://jsdo.it/cx20/anpf
// forked from cx20's "[WebGL] Babylon.js を試してみるテスト（組み込み関数編）" http://jsdo.it/cx20/oRtWo
// forked from cx20's "[WebGL] Babylon.js を試してみるテスト" http://jsdo.it/cx20/84AP
// forked from cx20's "[簡易版] 30行で WebGL を試してみるテスト" http://jsdo.it/cx20/oaQC

var createScene = function(engine) {

var scene = new BABYLON.Scene(engine);
    var gl = engine._gl;
    
    var mesh;
    scene.clearColor = new BABYLON.Color3(1, 0, 0);

BABYLON.SceneLoader.Load("https://cdn.rawgit.com/ft-lab/ft-lab.github.io/c56ef016/gltf/grass/", "rocks_trees_ao.glb", engine, function (newScene) {

scene = newScene;
        scene.clearColor = new BABYLON.Color3(191/255, 228/255, 255/255);
        mesh = scene.meshes[0];
        mesh.position.y = -2
        mesh.position.x = 0;
        
        var scale = 3.0;
        var modelScaling = mesh.scaling;
        mesh.scaling = new BABYLON.Vector3(modelScaling.x * scale, modelScaling.y * scale, modelScaling.z * scale);
        
        var camera = new BABYLON.ArcRotateCamera("camera", 0, 1, 5, BABYLON.Vector3.Zero(), scene);
        camera.setPosition( new BABYLON.Vector3(-1, 1, 10) );
        camera.attachControl(canvas, false, false);
        scene.activeCamera = camera;

var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
        light.groundColor = new BABYLON.Color3(1, 1, 1);
        light.intensity = 0.5;
    
        var light2 = new BABYLON.PointLight("light2", new BABYLON.Vector3(2, 5, 5), scene);
        light2.intensity = 10.0;
        
        var rad = 0.0;
        engine.runRenderLoop(function () {
            scene.render();
            // quaternion
            mesh.rotate(BABYLON.Axis.Y, Math.PI * 0.2 / 180.0, BABYLON.Space.LOCAL);
            scene.render();
        });
    });
    return scene;
}

var canvas = document.querySelector("#renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
engine.enableOfflineSupport = false; // Suppress manifest reference

window.addEventListener('resize', function() {
    engine.resize();
});
var scene = createScene(engine);

[WebGL] Babylon.js + glTF2FileLoader を試してみるテスト（その１３）（調整中）

[WebGL] Babylon.js + glTF2FileLoader を試してみるテスト（その１３）（調整中）＜対応した点＞・ft-lab さんの glTF サンプルを Babylon.js を使用して表示するよう対応。＜使用モデル＞ ■ ft-lab プロジェクトファイル置き場 https://ft-lab.github.io/gltf.html ファイル名：rocks_trees_ao.glb 形状名：Rocks and trees and grass 説明：　木と岩と草のシーン。　複数のテクスチャイメージと形状を使用。　頂点カラーを使用。　マテリアルとしてDoubleSidedを使用。　拡散反射のマッピングレイヤで「アルファ透明」を使用(glTFのALPHA_MASK/alpha cutoffを使用)。＜他ライブラリ比較＞ ■ [WebGL] three.js で glTF 2.0形式のデータを表示してみるテスト（その１３）（調整中） http://jsdo.it/cx20/Wrcg ■ [WebGL] Babylon.js + glTF2FileLoader を試してみるテスト（その１３）（調整中） http://jsdo.it/cx20/eFaZ ■ [WebGL] Cesium.js で glTF 2.0形式のデータを表示してみるテスト（その１３）（調整中） http://jsdo.it/cx20/2fVS ■ [WebGL] ClayGL で glTF 2.0 モデルを表示してみるテスト（その１３）（調整中） http://jsdo.it/cx20/aO8b ■ [WebGL] Hilo3d で glTF 2.0 モデルを表示してみるテスト（その１３）（調整中） http://jsdo.it/cx20/EDu8Q ■ [WebGL] PlayCanvas で glTF 2.0 モデルを表示してみるテスト（その１３）（調整中） http://jsdo.it/cx20/uUx8 ■ [WebGL] X3DOMで glTF 2.0形式のデータを表示してみるテスト（その１３）（調整中） http://jsdo.it/cx20/ihdN // forked from cx20's "[WebGL] Babylon.js + glTF2FileLoader を試してみるテスト（その１２）（調整中）" http://jsdo.it/cx20/4D3s // forked from cx20's "[WebGL] Babylon.js + glTF2FileLoader を試してみるテスト（その１１）（調整中）" http://jsdo.it/cx20/Kxcp // forked from cx20's "[WebGL] Babylon.js + glTF2FileLoader を試してみるテスト（その１０）（調整中）" http://jsdo.it/cx20/Wij6 // forked from cx20's "[WebGL] Babylon.js + glTF2FileLoader を試してみるテスト（その９）（調整中）" http://jsdo.it/cx20/gu06 // forked from cx20's "[WebGL] Babylon.js + glTF2FileLoader を試してみるテスト（その８）（調整中）" http://jsdo.it/cx20/aGqk // forked from cx20's "[WebGL] Babylon.js + glTF2FileLoader を試してみるテスト（その７）" http://jsdo.it/cx20/eqP2 // forked from cx20's "[WebGL] Babylon.js + glTF2FileLoader を試してみるテスト（その６）" http://jsdo.it/cx20/8tlG // forked from cx20's "[WebGL] Babylon.js + glTF2FileLoader を試してみるテスト（その５）（調整中）" http://jsdo.it/cx20/On4X // forked from cx20's "[WebGL] Babylon.js + glTF2FileLoader を試してみるテスト（その４）" http://jsdo.it/cx20/4ELKC // forked from cx20's "[WebGL] Babylon.js + glTF2FileLoader を試してみるテスト（その３）（調整中）" http://jsdo.it/cx20/U1kH // forked from cx20's "[WebGL] Babylon.js + glTF2FileLoader を試してみるテスト（その２）" http://jsdo.it/cx20/cL80 // forked from cx20's "[WebGL] Babylon.js + glTF2FileLoader を試してみるテスト" http://jsdo.it/cx20/KKp9 // forked from cx20's "[WebGL] Babylon.js + glTFFileLoader を試してみるテスト" http://jsdo.it/cx20/yptM // forked from cx20's "[WebGL] Babylon.js + objFileLoaderを試してみるテスト（失敗）" http://jsdo.it/cx20/eMAN // forked from cx20's "[WebGL] Babylon.js を試してみるテスト（組み込み関数編）（その４）" http://jsdo.it/cx20/jwt0 // forked from cx20's "[WebGL] Babylon.js を試してみるテスト（組み込み関数編）（その３）" http://jsdo.it/cx20/uqcv // forked from cx20's "[WebGL] Babylon.js を試してみるテスト（組み込み関数編）（その２）" http://jsdo.it/cx20/anpf // forked from cx20's "[WebGL] Babylon.js を試してみるテスト（組み込み関数編）" http://jsdo.it/cx20/oRtWo // forked from cx20's "[WebGL] Babylon.js を試してみるテスト" http://jsdo.it/cx20/84AP // forked from cx20's "[簡易版] 30行で WebGL を試してみるテスト" http://jsdo.it/cx20/oaQC var createScene = function(engine) { var scene = new BABYLON.Scene(engine); var gl = engine._gl; var mesh; scene.clearColor = new BABYLON.Color3(1, 0, 0); BABYLON.SceneLoader.Load("https://cdn.rawgit.com/ft-lab/ft-lab.github.io/c56ef016/gltf/grass/", "rocks_trees_ao.glb", engine, function (newScene) { scene = newScene; scene.clearColor = new BABYLON.Color3(191/255, 228/255, 255/255); mesh = scene.meshes[0]; mesh.position.y = -2 mesh.position.x = 0; var scale = 3.0; var modelScaling = mesh.scaling; mesh.scaling = new BABYLON.Vector3(modelScaling.x * scale, modelScaling.y * scale, modelScaling.z * scale); var camera = new BABYLON.ArcRotateCamera("camera", 0, 1, 5, BABYLON.Vector3.Zero(), scene); camera.setPosition( new BABYLON.Vector3(-1, 1, 10) ); camera.attachControl(canvas, false, false); scene.activeCamera = camera; var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene); light.groundColor = new BABYLON.Color3(1, 1, 1); light.intensity = 0.5; var light2 = new BABYLON.PointLight("light2", new BABYLON.Vector3(2, 5, 5), scene); light2.intensity = 10.0; var rad = 0.0; engine.runRenderLoop(function () { scene.render(); // quaternion mesh.rotate(BABYLON.Axis.Y, Math.PI * 0.2 / 180.0, BABYLON.Space.LOCAL); scene.render(); }); }); return scene; } var canvas = document.querySelector("#renderCanvas"); var engine = new BABYLON.Engine(canvas, true); engine.enableOfflineSupport = false; // Suppress manifest reference window.addEventListener('resize', function() { engine.resize(); }); var scene = createScene(engine); <canvas id="renderCanvas"></canvas>  <script src="https://cdn.rawgit.com/cx20/gltf-test/d390423c/libs/babylonjs/3.3.0dev/babylon.js"></script>  <script src="https://cdn.rawgit.com/cx20/gltf-test/d390423c/libs/babylonjs/3.3.0dev/babylon.glTF2FileLoader.js"></script>html, body { overflow: hidden; width: 100%; height: 100%; margin: 0; padding: 0; } #renderCanvas { width: 100%; height: 100%; touch-action: none; }

Play on jsdo.it games
- Author
- Share
- ブログに埋め込む
- QR
- Tag
Download

Complete!

Description What kind of game?

Control Device

	Smartphone Controllerjsdo.it WebSocket Controller»
	Mouse
	Keyboard
	Touch Device

Fullscreen

Activated
Inactivated

jsdo.it games から削除する Submit

cx20

URL
http://profile.hatena.ne.jp/cx20/

プログラマ（マイクロソフト系の言語を使用することが多いです。） JavaScript のライブラリを色々と試して遊んでます。

■ 各種 WebGL ライブラリによる基本サンプル一覧 http://qiita.com/cx20/items/0fa19c96aa6470d98807

■ 各種 WebGLライブラリと3D物理演算ライブラリの組み合わせ一覧 http://qiita.com/cx20/items/3ebed669fb9c9e797935

■ glTF 対応ライブラリのサンプル一覧 https://github.com/cx20/gltf-test

■ Grimoire.js サンプル一覧 http://jsdo.it/tag/Grimoire.js

■ GLBoost サンプル一覧 http://jsdo.it/tag/GLBoost

Size

Width: px
Height: px

code

<script type="text/javascript" src="http://jsdo.it/blogparts/eFaZ/js"></script>

QR Code

Discussion

Questions on this code?

[WebGL] Babylon.js + glTF2FileLoader を試してみるテスト（その１３）（調整中）

Description What kind of game?

Control Device

Fullscreen

Author

Default Panel

Size

code

Discussion

Tags