Fatal编程技术网
  • javascript/
  • Javascript &引用；“包装”；SmartMS中的three.js

Javascript &引用；“包装”；SmartMS中的three.js

javascript three.js webgl

Javascript &引用；“包装”；SmartMS中的three.js,javascript,three.js,webgl,smart-mobile-studio,Javascript,Three.js,Webgl,Smart Mobile Studio,我想在Smart Mobile Studio中添加这个简单的three.js示例。有没有可能不用很多复杂的包装？我尝试了一个天真的尝试，将window.onload内容复制到asm部分，但当然没有运气 <!DOCTYPE html> <html> <head> <title>Getting Started with Three.js</title> <script src="three.min.js"></sc

我想在Smart Mobile Studio中添加这个简单的three.js示例。有没有可能不用很多复杂的包装？我尝试了一个天真的尝试，将window.onload内容复制到asm部分，但当然没有运气

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


开始使用Three.js
window.onload=函数（）{
var renderer=new THREE.WebGLRenderer（）；
设置大小（800600）；
document.body.appendChild（renderer.doElement）；
var scene=new THREE.scene（）；
var摄像机=新的三视角摄像机(
35，//视野
800/600，//长宽比
0.1，//近平面
10000/远平面
);
相机。位置。设置（-15，10，10）；
摄像机。注视（场景。位置）；
var几何=新的三立方测量法（5,5,5）；
var material=new THREE.MeshLambertMaterial（{color:0xFF0000}）；
var mesh=新的三个网格（几何体、材质）；
场景。添加（网格）；
var灯=新的三点灯（0xFFFF00）；
光。位置。设置（10，0，10）；
场景。添加（灯光）；
渲染器。渲染（场景、摄影机）；
};
我生成了一个包装器单元（使用我自己的实验性内部typescript到pascal转换器），还测试了输出（并修复了一些生成器错误）：

仍然不完美（缺少一些外部类名），但无论如何，这是一个很好的起点

在上面的演示中，您还可以看到如何在SMS IDE中创建一个简单的html项目：）

我已经创建了一个演示，它有意尽可能少地偏离Andre的示例。
更多详细信息，请访问：

@warleyalex你的例子对我很有启发。getID函数正是我所需要的！但不幸的是，它也使短信崩溃。与安德烈的包装解决方案几乎相同

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;
你到底想避免什么包装？包装不一定很难。您可以定义一个智能Pascal类，并使用“external”指令将其链接到相应的JS类。看看Box2d演示。我自己还没有看过three.js源代码，所以我不知道创建一个包装器有多容易，但我知道André（在Smart团队中）正在研究这个问题。也许他会设法为你做一个完整的包装：-）哇-太棒了！你刚刚把three.js:-）竖起大拇指！我认为智能移动工作室有很大的潜力。我一直在看box2d演示，希望我能学会如何制作我自己的小包装，但它太复杂了，太大了，我无法理解。特别是因为js文件被缩小了。我希望有一个对大脑更友好的例子；-）但不管怎样——我越是深入研究短信，我就越喜欢它：-）编译有点小问题；它有让短信崩溃的趋势！？我必须删除www文件夹，使其在编译后不会崩溃。是的，它在我编译它时每秒都会崩溃（在重新启动sms之后）。编译和保存index.html后发生错误。是否有自动保存的错误日志？只需使用另一个浏览器进行尝试，即可正常工作。似乎只有内部浏览器抛出了此错误：-）仅针对记录，我得到了错误：“模块'libcef.dll'。读取地址000000F7'中地址68141F50的访问冲突，以及在另一种情况下模块'ntdll.dll'中的访问冲突，并显示以下消息：“没有默认邮件客户端，或者当前邮件客户端无法完成邮件请求。”