Vaadin javascript THREE.js Eclipse: loading texture does not work

I am using the AbstractJavaScriptComponent to include javascript into Vaadin. I am using the THREE.js library. My javascript code works in a plain html file. But when I use the same code in Vaadin I can not load a texture image.

var geometry = new THREE.PlaneBufferGeometry(1579, 1974);
var material = new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture(‘map.jpg’) } );
var plane = new THREE.Mesh(geometry, material);
scene.add(plane);

I am working in Eclipse and are starting a server to view the page at localhost in my browser. Alternatively to a local file a have tried the load the image from the internet, but that does not work either.

I found a solution.
In my maven vaadin project I added a folder called VAADIN at
src/main/resources/VAADIN
and placed the images inside this folder.
In my javascript I referenced the images with ‘./VAADIN/xxx.png’
Now the images are loaded.

If you made anything cool with it, it’d be nice to see a screenshot :slight_smile:


with OrbitControls.js it is possible to pan, rotate and zoom
the final product will have more columns

Very nice! Thanks for sharing.

-Olli