1

我是three.js 的新手，所以我不知道到底发生了什么。我使用 Three.js 导出器从搅拌机中导出了一个模型，当我使用 MeshFaceMaterial 时，它看起来比搅拌机上的模型稍暗

看不到轮胎细节或背光

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

轮胎和背光细节可见，但网眼全是白色

任何人都可以告诉我有什么问题吗？已经玩过各种灯光和位置，但没有成功。代码如下。这可能是一个轻的位置问题吗？为什么使用 MeshLambertMaterial 的模型全是白色的？

<!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>
4

0 回答 0