在three.js中使用球体上的纹理

我能够使用javascript和three.js库创建球体。然而，我想要将图像叠加在球体上，只要我这样做，球体就会变成一个黑色的球体，而不会将图像投影到其上。这里是我如何实现它： var renderer = new THREE.WebGLRenderer（）; renderer.setSize（window.innerWidth，window.innerHeight）; document.body.appendChild（renderer.domElement）;在three.js中使用球体上的纹理

// camera 
    var camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 1000); 
    camera.position.z = 500; 

    // scene 
    var scene = new THREE.Scene(); 

    // sphere 
    // the first argument of THREE.SphereGeometry is the radius, the second argument is 
    // the segmentsWidth, and the third argument is the segmentsHeight. Increasing the 
    // segmentsWidth and segmentsHeight will yield a more perfect circle, but will degrade 
    // rendering performance 
    var texture = THREE.ImageUtils.loadTexture('beach.jpg', {}, function() { 
    renderer.render(scene, camera); 
    }); 

    texture.needsUpdate = true; 
// texture.wrapS = texture.wrapT = THREE.ClampToEdgeWrapping; 
// texture.repeat.set(125, 125); 
// texture.offset.set(15, 15); 
// texture.needsUpdate = true; 
    var material = new THREE.MeshBasicMaterial({map: texture}); 
    var sphere = new THREE.Mesh(new THREE.SphereGeometry(150, 100, 100), material);  
    //mesh = new THREE.Mesh(sphere, material); 
    //scene.add(mesh); 
// var sphere = new THREE.Mesh(new THREE.SphereGeometry(150, 100, 100), new THREE.MeshNormalMaterial()); 
// sphere.overdraw = true; 
    scene.add(sphere); 


    renderer.render(scene, camera);

我试过了一切，图像没有成功地覆盖在球体顶部，我如何去做这个使用three.js？我的“beach.jpg”文件位于与index.html相同的目录中。

谢谢你的时间，

来源

2013-06-25 Devarsh Desai

试着包括一个图像加载器。图片必须先加载完成，然后才能用作纹理。更多详细信息：https://github.com/mrdoob/three.js/issues/1751

来源

2013-06-25 22:34:40

嘿马塞尔，问题是固定的，我需要有一个动画函数，看起来像下面这样：function animate（）{requestInimationFrame（animate）; renderer.render（scene，camera）; } –

在three.js中使用球体上的纹理

回答

相关问题