एचटीएमएल पेज

Question

पर थ्री.जेएस दृश्य प्रस्तुत करने के लिए क्लोजरस्क्रिप्ट का उपयोग करना मैं क्लोजरस्क्रिप्ट में तीन.जेएस के लिए Creating a scene उदाहरण को लागू करने की कोशिश कर रहा हूं।

मैं एनीमेशन नहीं कर रहा हूं और बस स्थिर दृश्य (एक हरा ब्लॉक) प्रदर्शित करना चाहता हूं।

समस्या इस प्रस्तुति में दिखाई देती है जिसे दृश्य प्रस्तुत करने के लिए कहा जाता है।

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

यह HTML से कॉलिंग कर रहा है।

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

यह ड्रॉ फ़ंक्शन को देखता है और चलाता है, उदाहरण के लिए, जब मैंने दस्तावेज़ के शरीर में "हेल्लो" प्रिंट किया है।

(.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 फ़ाइल से बनाया है।

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

के तहत: externs और: विदेशी-libs और न काम करने के लिए लगता है project.clj फ़ाइल में cljsbuild

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

मैंने कोशिश की है।

Answer 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 का उपयोग नहीं है; यह प्रत्यक्ष जेएस इंटरऑप का उपयोग करता है और मानता है कि तीन.जेएस पहले लोड किया गया था। यह शायद एक अच्छे तरीके से किया जा सकता है, लेकिन यह एक-से-एक अनुवाद है जो काम करता है।