如何讓我的材料顯示在一個球體

Question

// set the scene size 
var WIDTH = 1650, 
    HEIGHT = 700; 

// set some camera attributes 
var VIEW_ANGLE = 100, 
    ASPECT = WIDTH/HEIGHT, 
    NEAR = 0.1, 
    FAR = 10000; 

// get the DOM element to attach to 
// - assume we've got jQuery to hand 
var $container = $('#container'); 

// create a WebGL renderer, camera 
// and a scene 
var renderer = new THREE.WebGLRenderer(); 
var camera = new THREE.PerspectiveCamera( VIEW_ANGLE, 
           ASPECT, 
           NEAR, 
           FAR ); 

//camera.lookAt(new THREE.Vector3(0, 0, 0)); 

var scene = new THREE.Scene(); 

// the camera starts at 0,0,0 so pull it back 
camera.position.x = 200; 
camera.position.y = 200; 
camera.position.z = 300; 


// start the renderer 
renderer.setSize(WIDTH, HEIGHT); 

// attach the render-supplied DOM element 
$container.append(renderer.domElement); 

// create the sphere's material 
var sphereMaterial = new THREE.MeshLambertMaterial(
{ 
    color: 0xCC0000 
}); 

// set up the sphere vars 
var radius = 60, segments = 20, rings = 20; 

// create a new mesh with sphere geometry - 
// we will cover the sphereMaterial next! 
var sphere = new THREE.Mesh(
    new THREE.SphereGeometry(radius, segments, rings), 
    img); 

// add the sphere to the scene 
scene.add(sphere); 

// and the camera 
scene.add(camera); 

// create a point light 
var pointLight = new THREE.PointLight(0xFFFFFF); 

// set its position 
pointLight.position.x = 50; 
pointLight.position.y = 100; 
pointLight.position.z = 180; 

// add to the scene 
scene.add(pointLight); 

// add a base plane 
var planeGeo = new THREE.PlaneGeometry(500, 500,8, 8); 
var planeMat = new THREE.MeshLambertMaterial({color: 0x666699}); 
var plane = new THREE.Mesh(planeGeo, planeMat); 

plane.position.x = 160; 
plane.position.y = 0; 
plane.position.z = 20; 

//rotate it to correct position 
plane.rotation.x = -Math.PI/2; 
scene.add(plane); 

// add 3D img 

var img = new THREE.MeshBasicMaterial({ 
map:THREE.ImageUtils.loadTexture('cube.png') 
}); 
img.map.needsUpdate = true; 

// draw! 
renderer.render(scene, camera); 

我已經把變種IMG作爲材料球體，但每次我使其aoutomaticly改變顏色...... 如何做到這一點它只是將有我想要的圖像...不是所有的顏色？ 我可能把img放在飛機上。

Answer 1

您需要使用loadTexture函數的回調函數。如果你指的是source of THREE.ImageUtils你會看到loadTexture函數定義爲

loadTexture: function (url, mapping, onLoad, onError) { 

     var image = new Image(); 
     var texture = new THREE.Texture(image, mapping); 

     var loader = new THREE.ImageLoader(); 

     loader.addEventListener('load', function (event) { 

      texture.image = event.content; 
      texture.needsUpdate = true; 

      if (onLoad) onLoad(texture); 

     }); 

     loader.addEventListener('error', function (event) { 

      if (onError) onError(event.message); 

     }); 

     loader.crossOrigin = this.crossOrigin; 
     loader.load(url, image); 

     return texture; 

    }, 

在這裏，只需要URL參數。紋理映射可以作爲null傳入。最後兩個參數是回調。您可以爲每個函數傳入一個函數，這將在相應的加載和錯誤事件中調用。您遇到的問題很可能是由於three.js在正確加載紋理之前試圖應用您的材質所致。爲了解決這個問題，你只能在一個作爲onLoad回調函數傳遞的函數內執行這個操作（只在圖像加載完成後調用）。此外，您應該始終創建您的材料，然後再將其應用到對象。

所以，你應該從改變你的代碼：

// set up the sphere vars 
var radius = 60, segments = 20, rings = 20; 

// create a new mesh with sphere geometry - 
// we will cover the sphereMaterial next! 
var sphere = new THREE.Mesh(
    new THREE.SphereGeometry(radius, segments, rings), 
    img); 

// add the sphere to the scene 
scene.add(sphere); 

喜歡的東西：

var sphereGeo, sphereTex, sphereMat, sphereMesh; 
var radius = 60, segments = 20, rings = 20; 

sphereGeo = new THREE.SphereGeometry(radius, segments, rings); 
sphereTex = THREE.ImageUtils.loadTexture('cube.png', null, function() { 
    sphereMat = new THREE.MeshBasicMaterial({map: sphereTex}); 
    sphereMesh = new THREE.Mesh(sphereGeo, sphereMat); 
    scene.add(sphereMesh); 
});