Forked from: cx20's [WebGL] Grimoire.js を試してみるテスト（その４） View Diff (14) [WebGL] Grimoire.js でマウスイベントを試してみるテスト cx20 Follow 2017-03-20 22:51:50 License: MIT License Fork1 Fav0 View812 Play Stop Reload Fullscreen Smart Phone Fork tree Readme JavaScript 36 lines HTML 22 lines CSS 11 lines [WebGL] Grimoire.js でマウスイベントを試してみるテスト ＜対応した点＞ ・マウスオーバーで色を変更するよう対応。 var mesh = $$("#cube"); mesh.on("mouseenter",function() { mesh.setAttribute("color", "#ff0000"); }); mesh.on("mouseleave",function() { mesh.setAttribute("color", "#ffffff"); }); [WebGL] Grimoire.js でマウスイベントを試してみるテスト // 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 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', this.phi + ',' + this.phi + ',' + 0); }, }); gr(function () { var $$ = gr('#canvas'); $$('mesh').addComponent('Rotate'); var mesh = $$("#cube"); mesh.on("mouseenter",function() { //mesh.setAttribute("scale", 1); mesh.setAttribute("color", "#ff0000"); }); mesh.on("mouseleave",function() { //mesh.setAttribute("scale", 0.5); mesh.setAttribute("color", "#ffffff"); }); }); <!-- grimoire-preset-basic.js v1.9.7 --> <script src="https://unpkg.com/grimoirejs-preset-basic@1.9.7/register/grimoire-preset-basic.js"></script> <script type="text/goml" id="canvas"> <goml width="465" height="465"> <import-material typeName="lambert" src="http://jsrun.it/assets/o/X/e/h/oXehW" /> <geometry name="cube" type="cube" /> <renderer camera=".camera" viewport="0,0,100%,100%" far="100"> <render-scene/> </renderer> <scene> <camera class="camera" near="0.01" far="40.0" aspect="1.0" fovy="45d" position="0,0,5" rotation="y(0d)"> <camera.components> <MouseCameraControl rotateX="10" moveSpeed="1" /> </camera.components> </camera> <mesh id="cube" position="0,0,0" geometry="cube" texture="/assets/A/k/w/j/AkwjW.jpg"/> </scene> </goml> </script> [WebGL] Grimoire.js でマウスイベントを試してみるテスト * { margin: 0; padding: 0; border: 0; } body { background: #fff; font: 30px sans-serif; overflow: hidden; } [WebGL] Grimoire.js でマウスイベントを試してみるテスト ＜対応した点＞ ・マウスオーバーで色を変更するよう対応。 var mesh = $$("#cube"); mesh.on("mouseenter",function() { mesh.setAttribute("color", "#ff0000"); }); mesh.on("mouseleave",function() { mesh.setAttribute("color", "#ffffff"); }); // 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 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', this.phi + ',' + this.phi + ',' + 0); }, }); gr(function () { var $$ = gr('#canvas'); $$('mesh').addComponent('Rotate'); var mesh = $$("#cube"); mesh.on("mouseenter",function() { //mesh.setAttribute("scale", 1); mesh.setAttribute("color", "#ff0000"); }); mesh.on("mouseleave",function() { //mesh.setAttribute("scale", 0.5); mesh.setAttribute("color", "#ffffff"); }); }); <!-- grimoire-preset-basic.js v1.9.7 --> <script src="https://unpkg.com/grimoirejs-preset-basic@1.9.7/register/grimoire-preset-basic.js"></script> <script type="text/goml" id="canvas"> <goml width="465" height="465"> <import-material typeName="lambert" src="http://jsrun.it/assets/o/X/e/h/oXehW" /> <geometry name="cube" type="cube" /> <renderer camera=".camera" viewport="0,0,100%,100%" far="100"> <render-scene/> </renderer> <scene> <camera class="camera" near="0.01" far="40.0" aspect="1.0" fovy="45d" position="0,0,5" rotation="y(0d)"> <camera.components> <MouseCameraControl rotateX="10" moveSpeed="1" /> </camera.components> </camera> <mesh id="cube" position="0,0,0" geometry="cube" texture="/assets/A/k/w/j/AkwjW.jpg"/> </scene> </goml> </script> * { margin: 0; padding: 0; border: 0; } 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 でマウスイベントを試してみるテスト ＜対応した点＞ ・マウスオーバーで色を変更するよう対応。 var mesh = $$("#cube"); mesh.on("mouseenter",function() { mesh.setAttribute("color", "#ff0000"); }); mesh.on("mouseleave",function() { mesh.setAttribute("color", "#ffffff"); }); 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 ■ glTF 対応ライブラリのサンプル一覧 https://github.com/cx20/gltf-test ■ 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/GDf5/js"></script> art&design GLSL Grimoire.js html5_elements&api library&test WebGL Discussion Questions on this code? Tags GLSL Grimoire.js WebGL art&design html5_elements&api library&test Forked sort by latest page views favorite forked [WebGL] Grimoire.js でクリックイベントを cx20 10 405 35/23/11 GLSL Grimoire.js WebGL art&design html5_elements&api library&test
![[WebGL] Grimoire.js でクリックイベントを試してみるテスト（調整中）](http://jsdo-static-contents.s3.amazonaws.com/images/capture/a/6/u/a6uV_w.jpg?t=1512201216)
