Clojurescript를 사용하여 HTML 페이지에서 Three.js 장면 렌더링

Question

클로저 스크립트에서 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> 

이 아래 clojurescript 파일에서 생성 된 자바 스크립트입니다 main.js의 끝입니다. 아래에서

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 코드의 직접 번역은 다음과 같습니다 :foreign-libs 및 :require를 사용하지 않는

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

이를; 직접 JS interop을 사용하고 three.js가 이전에로드되었다고 가정합니다. 아마도 더 좋은 방법으로 수행 될 수 있지만 이것은 일대일 번역입니다.