使用clojurescript渲染HTML頁面

我想實現在clojurescript three.js所的Creating a scene例如在three.js所現場。使用clojurescript渲染HTML頁面

我沒有做動畫，只是想顯示靜態場景（綠框）。

的問題似乎是在這個函數被調用來渲染場景。

(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"]}]

我想：實習醫生和：外國庫既不似乎工作。

來源

2013-01-23 Kao Nashi

我認爲，如果你寫的完全一樣的方法會有所幫助，但在純JS，所以我們可以消除譯碼器作爲問題。另外，是否有堆棧跟蹤是否無錯，但什麼都不顯示？ –

的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。它可能會以更好的方式完成，但這是一種一對一的翻譯方式。

來源

2013-08-29 10:05:33 f3lix

使用clojurescript渲染HTML頁面

回答

相關問題