0

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);
}
7
  • Where are you creating your material? Commented Jan 5, 2016 at 0:36
  • Code wise or program wise? FYI I fixed it somehow, no idea how but it works. Commented Jan 5, 2016 at 1:04
  • I meant code wise, Somewhere you will need material = new THREE.MeshBasicMaterial() or similar. Commented Jan 5, 2016 at 5:11
  • I believe the image loader takes care of that. Thats all under //Texture Commented Jan 5, 2016 at 17:27
  • I think its the model thats giving me the problem because when i bring in a model that mr.doob created it works. But if I use a model I exported from C4D as wavefront - obj it doesn't show up. Commented Jan 5, 2016 at 18:36

1 Answer 1

1

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.

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.