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.
https://stackoverflow.com/questions/21985657
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian<!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 :)
OTHER TIPS
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/
@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;
