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