Question

嘿伙计们所以我试图让3D OBJ文件加载Loader并且控制台说3D模型和纹理已经加载但屏幕上没有显示任何内容。我从three.js文件中提取了3D模型和纹理。我不知道我做错了什么。这是zip文件，如果这有助于任何：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);
}

Answer 1

从C4D导出.obj文件时，请确保您的比例设置为1.如果您想要更大的对象，请将其缩放为C4D或三个.js。我还建议将你的单位从厘米改为英尺。

Three.js OBJ模型没有显示出来

1 个答案: