Question

我尝试导入我的3D模型的JSON导出文件并将其导入Three.js，但似乎缺少一些面孔。

我不确定这是否是导出问题，因为当我旋转它时，左脸存在但右脸不存在，反之亦然。

这是我在Blender中的原始模型：

var scene，camera，renderer;

var WIDTH  = window.innerWidth;
var HEIGHT = window.innerHeight;

var SPEED = 0.01;

function init() {
    scene = new THREE.Scene();

    initMesh();
    initCamera();
    initLights();
    initRenderer();

    document.body.appendChild(renderer.domElement);
}

function initCamera() {
    camera = new THREE.PerspectiveCamera(70, WIDTH / HEIGHT, 1, 10);
    camera.position.set(0, 3.5, 5);
    camera.lookAt(scene.position);
}


function initRenderer() {
    renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(WIDTH, HEIGHT);
}

function initLights() {
    var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.8 );
    directionalLight.position.set( 0, 1, 0 );
    scene.add( directionalLight );
}

var mesh = null;
function initMesh() {
    var loader = new THREE.JSONLoader();
    loader.load('./model.json', function(geometry, materials) {
        mesh = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial(materials));
        mesh.scale.x = mesh.scale.y = mesh.scale.z = 0.75;
        mesh.translation = THREE.GeometryUtils.center(geometry);
        mesh.position.x = -5;
        scene.add(mesh);
    });
}

function rotateMesh() {
    if (!mesh) {
        return;
    }

    mesh.rotation.y -= SPEED;
}

function render() {
    requestAnimationFrame(render);
    rotateMesh();
    renderer.render(scene, camera);
}

init();
render();

希望你能帮我解决这个问题。提前谢谢！

Answer 1

我怀疑你的问题与指向错误方向的面部法线有关。要检查是否是这种情况，您可以尝试将所有材料设置为双面：

materials.forEach(function(mat) {
  mat.side = THREE.DoubleSide;
});

使用双面模式时，无论法线方向如何，都会绘制面，因此如果启用，您应该看到所有面。

或者您可以使用THREE.FaceNormalsHelper自己查看法线。

scene.add(new THREE.FaceNormalsHelper(mesh, 2, 0x00ff00, 1));

这将为所有面部呈现指示正常方向的箭头。

如果法线错误，您可以在搅拌机中通过选择所有受影响的面并使用命令Mesh＆gt; Faces＆gt; Flip Normals从菜单或右侧的工具面板中选择＆＃34;阴影/ UV＆＃34; -Tab。有时只选择所有面孔并运行＆＃34;重新计算法线＆＃34;从工具也将工作。 Blender在＆＃34; Mesh Display＆＃34; -Section的右侧菜单中也有面部法线显示模式。

Three.js - Blender导入后面孔丢失

1 个答案: