Three.js OBJ 模型未显示答案

【问题标题】：Three.js OBJ model not showing upThree.js OBJ 模型未显示
【发布时间】：2016-01-06 05:39:34
【问题描述】：

大家好，我尝试使用加载器加载 3D OBJ 文件，控制台显示 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);
}

【问题讨论】：

你在哪里创建你的材料？
代码明智还是程序明智？仅供参考，我以某种方式修复了它，不知道它是如何工作的。
我的意思是代码方面，你需要material = new THREE.MeshBasicMaterial()或类似的地方。
我相信图像加载器会解决这个问题。这就是 //Texture 下的全部内容
我认为这是给我带来问题的模型，因为当我引入 mr.doob 创建的模型时，它可以工作。但是，如果我使用从 C4D 导出的模型作为波前 - obj 它不会显示出来。

标签： javascript three.js

【解决方案1】：

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

【讨论】：