Android Code Snippet [B4X] Using Three.js / WebGL in a WebView

This is a small B4XPages project (B4A and B4I) that shows how to use Three.js in a WebView. Three.js is a powerful JavaScript 3D library that uses WebGL and runs in all modern browsers. There's a small class plthreejs in the project that sets up a simple HTML page. After that you can add geometries. At the moment there are only a few commands but you can easily extend the class. Just have a look a the source code and check Three.js – JavaScript 3D library for the documentation.

    ' Create an instance of the plthreejs class and initializes it with the WebView/WKWebView (should be added with the Designer)
    Dim pl As plthreejs
    pl.Initialize(WebView)
    
    ' Specify the options
    pl.BackgroundColor = xui.Color_ARGB(255, 30, 30, 30)
    pl.Filename = "index.html"
    pl.RequestAnimationFrame = False
    
    ' Create the basic HTML file with the above options
    pl.PrepareHTML
    
    ' Loads the created HTML file
    pl.LoadHTML
    
    #If B4A
    Wait For WebView_PageFinished(Url As String)
    #End If
    
    #If B4I
    Wait For WebView_PageFinished (Success As Boolean, Url As String)
    #End If
    
    ' Create a geometry and add it to the viewport
    pl.CreateTorusKnotGeometry(10, 3, 100, 16, 2, 3, pl.MaterialType_MeshStandardMaterial, xui.Color_ARGB(255, 255, 128, 0))
    
    ' Set the camera position
    pl.SetCameraPosition(0, 0, 180)
    
    ' Add a light
    pl.AddPointLight(100, 100, 200, xui.Color_White, 2, True)

    ' Render the scene
    pl.render

 

[Mashiane]

Yes its quite impressive this library. Also tried to play with it with BANano, https://www.b4x.com/android/forum/threads/banano3d-beginning-3d-with-three-js.108372/#content

 

[amidgeha]

This is a small B4XPages project (B4A and B4I) that shows how to use Three.js in a WebView. Three.js is a powerful JavaScript 3D library that uses WebGL and runs in all modern browsers. There's a small class plthreejs in the project that sets up a simple HTML page. After that you can add geometries. At the moment there are only a few commands but you can easily extend the class. Just have a look a the source code and check Three.js – JavaScript 3D library for the documentation.

    ' Create an instance of the plthreejs class and initializes it with the WebView/WKWebView (should be added with the Designer)
    Dim pl As plthreejs
    pl.Initialize(WebView)
   
    ' Specify the options
    pl.BackgroundColor = xui.Color_ARGB(255, 30, 30, 30)
    pl.Filename = "index.html"
    pl.RequestAnimationFrame = False
   
    ' Create the basic HTML file with the above options
    pl.PrepareHTML
   
    ' Loads the created HTML file
    pl.LoadHTML
   
    #If B4A
    Wait For WebView_PageFinished(Url As String)
    #End If
   
    #If B4I
    Wait For WebView_PageFinished (Success As Boolean, Url As String)
    #End If
   
    ' Create a geometry and add it to the viewport
    pl.CreateTorusKnotGeometry(10, 3, 100, 16, 2, 3, pl.MaterialType_MeshStandardMaterial, xui.Color_ARGB(255, 255, 128, 0))
   
    ' Set the camera position
    pl.SetCameraPosition(0, 0, 180)
   
    ' Add a light
    pl.AddPointLight(100, 100, 200, xui.Color_White, 2, True)

    ' Render the scene
    pl.render

How can I apply png or jpg texture to TorusKnot ?