Importing three.js - WebGL with HTML5 target
Monkey Archive Forums/Monkey Projects/Importing three.js - WebGL with HTML5 target
| ||
First test for importing three.js: MonkeyGame.html Example requires WebGL compatible browser. Didn't Import the CanvasRenderer and CSS3DRenderer yet. Source for those first example: Import threeJS Function Main:Int() Print("in Main()") New MyGame() Return 0 End Class MyGame Extends ThreeApp Field scene:Scene Field camera:Camera Field renderer:Renderer Field mesh1:Mesh Field mesh2:Mesh Method OnCreate:Void() Print("OnCreate") scene = CreateScene() camera = CreatePerspectiveCamera(45, 1, 0.1, 1000) Local material:= CreateMeshLambertMaterial($FFFF00) Local material2:= CreateMeshBasicMaterial($000000, True) Local box:= CreateBoxGeometry(3, 3, 3) mesh1 = CreateMesh(box, material) mesh2 = CreateMesh(CreateBoxGeometry(3.2, 3.2, 3.2), material2) scene.add(mesh1) scene.add(mesh2) scene.add(CreateAmbientLight($404040)) Local light:= CreateDirectionalLight($ffffff) light.position.set(0, 1, 0) scene.add(light) renderer = CreateWebGLRenderer() renderer.setClearColor($404040) renderer.setSize(1024, 768) End Method OnUpdate:Void() 'Print("OnUpdate") mesh1.rotation.x += 0.02 mesh1.rotation.y += 0.02 mesh2.rotation.x += 0.02 mesh2.rotation.y += 0.02 'mesh.rotation.z += 0.01 End Method OnRender:Void() 'Print("OnRender") renderer.render(scene, camera) End End |
| ||
Some WebGL/three.js demos to watch while waiting for the Import: AlteredQualia ;) |
| ||
Good work:) tree.js is very beautiful |
| ||
Non-accelerated Canvas output is very limited. No shadows, no lighting, etc. Also Canvas output often does not look the same (f.e. texturing a ground plane), and with some browsers it is very slow. Un-usable slow with iPad Air 2 (iOS 8, Chrome browser) for example, while WebGL works good with iOS8. - Example 0002 WebGL / Canvas - Example 0003 WebGL / Canvas Used MonkeyX logos by Pharmhaus and spintop |
| ||
Good Work contac me i interesting from tree.js and monkey x |
| ||
@Carlo: It is work-in-progress. Just started it few days ago, and it is not ready yet. I'm working on it... ;) Imported some geometric primitives today: - Example 0004 WebGL / Canvas |
| ||
good works |
| ||
Combining SpiderBasic and MonkeyX using the WebGadget works: - Test_0001 (requires WebGL) Anyway, I would like to import http://dojotoolkit.org/ directly, and I think it's possible. MX2 features like closures/anonymous functions/function arguments would really help for JavaScript/HTML5 target programming. With Dojo+Dijit, MX(1/2) could be used for real Web-App programming - Apps that run completely in browser. Something like Sea3D's -> Sea3D Studio, or a GUI for Oime.js Physics Engine for Three.js, see Basic Test. I want to combine and use all of this stuff, together. |
| ||
very good :) |
| ||
Good stuff. Watching :) |
| ||
I missed this... nice work, Danilo! Cool SB demo too. |
| ||
Nice to see some interest for it, thanks. Changed the HTML5 target slightly yesterday, and made the console output an overlay (not final yet, need to remove the splitter etc.). - Example 0005 First tests with dojo/dijit were also successful, for Web GUI/application programming. Now back to importing... :) |
| ||
Test of two controls for scene interaction: OrbitControls and DeviceOrientationControls - Example 0006 Works with: - mouse (Left/Middle/Right button down + move, scrollwheel) - keyboard cursor keys for movement of the scene - (Mobiles) touch for orbiting, 2 fingers for zoom, 3 fingers movement for scene movement - (Mobiles) device orientation Tried with PC, iPad Air 2, Google Nexus 7 --- Windows Phone and Surface 2 RT have some problems. |
| ||
Cool. :) |
| ||
Good work |
| ||
Only just saw this, looks great, is the code available? Thanks. |
| ||
This looks good any module for this Danilo. |
| ||
To be honest, I’m only interested in MX2 - and MX2 has no real mobile & web targets at this time. I’m not sure yet that (and how easily) we can interface to real JavaScript with MX2 + Emscripten. If anyone is interested to continue the MX1 three.js import stuff, I could zip & upload what I have - but beware(!) it was a small start only, and there are quite many JS 'classes‘ waiting to get imported (Textures, Vector2D/3D, etc.) My hope was that MX2 makes things easier for importing three.js, for example importing callbacks for async texture+object loading and such things. Probably also operator overloading for Vector classes. MX2 Web-target probably takes more time, so if somebody wants to continue it for MX1 in the meantime/meanwhile, just say so. Requires somebody who is able to import JavaScript libraries into MX1. It’s pretty useless for end-users at this stage. |
| ||
Hi Danilo if you could zip and upload that would be great.Thank you |
| ||
Need to include Three.js license etc. - give me an hour or so. |
| ||
Okay, just noticed that the Canvas resize stuff with the HTML Fullscreen target doesn't work correctly anymore. Noticed three.js is at version 75 now. Anyway, the 7 examples run here with MonkeyXPro86e. - threeJS_71_experimental.zip (1.5MB) |
| ||
Thanks Danilo will have a look. |
| ||
Maybe HTML5_ResizeCanvas.zip could be useful for fixing the canvas resizing. |