使用 clojurescript 在 HTML 页面上渲染 Three.js 场景答案

【问题标题】：Using clojurescript to render Three.js scene on HTML page使用 clojurescript 在 HTML 页面上渲染 Three.js 场景
【发布时间】：2013-01-06 09:39:01
【问题描述】：

我正在尝试在clojurescript 中为three.js 实现Creating a scene 示例。

我没有做动画，只想显示静态场景（绿色块）。

问题似乎出在调用渲染场景的这个函数中。

    (defn ^:export draw []
      (.render renderer scene camera)
    )

这就是从 HTML 调用的内容。

    %script{:type => "text/javascript"}
      three.demo.draw();

它查看并运行绘图功能，例如，当我让它打印出“HELLO”到文档正文时。

    (.write js/document "HELLO")

我不知道出了什么问题，页面上的其他所有内容都已呈现。

在这个 HTML 文件中，我有

<script src='https://raw.github.com/mrdoob/three.js/master/build/three.js'></script>
<script src='js/main.js' type='text/javascript'></script>
<script type='text/javascript'>goog.require('main')</script>

和

<script type='text/javascript'>
  three.demo.draw();
</script>

下面是 main.js 的结尾，它是从 clojurescript 文件创建的 Javascript。

    goog.provide("three.demo");
    goog.require("cljs.core");
    goog.require("goog.dom");
    three.demo.scene = new THREE.Scene;
    three.demo.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1E3);
    three.demo.renderer = new THREE.WebGLRenderer;
    three.demo.renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(three.demo.renderer.domElement);
    three.demo.geometry = new THREE.CubeGeometry(1, 1, 1);
    three.demo.material = new THREE.MeshBasicMaterial(cljs.core.ObjMap.fromObject(["\ufdd0'color"], {"\ufdd0'color":255}));
    three.demo.cube = new THREE.Mesh(three.demo.geometry, three.demo.material);
    three.demo.scene.add(three.demo.cube);
    three.demo.camera.position.setZ(5);
    three.demo.draw = function draw() {
      three.demo.renderer.render(three.demo.scene, three.demo.camera);
      return document.write("HELLO")
    };
    goog.exportSymbol("three.demo.draw", three.demo.draw);

project.clj文件中的:cljsbuild下有

    :foreign-libs [{:file "https://raw.github.com/mrdoob/three.js/master/build/three.js"
                    :provides ["three"]}]

我尝试了 :externs 和 :foreign-libs 似乎都不起作用。

【问题讨论】：

我认为如果您编写完全相同的方法，但在纯 JS 中，这将有所帮助，因此我们可以消除代码翻译的问题。另外，是否有堆栈跟踪表明它没有出错但什么也不显示？

标签： html three.js clojurescript

【解决方案1】：

Creating a scene 代码的直接翻译是：

(defn ^:export example []
  (let [scene (js/THREE.Scene.)
        width (.-innerWidth js/window)
        height (.-innerHeight js/window)
        camera (js/THREE.PerspectiveCamera. 75 (/ width height) 0.1 1000 )
        renderer (js/THREE.CanvasRenderer.)
        geometry (js/THREE.CubeGeometry. 1 1 1)
        material (js/THREE.MeshBasicMaterial. (clj->js {:color 0x00ff00}))
        cube (js/THREE.Mesh. geometry material)
        render (fn cb []
                   (js/requestAnimationFrame cb) 
                   (set! (.-x (.-rotation cube))  (+ 0.1 (.-x (.-rotation cube))) )
                   (set! (.-y (.-rotation cube))  (+ 0.1 (.-y (.-rotation cube))) )
                   (.render renderer scene camera)
                 ) 
        ]
    (.setSize renderer width height)
    (.appendChild js/document.body (.-domElement renderer) )
    (.add scene cube)
    (set! (.-z (.-position camera))  5)
    (render)
    )
  )

这里没有使用:foreign-libs和:require；它使用直接的 JS 互操作并假定之前加载了 three.js。它可能以更好的方式完成，但这是一个有效的一对一翻译。

【讨论】：