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