CODEWITHSUNDEEP
javascriptthree.js
rikuto148
rikuto148

Reputation: 263

Three.js OBJ model not showing up

Hey guys so I tried to get the 3D OBJ file to load with a Loader and the console says the 3D model and texture have been loaded but nothing shows up on the screen. I pulled the 3D model and texture from the three.js files. I have no idea what I'm doing wrong. Here is the zip file if that helps any: https://www.dropbox.com/s/mzimqhbl7vnw7or/newShoeVr.zip?dl=0

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;

//Scene
scene = new THREE.Scene();

//Light
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){};

var loader = new THREE.ImageLoader(manager);
loader.load('textures/brick_diffuse.jpg', function(image){
    texture.image = image;
    texture.needUpdate = true;
});

//Model
var loader = new THREE.OBJLoader(manager);
loader.load('models/tree.obj', function(object){
    object.traverse(function(child){
        if(child instanceof THREE.Mesh){
            child.material.map = texture;
        }
    });

    object.position.y = -80;
    object.scale.set(5,5,5);
    scene.add(object);
}, onProgress, onError);

//Model
var loader = new THREE.OBJLoader(manager);
loader.load('models/tree.obj', function(object){
    object.traverse(function(child){
        if(child instanceof THREE.Mesh){
            child.material.map = texture;
        }
    });

    //object.position.y = -80;
    object.scale.set(5,5,5);
    scene.add(object);
}, onProgress, onError);

renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);

document.addEventListener('resize', onWindowResize, false);

}

function onWindowResize(){
    windowHalfX = window.innerWidth / 2;
    windowHalfY = window.innerHeight / 2;

    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectMatrix();

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

Upvotes: 0

Views: 1483

Answers (1)

rikuto148
rikuto148

Reputation: 263

When exporting a .obj file from C4D make sure your scale is set to 1. If you want a larger object, either scale it in C4D or in three.js. I also suggest changing your units from cm to ft.

Upvotes: 1

Related Questions