Javascript 网格细节不会显示在Three.js中_Javascript_Three.js_Blender

Javascript 网格细节不会显示在Three.js中

javascript three.js

Javascript 网格细节不会显示在Three.js中,javascript,three.js,blender,Javascript,Three.js,Blender,我刚接触three.js，所以我不知道到底发生了什么。我使用Three.js exporter从blender导出了一个模型，当我使用MeshFaceMaterial时，它看起来比blender上的颜色稍微暗一些但是当我使用MeshLambertMaterial或MeshPhongMaterial时，它看起来很正常，只是网格是全白色的。你可以看到所有的细节，如轮胎谁能告诉我怎么了？已经玩过各种类型的灯光和位置，但没有成功。代码如下。这可能是灯光位置问题吗？为什么模型的材质都是白色的 <

我刚接触three.js，所以我不知道到底发生了什么。我使用Three.js exporter从blender导出了一个模型，当我使用MeshFaceMaterial时，它看起来比blender上的颜色稍微暗一些

但是当我使用MeshLambertMaterial或MeshPhongMaterial时，它看起来很正常，只是网格是全白色的。你可以看到所有的细节，如轮胎

谁能告诉我怎么了？已经玩过各种类型的灯光和位置，但没有成功。代码如下。这可能是灯光位置问题吗？为什么模型的材质都是白色的

<!doctype html>
<html>
    <head>
        <title>three.js JSON Loader</title>
        <style>
            body{ background-color: grey; }
            canvas{ background-color: white; }
        </style>
    </head>
    <body></body>       
    <script src="three.js-master/build/three.js"></script>
    <script>        
    var camera, scene, renderer, mesh, loader;

    init();

    function init() {

        camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
        camera.position.z = 100;
        camera.position.y = 20;

        scene = new THREE.Scene();

        var ambientLight = new THREE.AmbientLight(0x555555);
        scene.add(ambientLight);

        var directionalLight = new THREE.DirectionalLight(0xffffff);
        directionalLight.position.set(1, 1, 1).normalize();
        scene.add(directionalLight);

        renderer = new THREE.WebGLRenderer();
        renderer.setSize( window.innerWidth - 25, window.innerHeight - 25 );

        document.body.appendChild( renderer.domElement );       

        loader = new THREE.JSONLoader();

        loader.load( "TRATOR.js", function( geometry, materials ) {
            mesh = new THREE.Mesh( 
                geometry, 
                //new THREE.MeshFaceMaterial( materials )
                new THREE.MeshLambertMaterial( materials )
            );
            mesh.overdraw = true;
            mesh.scale.set( 10, 10, 10 );
            mesh.position.x = 0;
            mesh.position.y = 0;
            mesh.position.z = 0;

            mesh.rotation.y =  45 * Math.PI / 180 - 0.2;

            scene.add( mesh );

            //animar apenas depois de carregar o modelo
            animate();
        } );
    }

    function animate() {

        requestAnimationFrame( animate );

        if(mesh != undefined) {
            //mesh.rotation.x += 0.005;
            //mesh.rotation.z += 0.005;
            //mesh.rotation.y += 0.005; //comentado provisoriamente
        }

        renderer.render( scene, camera );
    }

    window.addEventListener('keydown', function(event) {
        var key = event.which ? event.which : event.keyCode;
        switch(key) {
            case 39:
                mesh.rotation.y += 0.1;
                break;
            case 37:
                mesh.rotation.y -= 0.1;
                break;
            case 40:
                mesh.rotation.x += 0.1;
                break;
            case 38:
                mesh.rotation.x -= 0.1;
                break;
        }
    }, false);
    </script>
</html>

您是否尝试过var light=new THREE.PointLight0xffffff；连同var material=new THREE.MeshPhongMaterial{color:0xff0000，transparent:true，opacity:1.0}？我确实知道，但是它使用单一颜色加载网格。我希望对象加载混合器模型的原始颜色。您需要了解材质数组中材质的参数的含义，将其设置为合理的值，并使用MeshFaceMaterials。