2017-09-20 07:26:10

License: MIT License

Fork: 1

Fav: 1

View: 857

Play
Stop
Reload

Fullscreen

Smart Phone

Fork tree

Readme
JavaScript 51 lines
HTML 25 lines
CSS 16 lines

[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}`);

gr(function () {
  let $$ = gr('#canvas');
  //$$('model').addComponent('Rotate');
  $$('#camera').addComponent('Rotate');
});

<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>

<script src="https://cdnjs.cloudflare.com/ajax/libs/stats.js/r16/Stats.min.js"></script>

[WebGL] Grimoire.js でカメラを回転させてみるテスト（その３）

[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'); });  <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>  <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://cdn.rawgit.com/KhronosGroup/glTF-Sample-Models/52b3593a/1.0/VC/glTF-Embedded/VC.gltf" scale="0.1"/>  </scene> </goml> </script> * { margin: 0; padding: 0; border: 0; } body,html{ height:100%; } body { background: #fff; font: 30px sans-serif; overflow: hidden; }

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

QR Code

Discussion

Questions on this code?

Favorite by

The_tall_man

Forked

sort by

[WebGL] Grimoire.js でカメラを回転させて

cx20

76/29/16
- GLSL
- Grimoire.js
- WebGL
- art&design
- glTF
- html5_elements&api
- library&test

[WebGL] Grimoire.js でカメラを回転させてみるテスト（その３）

Description What kind of game?

Control Device

Fullscreen

Author

Default Panel

Size

code

Discussion

Tags

Favorite by

Forked