2017-04-20 20 views
0

ワイヤフレームを持つmeshphongmaterialをarrayBufferGeometryに表示しようとすると、vetexColorsがTHREE.vertexColorsに設定されます。照明は1つのランダムな顔にしか作用しません。私がMeshBasicmaterialに切り替えると、私は望ましい動作を得る。ワイヤーフレームフォン材料がよさそうだし、ライトアップされてfalseに設定すると:Three.js MeshPhongMaterialワイヤフレーム照明

geometry.addAttribute('position', new THREE.BufferAttribute(vertices, 3)); 
    geometry.addAttribute('color', new THREE.BufferAttribute(colors, 3)); 
    geometry.computeFaceNormals(); 
    geometry.computeVertexNormals(); 

    console.log(geometry); 
    var material = new THREE.MeshBasicMaterial({ 
     side: THREE.DoubleSide, 
     wireframe: true, 
     transparent: false, 
     vertexColors: THREE.VertexColors, // CHANGED 
     shininess: 100, 
     //  color: 0xff0000, 
     shading: THREE.SmoothShading 
    }); 

    console.log(material); 

    var terrainMesh = new THREE.Mesh(geometry, material); 
    terrainMesh.name = 'GRD'; 
    terrainMesh.receiveShadow = true; 
    terrainMesh.castShadow = true; 
    console.log(terrainMesh); 
    return terrainMesh; 

私は材料の後に頂点法線を再計算する必要がありますか?照明がソリッドな面では機能し、ワイヤーフレームでは機能しない理由はありますか?

+1

あなたはどのような光を使用していますか?私はあなたが使用したのと同じパラメータを持つ 'THREE.PointLight'と' THREE.MeshPhongMaterial'を使って試しました。 – TheJim01

答えて

1

照明問題でした。

私は、太陽を表現するAmbientLight、DirectionalLight、およびカメラターゲットの周りをたどるSpotLightを使用して、ユーザーが何を見ているのかを強調します。

これらのうち、ワイヤフレームが正しく点灯していないものはありません。その後、私はMeshPhongMaterial exampleに続き、彼らはポイントライトを使っていました。私は、ポイントライトとスポットライトの唯一の違いは方向とターゲットであると仮定しました。ポイントライトが正常に機能したため、これは間違っています。

点灯からワイヤフレームへの照明は、(MeshPhongMaterialのサイドプロパティに関係なく)マテリアルの前面になければならず、背面からはできません。ロードされたファイルの形式が標準とは反対であるため、ジオメトリが下を向いています。ポイントライトは、材料を照らすためにジオメトリの下に配置する必要がありました。私はPointLightを使って下からジオメトリを照らす逆太陽型のライトを追加しました。

ワイヤフレームがPointLightだけで照らされているのはなぜなのですか、なぜそれが背面からTHREE.DoubleSideを照らしているのか理解できません。

関連する問題