現在初めてJavaScript、Three.jsを使用しているのですが、THREE.ShaderMaterialの使い方がいまいち分かりません。
JS
1 //Cubeの作成 2 var geometry = new THREE.CubeGeometry( 30, 30, 30 ); 3 var materialShader = new THREE.ShaderMaterial({ 4 vertexShader: document.getElementById('vertexShaderCurve').textContent, 5 fragmentShader: document.getElementById('fragmentShader').textContent, 6 }); 7 8 var mesh = new THREE.Mesh( geometry, materialShader); 9 mesh.position.set(0, 0, 0); 10 scene.add( mesh );
HTML
1<script id="vertexShaderCurve" type="x-shader/x-vertex"> 2void main() 3varying vec2 vUv; 4{ 5 vUv = uv; 6 7 gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0); 8} 9</script> 10 11<script id="fragmentShader" type="x-shader/x-fragment"> 12void main() 13{ 14 varying vec2 vUv; 15 16 vec4 color=vec4(252,252,252,252); 17 gl_FragColor = color/255.0; 18} 19</script>
上記のようにしてUnlitでの表示はできたのですが、THREE.DirectionalLighの影響を与えたり、PhongやLambertのようなShaderの書き方がネットで検索しても見付からなく困っています。
最終的にはTHREE.MeshPhongMaterialやTHREE.MeshLambertMaterialを使わずにTHREE.ShaderMaterialでその二つのようなShaderを実装し中身を少し弄っていきたいと思っています。
初心者でも分かりやすいWebページやShaderのコードを教えていただけるととても助かります。
どうか宜しくお願いします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。