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）

这是我想要使用的图像

Answer 1

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

three.js r.77

Answer 2

我遇到了这个问题。它不显示图像的“颜色主导”颜色，它显示左下角的像素。了解图像如何映射到webgl中的纹理对此有帮助。

你获得纯色的原因是因为导入的模型没有UV坐标（纹理坐标的一个奇特的术语，我假设它来自纹理矢量变量“s，t，u，v”你可能已经看到过它与模型数据一起导出。

如果从Blender检查JSON导出，在无UV版本中你应该注意到UV数组实际上是空的。如果您导出像立方体这样简单的东西来减少噪音，这将更容易验证。

从Blender导出模型时，需要导出为'geometry'而不是'BufferGeometry'。这将启用“面料”复选框，您应该检查。然后检查导出的JSON，你应该看到一个填充的uv数组;这些是你的纹理坐标，然后你应该可以毫无问题地应用纹理。

我强烈建议您阅读有关纹理here的WebGL基础知识页面。

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

2 个答案: