I am trying to apply an image to a cube in a three.js (3js) project. I am writing it in clojurescript (cljs). In order to do this, you need to load the image off disk and apply it to the material. The original JavaScript statement looks like:
var material = new THREE.MeshPhongMaterial({map:THREE.ImageUtils.loadTexture("images/webgl-logo-256.jpg")})
The best I can come up with in cljs is:
(def material (js/THREE.MeshPhongMaterial. (clj->js {:map (THREE.ImageUtils.loadTexture "images/webgl-logo-256.jpg")})))
This works, in the sense that it doesn't give me an error, but the cube doesn't have the image applied and instead is dark blue.
Using the type
command, I can see that the map
property, which I assume should have the filename, is not set:
(type material)
function(parameters) {
THREE.Material.call( this );
this.type = 'MeshPhongMaterial';
this.color = new THREE.Color( 0xffffff ); // diffuse
this.ambient = new THREE.Color( 0xffffff );
this.emissive = new THREE.Color( 0x000000 );
this.specular = new THREE.Color( 0x111111 );
this.shininess = 30;
this.metal = false;
this.wrapAround = false;
this.wrapRGB = new THREE.Vector3( 1, 1, 1 );
this.map = null;
# ...
Update: even after solving the problem (see answers below), this.map
still showed as null
in the type
command output. Thus, I think the fields in a type
output are just default values, and you should not expect them to reflect the actual values being used (?)
The part I'm most unsure about is the loadTexture command. I expected it to be written something like:
(.-loadTexture THREE.ImageUtils "images/webgl-logo-256.jpg")
But this returns:
clojure.lang.ExceptionInfo: Unknown dot form of (. THREE.ImageUtils -loadTexture ("images/webgl-logo-256.jpg")) with classification [:cljs.analyzer/expr :cljs.analyzer/property :cljs.analyzer/expr] at line 1 {:tag :cljs/analysis-error, :file "", :line 1, :column 1} nil
Does anyone know how this statement should be written in clojurescript?
(THREE.ImageUtils.loadTexture "images/webgl-logo-256.jpg")
is not a valid ClojureScript function call (at least, with tree.js). This attempt
(.-loadTexture THREE.ImageUtils "images/webgl-logo-256.jpg")
was pretty close. It should be changed to:
(.loadTexture (.-ImageUtils THREE) "images/webgl-logo-256.jpg")
In ClojureScript .
is used for JS function calls (including methods) and .-
for accessing object properties. More details are here .
Based on the suggestion from Jarlax, here is the final solution I came up with.
I implemented it in two forms: one split into two expressions, and one combined. Note: part of the problem was using 'MeshPhongMaterial' instead of 'MeshBasicMaterial'. I could not get the image to display when using 'MeshPhongMaterial', no matter what I did, thus I switched to using "MeshBasicMaterial".
Solution A (two lines):
(def mat-map (.loadTexture (.-ImageUtils js/THREE) "images/webgl-logo-256.jpg"))
(def material (js/THREE.MeshBasicMaterial. (clj->js {:map mat-map})))
Solution B (combined):
(def material (js/THREE.MeshBasicMaterial. (clj->js {:map (.loadTexture (.-ImageUtils js/THREE) "images/webgl-logo-256.jpg")})))
Note: you always need to prefix the THREE object with 'js/' eg "js/THREE", otherwise you get a compile error.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.