Как сделать материал показать на сфере

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); 
});