Three.js - 在Blender導入後丟失的面孔

我試圖導入我的3D模型的JSON導出文件並將其導入Three.js，但似乎有些面孔丟失。Three.js - 在Blender導入後丟失的面孔

我不確定它是否是導出問題，因爲當我旋轉它時，左面存在但右面不存在，反之亦然。

這是我在攪拌機原始模型：

VAR的場景，相機，渲染器;

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

希望你能幫助我解決這個問題。在此先感謝！

來源

2016-12-04 CudoX

我會懷疑你的問題與面部法線指向錯誤的方向有關。要檢查，如果這是你可以嘗試將所有材料雙面的情況下：如果啓用

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

用雙面模式，臉上都不管法線方向的繪製，所以你會看到所有的面。您可以使用THREE.FaceNormalsHelper自己查看法線。

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

這將呈現指示正常方向的所有面的箭頭。

如果法線錯誤，您可以通過選擇所有受影響的面並在菜單中使用命令「網格>面」>「翻轉法線」或在右側的「工具面板」中的「着色/ UV「-Tab。有時只需選擇所有面並從「工具」運行「重新計算法線」即可。「網格顯示」 - 部分的右手菜單中的攪拌機還具有用於面部法線的顯示模式。

來源

2016-12-04 22:36:26

Three.js - 在Blender導入後丟失的面孔

回答

相關問題