1
objファイルから正しく表示されない面が欠落しています。 灰色の部分は、online viewerで表示された同じオブジェクトを示し、すべての面/パーツが正しく表示されます。 
OBJファイルがthreejsで正しくレンダリングされない
下の画像は、私がlocalhostでレンダリングしようとしている画像です。 THREE.js objローダーを使用します。ローダー内child.material.side = THREE.DoubleSide;を追加することにより
window.onload=function(){
init();
animate();
}
function init() {
container = document.getElementById('container');
console.log(container)
camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 2000);
camera.position.x = 100;
camera.position.y = 50;
camera.position.z = 70;
scene = new THREE.Scene();
var ambient = new THREE.AmbientLight(0xffff , 4);
scene.add(ambient);
var directionalLight = new THREE.DirectionalLight(0xffffff ,0.5);
directionalLight.position.set(0, 0, 1000);
scene.add(directionalLight);
controls = new THREE.TrackballControls(camera);
controls.rotateSpeed = 5.0;
controls.zoomSpeed = 2;
controls.panSpeed = 1;
controls.noZoom = false;
controls.noPan = false;
controls.staticMoving = true;
controls.dynamicDampingFactor = 0.5;
controls.keys = [ 65, 83, 68 ];
controls.addEventListener('change', render);
// texture
var manager = new THREE.LoadingManager();
manager.onProgress = function (item, loaded, total) {
console.log(item, loaded, total);
};
var texture = new THREE.Texture();
var onProgress = function (xhr) {
if (xhr.lengthComputable) {
var percentComplete = xhr.loaded/xhr.total * 100;
console.log(Math.round(percentComplete, 2) + '% downloaded');
}
};
var onError = function (xhr) {
};
var loader = new THREE.ImageLoader(manager);
loader.load('textures/GreenWall.jpg', function (image) {
texture.image = image;
texture.needsUpdate = true;
});
var loader = new THREE.OBJLoader(manager);
loader.load('./obj/male02/feder.jt.obj', function (object) {
object.traverse(function (child) {
if (child instanceof THREE.Mesh) {
child.material.map = texture;
}
});
scene.add(object);
}, onProgress, onError);
renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0xdddddd);
renderer.setSize(window.innerWidth/1.5 , window.innerHeight/1.5);
container.appendChild(renderer.domElement );
}
function animate() {
requestAnimationFrame(animate);
render();
controls.update();
}
function render() {
//camera.lookAt(scene.position);
renderer.render(scene, camera);
}<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - loaders - OBJ loader</title>
<meta charset="utf-8">
<meta io ="view" name="viewport" content="width=device-width, height=device-height user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
<script src="./build/three.js"></script>
<script src="./build/Detector.js"></script>
<script src="./build/three.min.js"></script>
<script src="./loaders/OBJLoader.js"></script>
<script src="main.js"></script>
<script src= "Controls/TrackballControls.js"></script>
<div id="container" ></div>
</body>
</html>
「child.material.side = THREE.DoubleSide;」を追加してください – gaitat
ありがとう、それは働いて、オブジェクトをワールドセンターの中心に置く方法がありますか？私がそれを回転させると、それは冒頭点で回転します。 –