Sphere Geometry using Three.js

by fxi

HTML

<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.4.0/mapbox-gl.js"></script>
<link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.4.0/mapbox-gl.css">
<span>Project map canvas on another surface shape</span>

JavaScript

mapboxgl.accessToken = 'pk.eyJ1IjoiZnhpIiwiYSI6IlB4Qm9kQlUifQ.2ly-1xBa1ugPOmiWbTsaiA';

var elMap = document.createElement('div');
var object, renderer, material, scene, camera, geometry;

elMap.style.width = "512px";
elMap.style.height = "256px";
document.body.appendChild(elMap);

var map = new mapboxgl.Map({
  container: elMap,
  style: 'mapbox://styles/mapbox/streets-v9',
  center: [0, 0],
  zoom: 0,
  zoomMax: 0,
  preserveDrawingBuffer: true
});


map.on('load', init);


function init() {

  var elCanvas = map.getCanvas();

  scene = new THREE.Scene();
  scene.background = new THREE.Color(0xffffff);
  camera = new THREE.PerspectiveCamera(50, 500 / 400, 0.1, 1000);

  renderer = new THREE.WebGLRenderer({
    elCanvas
  });
  renderer.setSize(500, 400);
  document.body.appendChild(renderer.domElement);

var points = [];
for ( var i = 0; i < 10; i ++ ) {
	points.push( new THREE.Vector2( Math.sin( i * 0.3 ) * 10 + 5, ( i - 5  ) * 1 ) );
}
var geometry = new THREE.LatheGeometry( points , 100, Math.PI );


  var texture = new THREE.CanvasTexture(elCanvas);

  material = new THREE.MeshBasicMaterial({
    map: texture
  })

  object = new THREE.Mesh(geometry, material);
  //object.rotation.y = (Math.PI * 2 ) / 2;

  //material.side = THREE.BackSide;

  scene.add(object);
  
  
  
  
  camera.position.z = 40;
  render();
  map.on('move', update);
}

function render() {

    renderer.render(scene, camera);
}

function update() {
  material.map.needsUpdate = true;
  render();
}