将图像环绕球体

Question

我已经阅读了很多关于此的 blogs/questions 但没有找到正确的答案。我正在 three.js 中创建一个地球。但是每次我映射我的纹理和凹凸贴图时它都不会显示。也没有任何控制台错误。它仍然在球体上显示我的光，所以球体仍然存在。但是纹理不会显示。 :(

var scene,
    camera,
    light,
    renderer,
    earthObject;

var WIDTH = window.innerWidth,
    HEIGHT = window.innerHeight;

var angle = 45,
    aspect = WIDTH / HEIGHT,
    near = 0.1,
    far = 3000;

//Environment

var container = document.getElementById('container');

camera = new THREE.PerspectiveCamera(angle, aspect, near, far);
camera.position.set(0, 0, 0);
scene = new THREE.Scene();

//light

scene.add(new THREE.AmbientLight(0x333333));

var light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(5,3,5);
scene.add(light);

var earthGeo = new THREE.SphereGeometry (30, 40, 400), 
    earthMat = new THREE.MeshPhongMaterial(); 

// diffuse map
earthMat.map = THREE.ImageUtils.loadTexture('http://i317248.iris.fhict.nl/LSTE/globe/Images/globe.jpg');

// bump map
earthMat.bumpMap = THREE.ImageUtils.loadTexture('http://i317248.iris.fhict.nl/LSTE/globe/Images/bump.jpg');
earthMat.bumpScale = 8;


var earthMesh = new THREE.Mesh(earthGeo, earthMat);
earthMesh.position.set(-100, 0, 0); 
earthMesh.rotation.y=5;

scene.add(earthMesh);


camera.lookAt( earthMesh.position );

//Renderer code.
var renderer = new THREE.WebGLRenderer({antialiasing : true});
renderer.setSize(WIDTH, HEIGHT);
renderer.domElement.style.position = 'relative';

container.appendChild(renderer.domElement);
renderer.autoClear = false;
renderer.shadowMapEnabled = true;

function render () {
   renderer.render(scene, camera);
}

render();

Answer 1

您的代码中有两个问题：

您没有在渲染场景之前等待图像加载
您遇到了跨域策略问题 (https://en.wikipedia.org/wiki/Same-origin_policy)，因此实际上从未加载图像

将图像环绕球体

Wrapping images around sphere

javascript

three.js

texture-mapping