Three.js Cannot find Obj - three.js

Question

I am using the file from three.js and used the OBJloader and render with canvas. Except that I cannot find the object even when I scale the object by 1000 and set the camera to 2. The code is as below.
<script src="../mrdoob/build/three.min.js"></script>
<script src="../mrdoob/examples/js/loaders/OBJLoader.js"></script>
<script src="../mrdoob/examples/js/renderers/CanvasRenderer.js"></script>
<script src="../mrdoob/examples/js/renderers/Projector.js"></script>
<script>
var container;
var camera, scene, renderer;
var mouseX = 0, mouseY = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
init();
animate();
function init() {
container = document.createElement('div');
document.body.appendChild(container);
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 2000);
//camera.position.z = 100;
camera.position.z = 2;
// scene
scene = new THREE.Scene();
var ambient = new THREE.AmbientLight(0x101030);
scene.add(ambient);
var directionalLight = new THREE.DirectionalLight(0xffeedd);
directionalLight.position.set(0, 0, 1);
scene.add(directionalLight);
// 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) {
alert(xhr);
};
alert("hi");
var loader = new THREE.ImageLoader(manager);
loader.load('../mrdoob/examples/textures/UV_Grid_Sm.jpg', function (image) {
texture.image = image;
texture.needsUpdate = true;
});
// model
alert("hi2");
var loader = new THREE.OBJLoader();
loader.load('../mrdoob/examples/obj/male02/male02.obj', function (object) {
object.scale = new THREE.Vector3(1000, 1000, 1000);
alert(object.position.y);
scene.add(object);
});
//
alert("hi3");
renderer = new THREE.CanvasRenderer();
renderer.setClearColor(0xf0f0f0);
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);
document.addEventListener('mousemove', onDocumentMouseMove, false);
//
window.addEventListener('resize', onWindowResize, false);
alert("hi4");
}
function onWindowResize() {
windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function onDocumentMouseMove(event) {
mouseX = (event.clientX - windowHalfX) / 2;
mouseY = (event.clientY - windowHalfY) / 2;
}
//
function animate() {
requestAnimationFrame(animate);
render();
}
function render() {
camera.position.x += (mouseX - camera.position.x) * .05;
camera.position.y += (-mouseY - camera.position.y) * .05;
camera.lookAt(scene.position);
renderer.render(scene, camera);
}
</script>
I did an alert on the object and the position turns out to be zero, so I am not sure if the object is correctly loaded. If someone can tell me how to look for the object would be good.

Answer 1

It may cause if the camera located inside your object, then it always see the back faces of your object and ignore it.
Please provide jsfiddle live example.