15

コードで照明が機能しない理由がわかりません。シンプルな OBJ をダウンロードしました。ファイルを使用して OBJLoader をテストしますが、モデルは影響を受けません。照明をさらに編集する前は、少なくともアンビエント ライティングは機能していました。OBJかもしれません。モデルにテクスチャが必要ですか?

            var container, stats;

        var camera, scene, renderer, controls;


        init();
        animate();


        function init() {

            container = document.createElement( 'div' );
            document.body.appendChild( container );

            scene = new THREE.Scene();

            camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
            camera.position.z = 2.5;
            scene.add( camera );

            controls = new THREE.TrackballControls( camera );

            controls.rotateSpeed = 2.0;
            controls.zoomSpeed = 1.2;
            controls.panSpeed = 0.0;

            controls.noZoom = false;
            controls.noPan = true;

            controls.staticMoving = true;
            controls.dynamicDampingFactor = 0.3;

            controls.keys = [ 65, 83, 68 ];

            controls.addEventListener( 'change', render );

            var ambient = new THREE.AmbientLight( 0x020202 );
            scene.add( ambient );

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

            pointLight = new THREE.PointLight( 0xffaa00 );
            pointLight.position.set( 0, 0, 0 );
            scene.add( pointLight );

            sphere = new THREE.SphereGeometry( 100, 16, 8 );
            lightMesh = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0xffaa00 } ) );
            lightMesh.scale.set( 0.05, 0.05, 0.05 );
            lightMesh.position = pointLight.position;
            scene.add( lightMesh );


            var loader = new THREE.OBJLoader();
            loader.load( "originalMeanModel.obj", function ( object ) {
                scene.add( object );
            } );

            renderer = new THREE.WebGLRenderer();
            renderer.setSize( window.innerWidth, window.innerHeight );
            container.appendChild( renderer.domElement );

        }

        function animate() {

            requestAnimationFrame( animate );
            controls.update();

        }

        function render() {

            camera.lookAt( scene.position );

            renderer.render( scene, camera );

        }
4

3 に答える 3

33

THREE.js の MeshBasicMaterial はトゥーン シェーダーのようなもので (シルエット、影の描画、ワイヤーフレームに適しています)、ライトの影響を受けません。

MeshLambertMaterial または MeshPhongMaterial を試してください

于 2013-05-18T13:20:18.987 に答える
3

BlenderにThree.jsエクスポーターを使用した場合にも同様の問題が発生しました。元のブレンダーモデルで拡散色を設定し、Three.jsコードでシーンにアンビエントライトを追加しても、すべてが暗く見えました。修正は、変換されたモデルファイルの一部を編集することでしたが、次のような効果がありました。

"colorAmbient" : [0, 0, 0]

手動で変更しました

"colorAmbient" : [0.75, 0.75, 0.75]

どこにでも現れ、それで問題は解決しました。私の最善の推測はあなたがこれと同様の問題を経験しているということなので、私はこれを持ち出します。* .objファイルを見ないと、問題を正確に診断することは困難ですが、モデル設定では、たとえば、色を割り当てるときに通常考える拡散色の値ではなく、周囲の色の値を変更してみることができます。モデルに。

于 2012-06-27T19:52:02.393 に答える
0

数日前に私と同じ問題が発生している場合や、obj に法線がない場合は、これが役立つかもしれません。

MeshBasicMaterial頂点/面が問題ないことを確認するためだけに、 a から開始することもできます。new THREE.MeshBasicMaterial({ color: 0x999999, wireframe: true, transparent: true, opacity: 0.85 } )

また、ドゥーブ氏が言ったように、ロードしている obj を共有することを検討してください。

于 2012-06-26T23:13:30.197 に答える