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

を次のように私はあなたが使うモデルはブレンダーでそのテクスチャにマッピングされているどのように探して検討します。また、テクスチャとして使用している画像が回転したり反転したりしていないかどうかを確認してください。