0
我正在使用three.js將HTML5 canvas導出爲我的自定義項目上的3D預覽。 我的預期結果是紋理應該只放在正面。 但是，它出現在所有方面。jSON對象上的three.js紋理
我的代碼：
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);
}
但是，我越來越不可預測的輸出。如下，
