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