如何让材质出现在球体上 [英] How do I make a material show up on a sphere

问题描述

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

我已将 var img 作为材料放入球体，但每次渲染它时都会自动更改颜色...我该怎么做，它只会有我想要的图像......不是所有的颜色?我可能会把 img 放在飞机上.

I've put the var img as a material to the sphere but everytime I render it aoutomaticly changes color... How do I do so it just will have the image as I want... not all the colors? I whould possibly put the img on a plane.

推荐答案

需要使用loadTexture函数的回调.如果您参考 THREE.ImageUtils 的来源 你会看到loadTexture函数定义为

You need to use the callback of the loadTexture function. If you refer to the source of THREE.ImageUtils you will see that the loadTexture function is defined as

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 回调传递的函数中执行此操作(只会在图像加载后调用).此外，您应该始终在将材料应用于对象之前创建材料.

Here, only the url parameter is required. The texture mapping can be passed in as null. The last two parameters are the callbacks. You can pass in a function for each one which will be called at the respective load and error events. The problem you are experiencing is most likely caused by the fact that three.js is attempting to apply your material before your texture is properly loaded. In order to remedy this, you should only do this inside a function passed as the onLoad callback (which will only be called after the image has been loaded up). Also, you should always create your material before you apply it to an object.

所以你应该改变你的代码:

So you should change your code from:

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

这篇关于如何让材质出现在球体上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！