派生自： cx20 投稿的 [WebGL] Grimoire.js で Oimo.js を試してみるテスト（その４改） 查看差别 (103) [WebGL] Grimoire.js + Oimo.js で箱にボールを入れてみるテスト（調整中） cx20 关注 2017-07-17 21:02:36 许可证： MIT许可证 派生0 收藏0 浏览量280 播放 停止 刷新 全屏查看 智能机大小查看 Readme JavaScript 110 行 HTML 28 行 CSS 11 行 [WebGL] Grimoire.js + Oimo.js で箱にボールを入れてみるテスト（調整中） ＜対応した点＞ ・複数種類のボールが落下するよう対応。 ・箱が透過するよう設定。 ・影を表示するよう設定。 directional light を shadow="true" に設定 ＜対応できていない点＞ ・ボールが地面に近づくと影がリングになる。 ＜参考＞ ■ WebGLと3D物理演算ライブラリの組み合わせを試してみる - Qiita http://qiita.com/cx20/items/3ebed669fb9c9e797935 ■ Three.js + Oimo.js で箱にボールを入れてみるテスト（その２改） http://jsdo.it/cx20/kNgw [WebGL] Grimoire.js + Oimo.js で箱にボールを入れてみるテスト（調整中） // forked from cx20's "[WebGL] Grimoire.js で Oimo.js を試してみるテスト（その４改）" http://jsdo.it/cx20/sRhd // forked from cx20's "[WebGL] Grimoire.js で Oimo.js を試してみるテスト（その４）" http://jsdo.it/cx20/ue3r // forked from cx20's "[WebGL] Grimoire.js で Oimo.js を試してみるテスト（その３）" http://jsdo.it/cx20/G2wl // forked from cx20's "[WebGL] Grimoire.js で Oimo.js を試してみるテスト（その２）" http://jsdo.it/cx20/sVc4 // forked from cx20's "[WebGL] Grimoire.js で Oimo.js を試してみるテスト" http://jsdo.it/cx20/kQ0F // forked from cx20's "[WebGL] Grimoire.js で Cannon.js を試してみるテスト" http://jsdo.it/cx20/4xwo // forked from cx20's "[WebGL] Grimoire.js を試してみるテスト（その４）（VBO編）" http://jsdo.it/cx20/swSy // forked from cx20's "[WebGL] Grimoire.js を試してみるテスト（その３）（VBO編）" http://jsdo.it/cx20/YiRx // forked from cx20's "[WebGL] Grimoire.js を試してみるテスト（その２）（VBO編）" http://jsdo.it/cx20/e3YN // forked from cx20's "[WebGL] Grimoire.js を試してみるテスト（VBO編）" http://jsdo.it/cx20/iUdQ // 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; var dataSet = [ {imageFile:"/assets/3/O/Z/o/3OZoF.jpg", scale:1.0}, // Basketball.jpg {imageFile:"/assets/2/y/4/W/2y4Wl.jpg", scale:0.9}, // BeachBall.jpg {imageFile:"/assets/r/x/X/q/rxXqY.jpg", scale:1.0}, // Football.jpg {imageFile:"/assets/i/M/6/F/iM6FW.jpg", scale:0.3}, // Softball.jpg {imageFile:"/assets/f/M/F/x/fMFxB.jpg", scale:0.3}, // TennisBall.jpg ]; gr(function() { const scene = gr("#main")("scene").single(); var timer = setInterval(function() { var idx = Math.floor(Math.random() * dataSet.length); const n = scene.addChildByName("rigid-sphere", { texture: dataSet[idx].imageFile, scale:dataSet[idx].scale, position: [Math.random() * 4 - 2, Math.random() * 5 + 15, Math.random() * 4 - 2], }); }, 30); setTimeout(function(){ clearInterval(timer); }, 10000 ); }); gr.register(() => { gr.registerComponent("OimoScene", { attributes: { }, $awake: function() { this.world = new OIMO.World(); }, $update: function() { this.world.step(); } }); gr.overrideDeclaration("scene", ["OimoScene"]); gr.registerComponent("Rigid", { attributes: { shape: { default: "box", converter: "String" }, move: { converter: "Boolean", default: true } }, $mount: function() { var all = 0xffffffff; // 11111111 11111111 11111111 11111111 var config = [ 1, // 密度 0.4, // 摩擦係数 0.6, // 反発係数 1, // 所属する衝突グループのビット all // 衝突する衝突グループのビット ]; this.__bindAttributes(); this.transform = this.node.getComponent("Transform"); const p = this.transform.position; const r = this.transform.rotation; const s = this.transform.scale; const oimoScene = this.node.getComponentInAncestor("OimoScene"); this.body = oimoScene.world.add({ type: this.shape, size: this.shape == "box" ? [s.X*2, s.Y*2, s.Z*2] : [s.X, s.Y, s.Z], pos: [p.X, p.Y, p.Z], rot: [r.X, r.Y, r.Z], move: this.move, density: 1, config: config }); }, $update: function() { const p = this.body.getPosition(); this.transform.setAttribute("position", [p.x, p.y, p.z]); const r = this.body.getQuaternion(); this.transform.setAttribute("rotation", new Quaternion([r.x, r.y, r.z, r.w])); if ( p.y < -10 ) { x = Math.random() * 4 - 2; y = Math.random() * 5 + 15; z = Math.random() * 4 - 2; this.body.resetPosition(x, y, z); //this.body.linearVelocity = new OIMO.Vec3((Math.random() - 0.5) * 5, 8, (Math.random() - 0.5) * 5); } } }); gr.registerNode("rigid-cube", ["Rigid"], { geometry: "cube", shape: "box", scale: [1,1,1], transparent:"false" }, "mesh"); gr.registerNode("rigid-sphere", ["Rigid"], { geometry: "sphere", shape: "sphere", scale: [1,1,1], transparent:"false" }, "mesh"); }); <!-- grimoire-preset-basic.js v1.10.18 --> <script src="https://unpkg.com/grimoirejs-preset-basic@1.10.18/register/grimoire-preset-basic.js"></script> <script src="https://unpkg.com/grimoirejs-forward-shading@1.7.3/register/grimoire-forward-shading.js"></script> <!-- oimo.js --> <script src="https://unpkg.com/oimo"></script> <script type="text/goml" id="main"> <goml width="fit" height="fit"> <!-- <import-material typeName="lambert" src="http://jsrun.it/assets/o/X/e/h/oXehW" /> --> <scene> <camera class="camera" position="0,40,15" rotation="y(0d)"> <camera.components> <MouseCameraControl></MouseCameraControl> </camera.components> </camera> <light rotation="-90d,0d,0d" type="directional" color="gray" intensity="10.0" shadow="true"/> <rigid-cube position="0,0,-4.5" scale="5, 5, 0.5" move="false" transparent="true" albedo="#40404070" emission="#000000"/> <rigid-cube position="0,0,+4.5" scale="5, 5, 0.5" move="false" transparent="true" albedo="#40404070" emission="#000000"/> <rigid-cube position="-4.5,0,0" scale="0.5, 5, 5" move="false" transparent="true" albedo="#40404070" emission="#000000"/> <rigid-cube position="+4.5,0,0" scale="0.5, 5, 5" move="false" transparent="true" albedo="#40404070" emission="#000000"/> <!-- <mesh geometry="cube" position="0,-5,0" scale="15, 0.5, 15" texture="/assets/u/y/G/y/uyGy9.jpg" /> --> <rigid-cube position="0,-5,0" scale="15, 0.5, 15" move="false" transparent="false" albedo="#404040FF" emission="#000000"/> </scene> </goml> </script> [WebGL] Grimoire.js + Oimo.js で箱にボールを入れてみるテスト（調整中） * { margin: 0; padding: 0; border: 0; } body { background: #fff; font: 30px sans-serif; overflow: hidden; } [WebGL] Grimoire.js + Oimo.js で箱にボールを入れてみるテスト（調整中） ＜対応した点＞ ・複数種類のボールが落下するよう対応。 ・箱が透過するよう設定。 ・影を表示するよう設定。 directional light を shadow="true" に設定 ＜対応できていない点＞ ・ボールが地面に近づくと影がリングになる。 ＜参考＞ ■ WebGLと3D物理演算ライブラリの組み合わせを試してみる - Qiita http://qiita.com/cx20/items/3ebed669fb9c9e797935 ■ Three.js + Oimo.js で箱にボールを入れてみるテスト（その２改） http://jsdo.it/cx20/kNgw // forked from cx20's "[WebGL] Grimoire.js で Oimo.js を試してみるテスト（その４改）" http://jsdo.it/cx20/sRhd // forked from cx20's "[WebGL] Grimoire.js で Oimo.js を試してみるテスト（その４）" http://jsdo.it/cx20/ue3r // forked from cx20's "[WebGL] Grimoire.js で Oimo.js を試してみるテスト（その３）" http://jsdo.it/cx20/G2wl // forked from cx20's "[WebGL] Grimoire.js で Oimo.js を試してみるテスト（その２）" http://jsdo.it/cx20/sVc4 // forked from cx20's "[WebGL] Grimoire.js で Oimo.js を試してみるテスト" http://jsdo.it/cx20/kQ0F // forked from cx20's "[WebGL] Grimoire.js で Cannon.js を試してみるテスト" http://jsdo.it/cx20/4xwo // forked from cx20's "[WebGL] Grimoire.js を試してみるテスト（その４）（VBO編）" http://jsdo.it/cx20/swSy // forked from cx20's "[WebGL] Grimoire.js を試してみるテスト（その３）（VBO編）" http://jsdo.it/cx20/YiRx // forked from cx20's "[WebGL] Grimoire.js を試してみるテスト（その２）（VBO編）" http://jsdo.it/cx20/e3YN // forked from cx20's "[WebGL] Grimoire.js を試してみるテスト（VBO編）" http://jsdo.it/cx20/iUdQ // 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; var dataSet = [ {imageFile:"/assets/3/O/Z/o/3OZoF.jpg", scale:1.0}, // Basketball.jpg {imageFile:"/assets/2/y/4/W/2y4Wl.jpg", scale:0.9}, // BeachBall.jpg {imageFile:"/assets/r/x/X/q/rxXqY.jpg", scale:1.0}, // Football.jpg {imageFile:"/assets/i/M/6/F/iM6FW.jpg", scale:0.3}, // Softball.jpg {imageFile:"/assets/f/M/F/x/fMFxB.jpg", scale:0.3}, // TennisBall.jpg ]; gr(function() { const scene = gr("#main")("scene").single(); var timer = setInterval(function() { var idx = Math.floor(Math.random() * dataSet.length); const n = scene.addChildByName("rigid-sphere", { texture: dataSet[idx].imageFile, scale:dataSet[idx].scale, position: [Math.random() * 4 - 2, Math.random() * 5 + 15, Math.random() * 4 - 2], }); }, 30); setTimeout(function(){ clearInterval(timer); }, 10000 ); }); gr.register(() => { gr.registerComponent("OimoScene", { attributes: { }, $awake: function() { this.world = new OIMO.World(); }, $update: function() { this.world.step(); } }); gr.overrideDeclaration("scene", ["OimoScene"]); gr.registerComponent("Rigid", { attributes: { shape: { default: "box", converter: "String" }, move: { converter: "Boolean", default: true } }, $mount: function() { var all = 0xffffffff; // 11111111 11111111 11111111 11111111 var config = [ 1, // 密度 0.4, // 摩擦係数 0.6, // 反発係数 1, // 所属する衝突グループのビット all // 衝突する衝突グループのビット ]; this.__bindAttributes(); this.transform = this.node.getComponent("Transform"); const p = this.transform.position; const r = this.transform.rotation; const s = this.transform.scale; const oimoScene = this.node.getComponentInAncestor("OimoScene"); this.body = oimoScene.world.add({ type: this.shape, size: this.shape == "box" ? [s.X*2, s.Y*2, s.Z*2] : [s.X, s.Y, s.Z], pos: [p.X, p.Y, p.Z], rot: [r.X, r.Y, r.Z], move: this.move, density: 1, config: config }); }, $update: function() { const p = this.body.getPosition(); this.transform.setAttribute("position", [p.x, p.y, p.z]); const r = this.body.getQuaternion(); this.transform.setAttribute("rotation", new Quaternion([r.x, r.y, r.z, r.w])); if ( p.y < -10 ) { x = Math.random() * 4 - 2; y = Math.random() * 5 + 15; z = Math.random() * 4 - 2; this.body.resetPosition(x, y, z); //this.body.linearVelocity = new OIMO.Vec3((Math.random() - 0.5) * 5, 8, (Math.random() - 0.5) * 5); } } }); gr.registerNode("rigid-cube", ["Rigid"], { geometry: "cube", shape: "box", scale: [1,1,1], transparent:"false" }, "mesh"); gr.registerNode("rigid-sphere", ["Rigid"], { geometry: "sphere", shape: "sphere", scale: [1,1,1], transparent:"false" }, "mesh"); }); <!-- grimoire-preset-basic.js v1.10.18 --> <script src="https://unpkg.com/grimoirejs-preset-basic@1.10.18/register/grimoire-preset-basic.js"></script> <script src="https://unpkg.com/grimoirejs-forward-shading@1.7.3/register/grimoire-forward-shading.js"></script> <!-- oimo.js --> <script src="https://unpkg.com/oimo"></script> <script type="text/goml" id="main"> <goml width="fit" height="fit"> <!-- <import-material typeName="lambert" src="http://jsrun.it/assets/o/X/e/h/oXehW" /> --> <scene> <camera class="camera" position="0,40,15" rotation="y(0d)"> <camera.components> <MouseCameraControl></MouseCameraControl> </camera.components> </camera> <light rotation="-90d,0d,0d" type="directional" color="gray" intensity="10.0" shadow="true"/> <rigid-cube position="0,0,-4.5" scale="5, 5, 0.5" move="false" transparent="true" albedo="#40404070" emission="#000000"/> <rigid-cube position="0,0,+4.5" scale="5, 5, 0.5" move="false" transparent="true" albedo="#40404070" emission="#000000"/> <rigid-cube position="-4.5,0,0" scale="0.5, 5, 5" move="false" transparent="true" albedo="#40404070" emission="#000000"/> <rigid-cube position="+4.5,0,0" scale="0.5, 5, 5" move="false" transparent="true" albedo="#40404070" emission="#000000"/> <!-- <mesh geometry="cube" position="0,-5,0" scale="15, 0.5, 15" texture="/assets/u/y/G/y/uyGy9.jpg" /> --> <rigid-cube position="0,-5,0" scale="15, 0.5, 15" move="false" transparent="false" albedo="#404040FF" emission="#000000"/> </scene> </goml> </script> * { margin: 0; padding: 0; border: 0; } body { background: #fff; font: 30px sans-serif; overflow: hidden; } 请使用支持内嵌框架的浏览器 到jsdo.it games上查看 作者信息 分享 嵌入博客 QR二维码 标签 下载 成功！ 描述 是怎样的游戏？ [WebGL] Grimoire.js + Oimo.js で箱にボールを入れてみるテスト（調整中） ＜対応した点＞ ・複数種類のボールが落下するよう対応。 ・箱が透過するよう設定。 ・影を表示するよう設定。 directional light を shadow="true" に設定 ＜対応できていない点＞ ・ボールが地面に近づくと影がリングになる。 ＜参考＞ ■ WebGLと3D物理演算ライブラリの組み合わせを試してみる - Qiita http://qiita.com/cx20/items/3ebed669fb9c9e797935 ■ Three.js + Oimo.js で箱にボールを入れてみるテスト（その２改） http://jsdo.it/cx20/kNgw 控制设备 智能机遥控器 jsdo.it WebSocket Controller» 鼠标 键盘 触摸设备 全屏 有效 无效 从jsdo.it games上删除 提交 作者信息 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 默认面板 自动播放 截图 Readme JavaScript HTML CSS 部件尺寸 宽度： px 高度： px 部件代码 <script type="text/javascript" src="http://jsdo.it/blogparts/0fsp/js"></script> art&design GLSL Grimoire.js html5_elements&api library&test WebGL 讨论区 试着提些关于代码的问题！ 标签 GLSL Grimoire.js WebGL art&design html5_elements&api library&test
