"Embed" three.js within SmartMS

Is it possible to incorporate this simple three.js example into Smart Mobile Studio without extensive wrapping? I attempted to copy the window.onload content into an asm section but was unsuccessful.

<!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>

Answer №1

I recently developed a wrapper unit by converting my experimental internal typescript to pascal converter. After testing the output and addressing some generator errors, I have made the code available for review on: https://github.com/andremussche/AndrewsDelphiStuff/tree/master/Smart/ThreeJS

While there are still some external class names missing, it serves as a good starting point for further development.

Additionally, the provided demo showcases how to create a plain HTML project in SMS IDE.

Answer №2

In my latest project, I have developed a demo that closely follows Andre's sample while adding my own unique touch. For further information, visit:

Answer №3

Hey @warleyalex, your example really shed some light on things for me. The getID function turned out to be exactly what I was looking for! However, it seems to be causing some issues with SMS crashing, similar to André's 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 happens to be 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;

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Why does this switch case statement fail to effectively replace the elements of the text in order to unravel this JavaScript problem?

Question I need help converting special characters to HTML entities in a string: &, <, >, " (double quote), and ' (apostrophe). My Code function convertHTML(str) { let tempArr = ['a']; let newArr = []; let regex ...

Dealing with promises in AngularJS within the ui-router configuration

Below is a snippet of my $stateProvider code: $stateProvider .state("home", { url: "/", template: "<employee-info-component user='$resolve.user'></employee-info-component>", resolve: { user: function(indiv ...

Why does routing function correctly in a browser with AngularUI Router and Ionic, but not in Ionic View?

My Ionic App runs smoothly in the browser when using ionic serve. However, I encounter issues with routing when running the app in Ionic View (view.ionic.io) after uploading it with ionic upload. The index.html loads but nothing within <div ui-view=""& ...

Tips for expanding a fabric canvas to match the entire width of its parent division

specific scenario I have a cloth canvas placed inside a main section. How can I expand the canvas to cover the entire width and height of its container? Here is what my current code looks like: <div class="design_editor_div"> &l ...

A single pledge fulfilled in two distinct ways

My code ended up with a promise that raised some questions. Is it acceptable to resolve one condition with the token string value (resolve(token)), while resolving another condition with a promise of type Promise<string>: resolve(resultPromise); con ...

NextAuth - simulating the login process of OneLogin

I've been working on setting up a local OneLogin mocked service using WireMock. Everything has been going smoothly so far, as I was able to mock most of the OAuth OneLogin flow. However, I'm facing an issue with the last part that is preventing i ...

Angular 4: Utilizing reactive forms for dynamic addition and removal of elements in a string array

I am looking for a way to modify a reactive form so that it can add and delete fields to a string array dynamically. Currently, I am using a FormArray but it adds the new items as objects rather than just simple strings in the array. Here is an example of ...

"Adding an active class to a link based on the current page and locale: A step-by-step

Looking to add an active class to the subheader menu on the active page, but facing issues when changing the locale in the link. While it works for links like my-site/my-page, it doesn't work for links like my-site/fr/my-page. Utilizing Storyblok head ...

Fixing blurry text on canvas caused by Arbor.js mouse event issues

Currently, I am utilizing arborjs in my project. The text within the canvas is created using fillText in html5. While everything functions correctly on a Retina display MacBook, the text appears blurry. To address this, I applied the following solution: v ...

Troubleshooting drag-and-drop functionality in a JavaScript HTML5 application resembling a Gmail upload interface

Here is a snapshot of my user interface: Each node in the tree structure is represented by an <li> element along with an <a> link. Furthermore, each folder serves as a dropzone for file uploads similar to the drag-and-drop feature found in Gm ...

Tips for restricting the voting feature on a Facebook App to only once every 24 hours

Recently, I've been delving into the world of back-end development and decided to create a Facebook app that allows multiple photo entries with voting capabilities. Users can vote on one or multiple entries each day, and the system automatically captu ...

Tips for creating a fixed element with ScrollTrigger and GSAP

How can I prevent the right div from jumping on top of the left div when using a scroll trigger to make the left div's position fixed? gsap.registerPlugin(ScrollTrigger); const tlfour = gsap.timeline({ scrollTrigger: { trigger: ".ma ...

Having trouble extracting information from JSON object array following an AJAX post?

My website transfers data through JSON objects using Angular's $http post. If you'd like to see the console logs and responses, visit my website: Initially, I used x-form-urlencoded encoding successfully and decided to switch to application/jso ...

Can Ajax be utilized to call a PHP script that contains another Ajax function?

I have set up a checkbox that triggers an Ajax call to another PHP script once checked. In this PHP script, there are three text boxes and a button. When the button is pressed, another Ajax call is made to execute yet another PHP script, all within the sam ...

Guide to showcasing an image on an HTML page using HTTP header

I have an HTML page with a basic layout that includes a single button. When this button is clicked, it needs to trigger an HTTP request to a specific URL while including an Accept header for GET requests. The response from the HTTP URL will vary depending ...

How can global variables be effectively shared and edited between two separate runs of JavaScript nodes?

The primary function contained in main.js is as follows: var nLastPingTime = 0, nLastPingNumber = 0; module.exports = { compareData: function(nPingTime, nLastPingNumber){ nLastPingTime = nPingTime; nLastPingNumber = nLastPi ...

What is the best way to set a checkbox to null instead of false using Angular?

I am currently developing a filtering system that allows users to select different parameters to filter through a list of items. For instance, the item list could be a collection of dishes with filters represented as checkboxes labeled as vegan, vegetaria ...

Struggling with NodeJs POST request issue

Let's imagine I have a specific URL https://exampleAPI.com/authorize?param1=value1&param2=value2 Where param1 and param2 are the payload values being sent. How can I execute a POST request in this particular way? I attempted the following: var ...

Having Multiple Login Forms on a Single Page

I have encountered an issue with my login form code. It works perfectly as a single form, but I need to have 20 of these forms on one page. Despite my efforts to duplicate the code for each new form and adjusting the IDs, I am unable to make more than one ...

Incorporating Javascript into a <script> tag within PHP - a step-by-step guide

I am trying to integrate the following code into a PHP file: if (contains($current_url, $bad_urls_2)) { echo '<script> $('body :not(script,sup)').contents().filter(function() { return this.nodeType === 3; ...