"Wrap" three.js in SmartMS

Question

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>

The wrapping doesn't need to be very difficult. You can define a Smart Pascal class and link it to the corresponding JS-class with the "external" directive. Take a look at the Box2d demo. I havent had a look at the three.js source myself (yet), so I don't know how easy it would be to create a wrapper, but I know that André (on the Smart-team) is having a look at this right now. Perhaps he will manage to create a complete wrapper for you :-) — Jørn E. Angeltveit, Feb 25 '14 at 10:52

score 3 · Accepted Answer · answered Feb 26 '14 at 13:57

3

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 :)

answered Feb 26 '14 at 13:57

André

8,920
1
24
24

1

Wow - Thats amazing ! You just wrapped three.js :-) Thumbs up ! I think Smart Mobile Studio got so much potential. I have been looking at the box2d demo in the hope that i could learn how to make my own small wrappings, but it's to complicated and big for me to comprehend. In special because the js file is minified. I would appreciate a more brain-friendly example ;-) But anyway - the more i dig into sms, the more i love it :-) – Flemming Feb 26 '14 at 16:23
There's a little problem with compilation; It have a tendency to make sms crash !? I have to delete the www folder to make it not crash after compilation. – Flemming Feb 26 '14 at 17:10
Yes, it crashes every second time i compile it (after restarting sms). The error occurs after the compiling and saving of index.html. Is there a automatic saved error log ? – Flemming Feb 27 '14 at 16:28
Just tried it with another browser and it works. Seems to be only the internal browser throwing this error :-) – Flemming Apr 10 '14 at 21:25
Just for the record i got the errors : "Access violation at address 68141F50 in module 'libcef.dll'. Read of address 000000F7" and in another case access violation in module "ntdll.dll" with the following message:"Either there is no default mail client or the current mail client cannot fulfill the message request." – Flemming Jun 12 '14 at 12:51

score 2 · Answer 2 · answered Feb 27 '14 at 12:08

2

I have created a demo, which intentionally deviates as little as possible of Andre’s sample. More details, see at: http://smartmobilestudio.com/forums/topic/smartms-intro-with-threejs/

answered Feb 27 '14 at 12:08

warleyalex

21
1

Flemming · Answer 3 · 2014-02-28T10:06:03.123

@warleyalex your example is wery enlightening for me. The getID function was just what i needed ! But sadly it also makes sms crash. Almost the same way as André's wrapped solution.

function getID(OwnerHandle : TObject): string;
begin
  result := TW3TagObj(OwnerHandle).Handle.id;
end;

procedure TForm1.W3ButtonRunClick(Sender: TObject);
var canvas : variant;
begin
  canvas := getID(myCanvas); // myCanvas is a TW3DIVHtmlElement
  asm
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize( 800, 600 );
    var ctnEl = document.getElementById(@canvas);
    ctnEl.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 );             
  end;  
end;

"Wrap" three.js in SmartMS

3 Answers3