2018-08-26 15:27:05

License: MIT License

Fork: 2

Fav: 0

View: 666

Play
Stop
Reload

Fullscreen

Smart Phone

Fork tree

Readme
JavaScript 142 lines
HTML 6 lines
CSS 38 lines

[WebGL] Hilo3d で glTF 2.0 モデルを表示してみるテスト（その６）（調整中）

// forked from cx20's "[WebGL] Hilo3d で glTF 2.0 モデルを表示してみるテスト（その５）（調整中）" http://jsdo.it/cx20/6whX
// forked from cx20's "[WebGL] Hilo3d で glTF 2.0 モデルを表示してみるテスト（その４）（調整中）" http://jsdo.it/cx20/SkgH
// forked from cx20's "[WebGL] Hilo3d で glTF 2.0 モデルを表示してみるテスト（その３）（調整中）" http://jsdo.it/cx20/Elp4
// forked from cx20's "[WebGL] Hilo3d で glTF 2.0 モデルを表示してみるテスト（その２）（調整中）" http://jsdo.it/cx20/6jUn
// forked from cx20's "[WebGL] Hilo3d で glTF 2.0 モデルを表示してみるテスト（調整中）" http://jsdo.it/cx20/i5iW
// forked from cx20's "[WebGL] Hilo3d を試してみるテスト（組み込み関数編）（その４）" http://jsdo.it/cx20/aWAs
// forked from cx20's "[WebGL] Hilo3d を試してみるテスト（組み込み関数編）（その３）" http://jsdo.it/cx20/6Ujc
// forked from cx20's "[WebGL] Hilo3d を試してみるテスト（組み込み関数編）（その２）" http://jsdo.it/cx20/O7Hi
// forked from cx20's "[WebGL] Hilo3d を試してみるテスト（組み込み関数編）" http://jsdo.it/cx20/gKXr
// forked from cx20's "[WebGL] Hilo3d を試してみるテスト" http://jsdo.it/cx20/gwMA
// forked from cx20's "[簡易版] 30行で WebGL を試してみるテスト" http://jsdo.it/cx20/oaQC

//var url = "https://cdn.rawgit.com/KhronosGroup/glTF-WebGL-PBR/817404a4/models/Triangle/glTF/Triangle.gltf";
//var url = "https://cdn.rawgit.com/KhronosGroup/glTF-Sample-Models/7268f989/2.0/TextureSettingsTest/glTF/TextureSettingsTest.gltf";
//var url = "https://cdn.rawgit.com/cx20/jsdo-static-contents/76dfc928/models/gltf/2.0/EmaSimpleSkin_blender/glTF/EmaSimpleSkin_blender.gltf";
//var url = "https://cdn.rawgit.com/cx20/gltf-test/9fb5f39992bdd548e17fb18b256c41b14fb8840e/sampleModels/CesiumMilkTruck/glTF/CesiumMilkTruck.gltf";
//var url = "http://jsrun.it/assets/U/j/F/1/UjF1i";
var url = "https://cdn.rawgit.com/KhronosGroup/glTF-Sample-Models/c89c1709fbfd67a11aa7e540ab4ecb795763b627/2.0/MetalRoughSpheres/glTF/MetalRoughSpheres.gltf";

var scale = 0.5;
var modelName = "EmaSimpleSkin_blender";

var camera = new Hilo3d.PerspectiveCamera({
    aspect: innerWidth / innerHeight,
    fov:75,
    far: 2000,
    near: 1,
    z:3
});

var stage = new Hilo3d.Stage({
    container: document.body,
    camera: camera,
    clearColor: new Hilo3d.Color(0,0,0),
    width: innerWidth,
    height: innerHeight,
    pixelRatio:1
});

var container = new Hilo3d.Node({
    onUpdate:function(){
        this.rotationY += 0.1;
    }
}).addTo(stage);

var directionLight = new Hilo3d.DirectionalLight({
    color:new Hilo3d.Color(0.8, 0.8, 0.8),
    direction:new Hilo3d.Vector3(1, -1, 0)
}).addTo(stage);

var ambientLight = new Hilo3d.AmbientLight({
    color:new Hilo3d.Color(1, 1, 1),
    amount: .5
}).addTo(stage);

var ticker = new Hilo3d.Ticker(60);
ticker.addTick(stage);
ticker.addTick(Hilo3d.Tween);
ticker.addTick(Hilo3d.Animation);
ticker.start(true);

switch(modelName){
        case 'VC':
            stage.camera = model.cameras[4];
            break;
        case 'Cameras':
            // stage.camera = model.cameras[0];
            break;
        case 'GearboxAssy':
            scale = 0.1;
            node.setPosition(-159.20*scale, -17.02*scale, -3.21*scale);
            break;
        case 'AnimatedMorphSphere':
            diffuseEnvMap = null;
            break;
    }

model.materials.forEach(function (material) {
        material.brdfLUT = brfdTexture;
        material.diffuseEnvMap = diffuseEnvMap;
        material.specularEnvMap = specularEnvMap;
    });

node.setScale(scale);
    container.addChild(node);
    container.addChild(new Hilo3d.AxisHelper());

var skybox = new Hilo3d.Mesh({
        geometry: new Hilo3d.BoxGeometry(),
        material: new Hilo3d.BasicMaterial({
            lightType: 'NONE',
            side: Hilo3d.constants.BACK,
            diffuse: specularEnvMap
        })
    }).addTo(container);
    skybox.setScale(20);

var orbitControls = new OrbitControls(stage, {
        isLockMove:true,
        isLockZ:true,
    });
}).start();

[WebGL] Hilo3d で glTF 2.0 モデルを表示してみるテスト（その６）（調整中）

[WebGL] Hilo3d で glTF 2.0 モデルを表示してみるテスト（その６）（調整中）＜参考＞ ■ Metal-Rough Spheres https://github.com/KhronosGroup/glTF-Sample-Models/tree/master/2.0/MetalRoughSpheres ＜他ライブラリ比較＞ ■ [WebGL] three.js で glTF 2.0形式のデータを表示してみるテスト（その６） http://jsdo.it/cx20/SMjx ■ [WebGL] Babylon.js + glTF2FileLoader を試してみるテスト（その６） http://jsdo.it/cx20/8tlG ■ [WebGL] Cesium.js で glTF 2.0形式のデータを表示してみるテスト（その６） http://jsdo.it/cx20/yWoE ■ [WebGL] Grimoire.js で glTF 2.0形式のデータを表示してみるテスト（その６） http://jsdo.it/cx20/Qurl ■ [WebGL] ClayGL で glTF 2.0 モデルを表示してみるテスト（その６）（調整中） http://jsdo.it/cx20/4GIJ ■ [WebGL] Hilo3d で glTF 2.0 モデルを表示してみるテスト（その６）（調整中） http://jsdo.it/cx20/CJ4B ■ [WebGL] PlayCanvas で glTF 2.0 モデルを表示してみるテスト（その６）（調整中） http://jsdo.it/cx20/YSVu ■ [WebGL] X3DOMで glTF 2.0形式のデータを表示してみるテスト（その６）（調整中） http://jsdo.it/cx20/s319 ■ [WebGL] GLBoost で glTF 2.0 モデルを表示してみるテスト（その６）（調整中） http://jsdo.it/cx20/O3eo // forked from cx20's "[WebGL] Hilo3d で glTF 2.0 モデルを表示してみるテスト（その５）（調整中）" http://jsdo.it/cx20/6whX // forked from cx20's "[WebGL] Hilo3d で glTF 2.0 モデルを表示してみるテスト（その４）（調整中）" http://jsdo.it/cx20/SkgH // forked from cx20's "[WebGL] Hilo3d で glTF 2.0 モデルを表示してみるテスト（その３）（調整中）" http://jsdo.it/cx20/Elp4 // forked from cx20's "[WebGL] Hilo3d で glTF 2.0 モデルを表示してみるテスト（その２）（調整中）" http://jsdo.it/cx20/6jUn // forked from cx20's "[WebGL] Hilo3d で glTF 2.0 モデルを表示してみるテスト（調整中）" http://jsdo.it/cx20/i5iW // forked from cx20's "[WebGL] Hilo3d を試してみるテスト（組み込み関数編）（その４）" http://jsdo.it/cx20/aWAs // forked from cx20's "[WebGL] Hilo3d を試してみるテスト（組み込み関数編）（その３）" http://jsdo.it/cx20/6Ujc // forked from cx20's "[WebGL] Hilo3d を試してみるテスト（組み込み関数編）（その２）" http://jsdo.it/cx20/O7Hi // forked from cx20's "[WebGL] Hilo3d を試してみるテスト（組み込み関数編）" http://jsdo.it/cx20/gKXr // forked from cx20's "[WebGL] Hilo3d を試してみるテスト" http://jsdo.it/cx20/gwMA // forked from cx20's "[簡易版] 30行で WebGL を試してみるテスト" http://jsdo.it/cx20/oaQC //var url = "https://cdn.rawgit.com/KhronosGroup/glTF-WebGL-PBR/817404a4/models/Triangle/glTF/Triangle.gltf"; //var url = "https://cdn.rawgit.com/KhronosGroup/glTF-Sample-Models/7268f989/2.0/TextureSettingsTest/glTF/TextureSettingsTest.gltf"; //var url = "https://cdn.rawgit.com/cx20/jsdo-static-contents/76dfc928/models/gltf/2.0/EmaSimpleSkin_blender/glTF/EmaSimpleSkin_blender.gltf"; //var url = "https://cdn.rawgit.com/cx20/gltf-test/9fb5f39992bdd548e17fb18b256c41b14fb8840e/sampleModels/CesiumMilkTruck/glTF/CesiumMilkTruck.gltf"; //var url = "http://jsrun.it/assets/U/j/F/1/UjF1i"; var url = "https://cdn.rawgit.com/KhronosGroup/glTF-Sample-Models/c89c1709fbfd67a11aa7e540ab4ecb795763b627/2.0/MetalRoughSpheres/glTF/MetalRoughSpheres.gltf"; var scale = 0.5; var modelName = "EmaSimpleSkin_blender"; var camera = new Hilo3d.PerspectiveCamera({ aspect: innerWidth / innerHeight, fov:75, far: 2000, near: 1, z:3 }); var stage = new Hilo3d.Stage({ container: document.body, camera: camera, clearColor: new Hilo3d.Color(0,0,0), width: innerWidth, height: innerHeight, pixelRatio:1 }); var container = new Hilo3d.Node({ onUpdate:function(){ this.rotationY += 0.1; } }).addTo(stage); var directionLight = new Hilo3d.DirectionalLight({ color:new Hilo3d.Color(0.8, 0.8, 0.8), direction:new Hilo3d.Vector3(1, -1, 0) }).addTo(stage); var ambientLight = new Hilo3d.AmbientLight({ color:new Hilo3d.Color(1, 1, 1), amount: .5 }).addTo(stage); var ticker = new Hilo3d.Ticker(60); ticker.addTick(stage); ticker.addTick(Hilo3d.Tween); ticker.addTick(Hilo3d.Animation); ticker.start(true); var loadingElem = document.getElementById('loading'); var loadQueue = new Hilo3d.LoadQueue([{ type: 'CubeTexture', images: [ 'https://cdn.rawgit.com/cx20/gltf-test/c479d543/textures/cube/skybox/diffuse/bakedDiffuse_01.jpg', 'https://cdn.rawgit.com/cx20/gltf-test/c479d543/textures/cube/skybox/diffuse/bakedDiffuse_02.jpg', 'https://cdn.rawgit.com/cx20/gltf-test/c479d543/textures/cube/skybox/diffuse/bakedDiffuse_03.jpg', 'https://cdn.rawgit.com/cx20/gltf-test/c479d543/textures/cube/skybox/diffuse/bakedDiffuse_04.jpg', 'https://cdn.rawgit.com/cx20/gltf-test/c479d543/textures/cube/skybox/diffuse/bakedDiffuse_05.jpg', 'https://cdn.rawgit.com/cx20/gltf-test/c479d543/textures/cube/skybox/diffuse/bakedDiffuse_06.jpg' ] }, { type: 'CubeTexture', right: 'https://cdn.rawgit.com/cx20/gltf-test/c479d543/textures/cube/skybox/px.jpg', left: 'https://cdn.rawgit.com/cx20/gltf-test/c479d543/textures/cube/skybox/nx.jpg', top: 'https://cdn.rawgit.com/cx20/gltf-test/c479d543/textures/cube/skybox/py.jpg', bottom: 'https://cdn.rawgit.com/cx20/gltf-test/c479d543/textures/cube/skybox/ny.jpg', front: 'https://cdn.rawgit.com/cx20/gltf-test/c479d543/textures/cube/skybox/pz.jpg', back: 'https://cdn.rawgit.com/cx20/gltf-test/c479d543/textures/cube/skybox/nz.jpg', },{ src: 'https://cdn.rawgit.com/cx20/gltf-test/c479d543/textures/brdfLUT.png', type:'Texture' },{ src:url }]).on('load', function(e){ var progress = loadQueue.getLoaded()/loadQueue.getTotal(); if(progress >= 1){ loadingElem.parentNode.removeChild(loadingElem); } else{ loadingElem.innerHTML = 'loading ' + (progress*100).toFixed(2) + '% ...'; } }).on('complete', function () { var result = loadQueue.getAllContent(); var diffuseEnvMap = result[0]; var specularEnvMap = result[1]; var brfdTexture = result[2]; var model = window.model = result[3]; var node = model.node; switch(modelName){ case 'VC': stage.camera = model.cameras[4]; break; case 'Cameras': // stage.camera = model.cameras[0]; break; case 'GearboxAssy': scale = 0.1; node.setPosition(-159.20*scale, -17.02*scale, -3.21*scale); break; case 'AnimatedMorphSphere': diffuseEnvMap = null; break; } model.materials.forEach(function (material) { material.brdfLUT = brfdTexture; material.diffuseEnvMap = diffuseEnvMap; material.specularEnvMap = specularEnvMap; }); node.setScale(scale); container.addChild(node); container.addChild(new Hilo3d.AxisHelper()); var skybox = new Hilo3d.Mesh({ geometry: new Hilo3d.BoxGeometry(), material: new Hilo3d.BasicMaterial({ lightType: 'NONE', side: Hilo3d.constants.BACK, diffuse: specularEnvMap }) }).addTo(container); skybox.setScale(20); var orbitControls = new OrbitControls(stage, { isLockMove:true, isLockZ:true, }); }).start();<script src="https://cx20.github.io/gltf-test/libs/Hilo3d/1.5.9/Hilo3d.js"></script> <script src="https://cx20.github.io/gltf-test/libs/Hilo3d/1.5.9/OrbitControls.js"></script> <div id='loading'>loading 0% ...</div> <div id="container"></div> * { margin: 0; padding: 0; border: 0; overflow: hidden; } body { background: #000; font: 30px sans-serif; } #container { position: absolute; top: 0px; width:100%; height:100%; z-index: -1; } html, body{ width: 100%; height: 100%; } #loading{ position: absolute; left: 50%; top:50%; width: 300px; height: 300px; font-size: 24px; margin-left: -150px; margin-top: -150px; line-height: 300px; text-align: center; color:white; }

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/CJ4B/js"></script>

QR Code

Discussion

Questions on this code?

Forked

sort by

[WebGL] Hilo3d で PBR を試してみるテスト

cx20

131/8/38
- GLSL
- Hilo3d
- WebGL
- art&design
- html5_elements&api
- library&test

[WebGL] Hilo3d で glTF 2.0 モデルを

cx20

144/6/38
- GLSL
- Hilo3d
- WebGL
- art&design
- html5_elements&api
- library&test

[WebGL] Hilo3d で glTF 2.0 モデルを表示してみるテスト（その６）（調整中）

Description What kind of game?

Control Device

Fullscreen

Author

Default Panel

Size

code

Discussion

Tags

Forked