jSON對象上的three.js紋理

Question

我正在使用three.js在自定義項目中將HTML5畫布導出為3D預覽。 我的預期結果是紋理應僅放置在正面。 但是，它出現在各個方面。

我的代碼：

var scene, renderer, camera;
var controls;
init();
animate();

function init()
{
var width = window.innerWidth;
var height = window.innerHeight;

renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize (width, height);
renderer.setClearColor (0x888888);
document.body.appendChild (renderer.domElement);

scene = new THREE.Scene();

camera = new THREE.PerspectiveCamera (45, width/height, 1, 10000);
camera.position.y = 120;
camera.position.z = 120;
camera.lookAt (new THREE.Vector3(0,0,0));

controls = new THREE.OrbitControls (camera, renderer.domElement);

var hemiLight = new THREE.HemisphereLight( 0xffffff, 0xffffff, 0.6 );
hemiLight.color.setHSL( 0.6, 1, 0.6 );
hemiLight.groundColor.setHSL( 0.095, 1, 0.75 );
hemiLight.position.set( 0, 500, 0 );
scene.add( hemiLight );

var ambientLight = new THREE.AmbientLight (0xffffff);
scene.add(ambientLight);

//manager
var manager = new THREE.LoadingManager();
manager.onProgress = function (item, loaded, total) {
console.log( item, loaded, total );
};

var texture = new THREE.Texture();
var loader = new THREE.ImageLoader( manager );
loader.load( 'texturemug.jpg', function ( image ) {
console.log('load image');
texture.image = image;
texture.needsUpdate = true;
});

var loader = new THREE.ObjectLoader(manager);
loader.load ('shirt.json', function ( obj ) {
obj.traverse( function (child) {
if ( child instanceof THREE.Mesh ) {
child.material.map = texture;
child.material.needsUpdate = true;
}
});
scene.add( obj );
});
}

function animate()
{
controls.update();
requestAnimationFrame ( animate ); 
renderer.render (scene, camera);
}

但是，我得到了意外的輸出。 如下，

Answer 1

我會考慮研究您使用的模型如何在Blender中與該紋理映射。 還要檢查用作紋理的圖像是否沒有旋轉或翻轉