Sử dụng clojurescript để hiển thị cảnh Three.js trên trang HTML

Question

Tôi đang cố triển khai ví dụ Creating a scene cho ba.js trong clojurescript.

Tôi không thực hiện hoạt ảnh và chỉ muốn hiển thị cảnh tĩnh (khối màu xanh lục).

Sự cố có vẻ như trong hàm này được gọi để hiển thị cảnh.

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

Đây là những gì đang thực hiện cuộc gọi từ HTML.

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

Nó thấy và chạy hàm vẽ, ví dụ: khi tôi in ra "HELLO" vào phần thân của tài liệu.

(.write js/document "HELLO") 

Tôi không biết có gì sai, mọi thứ khác trên trang được hiển thị.

Trong tập tin HTML này, tôi có

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

và

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

Dưới đây là kết thúc của main.js, đó là Javascript được tạo ra từ các tập tin clojurescript.

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); 

Under: cljsbuild trong file project.clj có

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

tôi đã cố gắng: externs và: ngoại-libs và không có vẻ làm việc.

Answer 1

Bản dịch trực tiếp của mã Creating a scene sẽ là:

(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) 
    ) 
) 

này không được sử dụng :foreign-libs và :require; nó sử dụng interop JS trực tiếp và giả định rằng ba.js đã được tải trước đó. Nó có thể có thể được thực hiện một cách đẹp hơn, nhưng đây là một bản dịch một-một mà hoạt động.