Three.js verwendet Bild-dominante Farbe anstelle von Bild selbst

Question

Ich gehe mit three.js. Ich möchte ein Bild als Textur auf das Objekt anwenden, aber aus irgendeinem Grund, wenn ich ein Bild anwende, scheint ich nur die dominante Farbe des Bildes zu bekommen. Ich habe mich im Internet umgesehen und konnte niemanden mit ähnlichen Problemen finden.

Wie Sie aus JSON-Datei sehen können, habe ich versucht, das Bild von „mapDiffuse“ Variable verwendet wird, und dann habe ich versucht, die Textur der Anwendung des Code und ich bekomme das gleiche Ergebnis

der Dies ist die json Objektdatei:

{ 

"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] 

}

Und das ist mein 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(); 

Dies ist das Ergebnis erhalte ich (sein von Photoshop streched)

Dies ist das Bild, das ich

Answer 1

verwenden möchten Wenn Sie eine Textur auf eine anwenden möchten Json-geladenes Modell, Ihre JSON-Datei muss UVs angeben.

three.js r.77

Answer 2

ich in dieser Ausgabe lief. Es zeigt nicht die "farbdominante" Farbe Ihres Bildes an, es zeigt das untere linke Pixel an. Das Verständnis, wie Bilder in webgl Texturen zugeordnet werden, ist hilfreich.

Der Grund, warum Sie eine Volltonfarbe erhalten, liegt daran, dass Ihr importiertes Modell nicht die UV-Koordinaten hat (ein fantastischer Begriff für Texturkoordinaten, von denen ich annimmt, dass sie von den Texturvektorvariablen "s, t, u, v "die Sie wahrscheinlich schon herumliegen gesehen haben" exportiert mit den Modelldaten.

Wenn Sie den JSON-Export von Blender überprüfen, sollten Sie in Ihrer UV-losen Version bemerken, dass das UV-Array tatsächlich leer ist. Dies ist einfacher zu überprüfen, wenn Sie etwas Einfaches wie einen Würfel exportieren, um das Rauschen zu reduzieren.

Wenn Sie Ihr Modell von Blender exportieren, müssen Sie es als "Geometrie" und nicht als "BufferGeometry" exportieren. Dadurch wird das Kontrollkästchen "Materialien für Gesicht" aktiviert, das Sie überprüfen sollten. Überprüfen Sie dann Ihren exportierten JSON und Sie sollten ein bestücktes uv-Array sehen; Dies sind Ihre Texturkoordinaten und Sie sollten dann in der Lage sein, eine Textur ohne Probleme anzuwenden.

Ich empfehle dringend, lesen Sie auf der WebGL Grundlagen Seite über Texturen here.