javascriptthree.jswebglsmart-mobile-studio

"Wrap" three.js in SmartMS


I would like to add this simple three.js example in Smart Mobile Studio. Is it possible to do without a whole lot of complex wrapping ? I have tried a naive attempt by copying the window.onload content into an asm section - but of course without luck.

<!DOCTYPE html>
<html>
<head>
<title>Getting Started with Three.js</title>    
<script src="three.min.js"></script>
<script>
window.onload = function() {

    var renderer = new THREE.WebGLRenderer();
    renderer.setSize( 800, 600 );
    document.body.appendChild( renderer.domElement );

    var scene = new THREE.Scene();

    var camera = new THREE.PerspectiveCamera(
        35,             // Field of view
        800 / 600,      // Aspect ratio
        0.1,            // Near plane
        10000           // Far plane
    );
    camera.position.set( -15, 10, 10 );
    camera.lookAt( scene.position );

    var geometry = new THREE.CubeGeometry( 5, 5, 5 );
    var material = new THREE.MeshLambertMaterial( { color: 0xFF0000 } );
    var mesh = new THREE.Mesh( geometry, material );
    scene.add( mesh );

    var light = new THREE.PointLight( 0xFFFF00 );
    light.position.set( 10, 0, 10 );
    scene.add( light );

    renderer.render( scene, camera );

};
</script>
</head>
<body></body>
</html>

Solution

  • I generated a wrapper unit (using my own experimental internal typescript to pascal converter) and also tested the output (and fixed some generator errors): https://github.com/andremussche/AndrewsDelphiStuff/tree/master/Smart/ThreeJS

    Still not perfect (some external class names are missing) but it is good starting point anyway.

    In the above demo you can also see how to create a plain html project in SMS IDE :)