OpenLayers 3 and Three.js

Question

I have asked this question in StackOverflow, but got no useful answer - So perhaps I could get some help here.

I would like to generate a 3d Terrain using THREE.js, and I would like to overlay OpenLayers upon it. Does anyone know how to do it?

EDIT: I tried this (based on this)

var sphere2 = new THREE.Mesh(new THREE.SphereGeometry(60, 100, 100),material2);
scene.add(sphere2);
sphere2.position = new THREE.Vector3(100,230,140);
var material3= new THREE.MeshPhongMaterial();
material3.map = THREE.ImageUtils.loadTexture('http://vmap0.tiles.osgeo.org/wms/vmap0?SERVICE=WMS&VERSION=1.3.0&REQUEST=GetMap&LAYERS=basic&CRS=epsg:4326&BBOX=-90,-180,90,180&WIDTH=500&HEIGHT=500&FORMAT=image/png');

This should generate a sphere, and map the texture as returned by the WMS call to the sphere, making a full earth - but it does not load anything - the screen remains black.

Answer 1

There is question titled Geographic rasters in three.js scene at Stack Overflow that refers to loading a tile from WMS and using it as a texture in THREE.js.

You can request a WMS tile by sending a complete wms request url with bounds, etc. This is covered in this answer by @iant to a question on Displaying a GeoServer Map from a Java Mobile Application.

Answer 2

You have not written it right ...... try this one....

var geo_earth = new THREE.SphereGeometry(10, 32, 32);
var txtr_earth = THREE.ImageUtils.loadTexture('../api/proxy/getmap');
var mat_earth = new THREE.MeshBasicMaterial({map: txtr_earth}); 

var sphere2 = new THREE.Mesh(geo_earth, mat_earth);
scene.add(sphere2);

I used a proxy to server my image because the request was insecure.