three.js - blender gltf export 在three.js中加载时看起来很奇怪

问题描述

我将一个带有 Blender 材质的简单立方体导出为 GLTF (GLB) 文件。当加载到 three.js 中时，它看起来不正确，就好像我在观察立方体的内部一样。

在我的示例中，我并排放置： - 从 GLTF 文件加载的网格（在图像中的左侧） - 具有 BoxBufferGeometry 和 MeshStandardMaterial 的网格（在图像中的右侧）。我有一个环境光（HemisphereLight）和一个主光（DirectionalLight）。创建的网格看起来不错，但加载的网格看起来很奇怪。从搅拌机导出时，我尝试不导出法线；它变得更好了，但基本上我得到了相同的结果。看起来我在看立方体的内部。

let container;
let camera;
let renderer;
let scene;
let mesh;

function init() {
    container = document.querySelector( '#scene-container' );

    scene = new THREE.Scene();
    scene.background = new THREE.Color( 0x8FBCD4 );

    createCamera();
    createLights();
    createMeshes();
    createRenderer();

    renderer.setAnimationLoop( () => {

        render();

  } );
}

function createCamera() {
    camera = new THREE.PerspectiveCamera(
        35, // FOV
        container.clientWidth / container.clientHeight, //aspect
        0.1, // near clipping plane
        100, // far clipping plane
    );
    camera.position.set( -1, 1, 10 );
}

function createMeshes() {
    const geometry = new THREE.BoxBufferGeometry( 2, 2, 2 );
    const material = new THREE.MeshStandardMaterial( { color: 0x800080 } );
    mesh = new THREE.Mesh( geometry, material );
    scene.add( mesh );
    mesh.position.set(2.5, 0, 0);

    var loader = new THREE.GLTFLoader();
    loader.load('models/teste.glb',
                function ( gltf ) {scene.add( gltf.scene );},
                // called while loading is progressing
                function ( xhr ) {console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );},
                function ( error ) {console.log( 'An error happened' );}
                );
}

function createLights() {
    const ambientLight = new THREE.HemisphereLight(
    0xddeeff, 
    0x202020, 
    5, 
    );

    const mainLight = new THREE.DirectionalLight( 0xffffff, 5 );
    mainLight.position.set( 10, 10, 10 );

    scene.add( ambientLight, mainLight );
}


function createRenderer() {
    renderer = new THREE.WebGLRenderer( { antialias: true } );
    renderer.setSize( container.clientWidth, container.clientHeight );
    renderer.setPixelRatio( window.devicePixelRatio );
    container.appendChild( renderer.domElement );
}

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

init();

我希望左边的立方体（GLTF 那个）看起来像右边的。

标签： three.jsblender

three.js - blender gltf export 在three.js中加载时看起来很奇怪

问题描述

解决方案

推荐阅读