2016-11-18 4 views
0

Я использую three.js для экспорта холста HTML5 в виде предварительного просмотра 3D в моем проекте настройки. Мой ожидаемый результат: текстура должна быть размещена только на лицевой стороне. Но он появляется со всех сторон.Текстура three.js на объекте jSON

Мой код:

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); 
} 

Но, я получаю неожиданный выход. как следует,

enter image description here

ответ

1

Я хотел бы рассмотреть глядя, как модель используется сопоставляются с этой текстурой в блендер. А также проверьте, не изменилось ли изображение, которое вы используете как текстуру, во вращение или перевернуто