javascript - Three.js 使用图像主色而不是图像本身

Question

我正在尝试使用 Three.js。我想将图像作为纹理应用到对象上，但由于某种原因，当我应用图像时，我似乎只获得了图像的主色。我查遍了网络，没有找到有类似问题的人。

正如您从 json 文件中看到的，我尝试使用“mapDiffuse”变量中的图像，然后尝试使用代码应用纹理，并得到相同的结果

这是 json 对象文件:

{

"metadata" :
{
    "formatVersion" : 3.1,
    "sourceFile"    : "newBox.obj",
    "generatedBy"   : "OBJConverter",
    "vertices"      : 8,
    "faces"         : 6,
    "normals"       : 6,
    "colors"        : 0,
    "uvs"           : 0,
    "materials"     : 1
},

"scale" : 1.000000,

"materials": [  {
    "DbgColor" : 15658734,
    "DbgIndex" : 0,
    "DbgName" : "Material.002",
    "colorDiffuse" : [0.64, 0.64, 0.64],
    "colorSpecular" : [0.5, 0.5, 0.5],
    "illumination" : 2,
    "mapDiffuse" : "test.JPG",
    "opacity" : 1.0,
    "opticalDensity" : 1.0,
    "specularCoef" : 96.078431
}],

"vertices": [1.000000,-1.000000,-1.000000,1.000000,-1.000000,1.000000,-1.000000,-1.000000,1.000000,-1.000000,-1.000000,-1.000000,1.000000,1.000000,-0.999999,0.999999,1.000000,1.000001,-1.000000,1.000000,1.000000,-1.000000,1.000000,-1.000000],

"morphTargets": [],

"morphColors": [],

"normals": [0,-1,0,0,1,0,1,0,0,-0,-0,1,-1,-0,-0,0,0,-1],

"colors": [],

"uvs": [[]],

"faces": [35,0,1,2,3,0,0,0,0,0,35,4,7,6,5,0,1,1,1,1,35,0,4,5,1,0,2,2,2,2,35,1,5,6,2,0,3,3,3,3,35,2,6,7,3,0,4,4,4,4,35,4,0,3,7,0,5,5,5,5]

}

这是我的 JavaScript:

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer({alpha:true});
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var mesh;

/**
 * Texture
 */
var texture = THREE.ImageUtils.loadTexture( "/files/test/Three-js-examples-images-crate.jpg" );
var material = new THREE.MeshBasicMaterial( { map : texture } );


// instantiate a loader
var loader = new THREE.JSONLoader();

// load a resource
loader.load(
    // resource URL
    '/files/test/untitled.json',
    // Function when resource is loaded
    function ( geometry ) {
        mesh = new THREE.Mesh(geometry,material);
        mesh.scale.x = 0.8;
        mesh.scale.y = 0.8;
        mesh.scale.z = 0.8;
        scene.add( mesh );
    }
);

camera.position.z = 5;

function render() {
    requestAnimationFrame( render );
    mesh.rotation.x += 0.0001;
    mesh.rotation.y += 0.01;

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

这是我得到的结果(它是从 Photoshop 中拉伸(stretch)出来的)

这是我要使用的图像

Answer 1

如果要将纹理应用于 json 加载的模型，您的 json 文件必须指定 UV。

三.js r.77