Forked from: cx20's [WebGL] Grimoire.js + glTF ファイルを試してみるテスト（その１０） View Diff (25) [WebGL] Grimoire.js でカメラを回転させてみるテスト（その３） cx20 Follow 2017-09-20 07:26:10 License: MIT License Fork1 Fav1 View577 Play Stop Reload Fullscreen Smart Phone Fork tree Readme JavaScript 51 lines HTML 25 lines CSS 16 lines [WebGL] Grimoire.js でカメラを回転させてみるテスト（その３） ※ このサンプルは glTF 1.0 形式の表示サンプルです。 ＜対応した点＞ ・カメラをリサージュ図形を描くよう移動させるよう対応。 ・カメラの向きは中心を向けるよう対応。 ＜参考＞ ■ [WebGL] Grimoire.js カメラを回転させてみるテスト（その２） http://jsdo.it/cx20/yIIh [WebGL] Grimoire.js でカメラを回転させてみるテスト（その３） // forked from cx20's "[WebGL] Grimoire.js + glTF ファイルを試してみるテスト（その１０）" http://jsdo.it/cx20/Ws6a // forked from cx20's "[WebGL] Grimoire.js + glTF ファイルを試してみるテスト（その９）（調整中）" http://jsdo.it/cx20/CgDC // forked from cx20's "[WebGL] Grimoire.js + glTF ファイルを試してみるテスト（その８）（調整中）" http://jsdo.it/cx20/a3HB // forked from cx20's "[WebGL] Grimoire.js + glTF ファイルを試してみるテスト（その７）（調整中）" http://jsdo.it/cx20/Mq2h // forked from cx20's "[WebGL] Grimoire.js + glTF ファイルを試してみるテスト（その６）（調整中）" http://jsdo.it/cx20/oCiQ // forked from cx20's "[WebGL] Grimoire.js + glTF ファイルを試してみるテスト（その５）（調整中）" http://jsdo.it/cx20/2PYW // forked from cx20's "[WebGL] Grimoire.js + glTF ファイルを試してみるテスト（その４）（調整中）" http://jsdo.it/cx20/iE9t // forked from cx20's "[WebGL] Grimoire.js + glTF ファイルを試してみるテスト（その３）（調整中）" http://jsdo.it/cx20/sV4J // forked from cx20's "[WebGL] Grimoire.js + glTF ファイルを試してみるテスト（その２）" http://jsdo.it/cx20/irCY // forked from cx20's "[WebGL] Grimoire.js + glTF ファイルを試してみるテスト（調整中）" http://jsdo.it/cx20/GJUm // forked from cx20's "[WebGL] Grimoire.js を試してみるテスト（その４）" http://jsdo.it/cx20/yNCh // forked from cx20's "[WebGL] Grimoire.js を試してみるテスト（その３）" http://jsdo.it/cx20/a1kX // forked from cx20's "[WebGL] Grimoire.js を試してみるテスト（その２）" http://jsdo.it/cx20/mjC6 // forked from cx20's "[WebGL] Grimoire.js を試してみるテスト" http://jsdo.it/cx20/4ZEB // forked from cx20's "[WebGL] jThree を試してみるテスト" http://jsdo.it/cx20/Go5s const Quaternion = gr.lib.math.Quaternion; const Vector3 = gr.lib.math.Vector3; gr.registerComponent('Rotate', { attributes: { speed: { default: '1', converter: 'Number', }, }, $mount: function () { this.phi = 0; }, $update: function () { this.phi += this.getAttribute('speed'); this.node.setAttribute('rotation', `0, ${this.phi}, 0`); let x = Math.sin(Math.PI * this.phi / 180 * 0.5) * 3; let y = (Math.sin(Math.PI * this.phi / 180 * 2)+1.0) * 2; let z = Math.cos(Math.PI * this.phi / 180 * 1) * 3; this.node.setAttribute('position', `${x}, ${y}, ${z}`); const cp = this.node.getAttribute('position'); const m2c = cp.subtractWith(new Vector3(0, 0, 0)); const rot = Quaternion.lookRotation(m2c,new Vector3(0,1,0)); this.node.setAttribute('rotation', rot); //console.log(`${x}, ${y}, ${z}\t${rot.X}, ${rot.Y}, ${rot.Z}, ${rot.W}`); }, }); gr(function () { let $$ = gr('#canvas'); //$$('model').addComponent('Rotate'); $$('#camera').addComponent('Rotate'); }); <!-- grimoire-preset-basic.js v1.9.7 --> <script src="https://unpkg.com/grimoirejs-preset-basic@1.9.23/register/grimoire-preset-basic.js"></script> <script src="https://unpkg.com/grimoirejs-gltf@1.8.10/register/grimoire-gltf.js"></script> <!-- stats.js r16 --> <script src="https://cdnjs.cloudflare.com/ajax/libs/stats.js/r16/Stats.min.js"></script> <script type="text/goml" id="canvas"> <goml width="fit" height="fit" bgColor="gray"> <renderer> <texture-buffer name="bb1"/> <render-scene/> </renderer> <scene> <camera id="camera" near="0.01" far="1000.0" fovy="45d" position="0,1,4"> <camera.components> <MouseCameraControl></MouseCameraControl> </camera.components> </camera> <!-- <model src="https://raw.githubusercontent.com/cx20/gltf-test/master/sampleModels/VC/glTF-Embedded/VC.gltf" scale="0.1"/> --> <!-- glTF-Embedded/VC.gltf --> <model src="https://cdn.rawgit.com/KhronosGroup/glTF-Sample-Models/52b3593a/1.0/VC/glTF-Embedded/VC.gltf" scale="0.1"/> <!-- glTF-Embedded/VC.gltf --> </scene> </goml> </script> [WebGL] Grimoire.js でカメラを回転させてみるテスト（その３） * { margin: 0; padding: 0; border: 0; } body,html{ height:100%; } body { background: #fff; font: 30px sans-serif; overflow: hidden; } [WebGL] Grimoire.js でカメラを回転させてみるテスト（その３） ※ このサンプルは glTF 1.0 形式の表示サンプルです。 ＜対応した点＞ ・カメラをリサージュ図形を描くよう移動させるよう対応。 ・カメラの向きは中心を向けるよう対応。 ＜参考＞ ■ [WebGL] Grimoire.js カメラを回転させてみるテスト（その２） http://jsdo.it/cx20/yIIh // forked from cx20's "[WebGL] Grimoire.js + glTF ファイルを試してみるテスト（その１０）" http://jsdo.it/cx20/Ws6a // forked from cx20's "[WebGL] Grimoire.js + glTF ファイルを試してみるテスト（その９）（調整中）" http://jsdo.it/cx20/CgDC // forked from cx20's "[WebGL] Grimoire.js + glTF ファイルを試してみるテスト（その８）（調整中）" http://jsdo.it/cx20/a3HB // forked from cx20's "[WebGL] Grimoire.js + glTF ファイルを試してみるテスト（その７）（調整中）" http://jsdo.it/cx20/Mq2h // forked from cx20's "[WebGL] Grimoire.js + glTF ファイルを試してみるテスト（その６）（調整中）" http://jsdo.it/cx20/oCiQ // forked from cx20's "[WebGL] Grimoire.js + glTF ファイルを試してみるテスト（その５）（調整中）" http://jsdo.it/cx20/2PYW // forked from cx20's "[WebGL] Grimoire.js + glTF ファイルを試してみるテスト（その４）（調整中）" http://jsdo.it/cx20/iE9t // forked from cx20's "[WebGL] Grimoire.js + glTF ファイルを試してみるテスト（その３）（調整中）" http://jsdo.it/cx20/sV4J // forked from cx20's "[WebGL] Grimoire.js + glTF ファイルを試してみるテスト（その２）" http://jsdo.it/cx20/irCY // forked from cx20's "[WebGL] Grimoire.js + glTF ファイルを試してみるテスト（調整中）" http://jsdo.it/cx20/GJUm // forked from cx20's "[WebGL] Grimoire.js を試してみるテスト（その４）" http://jsdo.it/cx20/yNCh // forked from cx20's "[WebGL] Grimoire.js を試してみるテスト（その３）" http://jsdo.it/cx20/a1kX // forked from cx20's "[WebGL] Grimoire.js を試してみるテスト（その２）" http://jsdo.it/cx20/mjC6 // forked from cx20's "[WebGL] Grimoire.js を試してみるテスト" http://jsdo.it/cx20/4ZEB // forked from cx20's "[WebGL] jThree を試してみるテスト" http://jsdo.it/cx20/Go5s const Quaternion = gr.lib.math.Quaternion; const Vector3 = gr.lib.math.Vector3; gr.registerComponent('Rotate', { attributes: { speed: { default: '1', converter: 'Number', }, }, $mount: function () { this.phi = 0; }, $update: function () { this.phi += this.getAttribute('speed'); this.node.setAttribute('rotation', `0, ${this.phi}, 0`); let x = Math.sin(Math.PI * this.phi / 180 * 0.5) * 3; let y = (Math.sin(Math.PI * this.phi / 180 * 2)+1.0) * 2; let z = Math.cos(Math.PI * this.phi / 180 * 1) * 3; this.node.setAttribute('position', `${x}, ${y}, ${z}`); const cp = this.node.getAttribute('position'); const m2c = cp.subtractWith(new Vector3(0, 0, 0)); const rot = Quaternion.lookRotation(m2c,new Vector3(0,1,0)); this.node.setAttribute('rotation', rot); //console.log(`${x}, ${y}, ${z}\t${rot.X}, ${rot.Y}, ${rot.Z}, ${rot.W}`); }, }); gr(function () { let $$ = gr('#canvas'); //$$('model').addComponent('Rotate'); $$('#camera').addComponent('Rotate'); }); <!-- grimoire-preset-basic.js v1.9.7 --> <script src="https://unpkg.com/grimoirejs-preset-basic@1.9.23/register/grimoire-preset-basic.js"></script> <script src="https://unpkg.com/grimoirejs-gltf@1.8.10/register/grimoire-gltf.js"></script> <!-- stats.js r16 --> <script src="https://cdnjs.cloudflare.com/ajax/libs/stats.js/r16/Stats.min.js"></script> <script type="text/goml" id="canvas"> <goml width="fit" height="fit" bgColor="gray"> <renderer> <texture-buffer name="bb1"/> <render-scene/> </renderer> <scene> <camera id="camera" near="0.01" far="1000.0" fovy="45d" position="0,1,4"> <camera.components> <MouseCameraControl></MouseCameraControl> </camera.components> </camera> <!-- <model src="https://raw.githubusercontent.com/cx20/gltf-test/master/sampleModels/VC/glTF-Embedded/VC.gltf" scale="0.1"/> --> <!-- glTF-Embedded/VC.gltf --> <model src="https://cdn.rawgit.com/KhronosGroup/glTF-Sample-Models/52b3593a/1.0/VC/glTF-Embedded/VC.gltf" scale="0.1"/> <!-- glTF-Embedded/VC.gltf --> </scene> </goml> </script> * { margin: 0; padding: 0; border: 0; } body,html{ height:100%; } body { background: #fff; font: 30px sans-serif; overflow: hidden; } use an iframe compat browser, deer Play on jsdo.it games Author Share ブログに埋め込む QR Tag Download Complete! Description What kind of game? [WebGL] Grimoire.js でカメラを回転させてみるテスト（その３） ※ このサンプルは glTF 1.0 形式の表示サンプルです。 ＜対応した点＞ ・カメラをリサージュ図形を描くよう移動させるよう対応。 ・カメラの向きは中心を向けるよう対応。 ＜参考＞ ■ [WebGL] Grimoire.js カメラを回転させてみるテスト（その２） http://jsdo.it/cx20/yIIh Control Device Smartphone Controllerjsdo.it WebSocket Controller» Mouse Keyboard Touch Device Fullscreen Activated Inactivated jsdo.it games から削除する Submit Author cx20 URLhttp://profile.hatena.ne.jp/cx20/ プログラマ（マイクロソフト系の言語を使用することが多いです。） JavaScript のライブラリを色々と試して遊んでます。 ■ 各種 WebGL ライブラリによる基本サンプル一覧 http://qiita.com/cx20/items/0fa19c96aa6470d98807 ■ 各種 WebGLライブラリと3D物理演算ライブラリの組み合わせ一覧 http://qiita.com/cx20/items/3ebed669fb9c9e797935 ■ Grimoire.js サンプル一覧 http://jsdo.it/tag/Grimoire.js ■ GLBoost サンプル一覧 http://jsdo.it/tag/GLBoost Tweet Default Panel Auto play Screenshot Readme JavaScript HTML CSS Size Width: px Height: px code <script type="text/javascript" src="http://jsdo.it/blogparts/Iud1/js"></script> art&design GLSL glTF Grimoire.js html5_elements&api library&test WebGL Discussion Questions on this code? Tags GLSL Grimoire.js WebGL art&design glTF html5_elements&api library&test Favorite by The_tall_man Forked 並べ替え 新着 閲覧回数 お気に入り数 フォーク数 [WebGL] Grimoire.js でカメラを回転させて cx20 11 497 76/29/16 GLSL Grimoire.js WebGL art&design glTF html5_elements&api library&test
![[WebGL] Grimoire.js でカメラを回転させてみるテスト（その３改）](http://jsdo-static-contents.s3.amazonaws.com/images/capture/I/F/Q/IFQA_w.jpg?t=1492810065)
