Importing three.js - WebGL with HTML5 target

Monkey Archive Forums/Monkey Projects/Importing three.js - WebGL with HTML5 target

Danilo(Posted 2015) [#1]
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



Danilo(Posted 2015) [#2]
Some WebGL/three.js demos to watch while waiting for the Import: AlteredQualia ;)


Carlo(Posted 2015) [#3]
Good work:)
tree.js is very beautiful


Danilo(Posted 2015) [#4]
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


Carlo(Posted 2015) [#5]
Good Work
contac me
i interesting from tree.js and monkey x


Danilo(Posted 2015) [#6]
@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


Carlo(Posted 2015) [#7]
good works


Danilo(Posted 2015) [#8]
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.


Carlo(Posted 2015) [#9]
very good :)


Richard Betson(Posted 2015) [#10]
Good stuff. Watching :)


DruggedBunny(Posted 2015) [#11]
I missed this... nice work, Danilo! Cool SB demo too.


Danilo(Posted 2015) [#12]
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... :)


Danilo(Posted 2015) [#13]
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.


Richard Betson(Posted 2015) [#14]
Cool. :)


Carlo(Posted 2015) [#15]
Good work


CopperCircle(Posted 2016) [#16]
Only just saw this, looks great, is the code available? Thanks.


Bilbo(Posted 2016) [#17]
This looks good any module for this Danilo.


Danilo(Posted 2016) [#18]
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.


Bilbo(Posted 2016) [#19]
Hi Danilo if you could zip and upload that would be great.Thank you


Danilo(Posted 2016) [#20]
Need to include Three.js license etc. - give me an hour or so.


Danilo(Posted 2016) [#21]
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)


Bilbo(Posted 2016) [#22]
Thanks Danilo will have a look.


Danilo(Posted 2016) [#23]
Maybe HTML5_ResizeCanvas.zip could be useful for fixing the canvas resizing.