Trois js - (?) Rotation du maillage plan horizontal WaterShader

Question

Je suis nouveau ici, et heureux de trouver un bon forum :)

Dans trois JS, je suis en train d'avoir un plan horizontal de l'eau. Je pourrais insérer le plan d'eau fonctionnant correctement s'il est vertical (rotation sur l'axe X), mais quand je le place horizontalement les textures deviennent très mauvaises. Voici mon code:

var light = new THREE.DirectionalLight(0xffffbb, 1); 
light.position.set(- 1, 1, - 1); 
scene.add(light); 

waterNormals = new THREE.TextureLoader().load('editor/textures/waternormals.jpg'); 
waterNormals.wrapS = waterNormals.wrapT = THREE.RepeatWrapping; 

water = new THREE.Water(webGLRenderer, camera, scene, { 
    textureWidth: 512, 
    textureHeight: 512, 
    waterNormals: waterNormals, 
    alpha: 0.7, 
    sunDirection: light.position.clone().normalize(), 
    sunColor: 0xffffff, 
    waterColor: 0x001e0f, 
    distortionScale: 50.0, 
    fog: scene.fog != undefined 
}); 

var WaterGeometry = new THREE.PlaneBufferGeometry(parameters.width * 500, parameters.height * 500); 
// WaterGeometry.rotateX(Math.PI/2); 

var mirrorMesh = new THREE.Mesh(WaterGeometry, water.material); 

mirrorMesh.add(water); 
mirrorMesh.position.set(0, -200, 200); 
mirrorMesh.rotation.x = - Math.PI * 0.5; 
scene.add(mirrorMesh); 

Voici le résultat: une bonne texture, mais plan vertical

Lorsque je supprime la ligne:

mirrorMesh.rotation.x = - Math.PI * 0.5; 

Le nouveau résultat est: texture Bad, mais plan horizontal

Une idée de ce qui se passe?

Merci!

Answer 1

Voici un exemple comment ajouter des shaders et créer votre propre mer. J'ajoute minuterie pour faire les cinématiques, regarder l'éclairage et essayer d'utiliser comme ça, salutations.

// init camera, scene, renderer 
 
var scene, camera, renderer; 
 
scene = new THREE.Scene(); 
 
var fov = 75, 
 
\t \t aspect = window.innerWidth/window.innerHeight; 
 
camera = new THREE.PerspectiveCamera(fov, aspect, 0.1, 1000); 
 
camera.position.z = 100; 
 
camera.lookAt(scene.position); 
 
renderer = new THREE.WebGLRenderer(); 
 
renderer.setClearColor(0xc4c4c4); 
 
renderer.setSize(window.innerWidth, window.innerHeight); 
 
document.body.appendChild(renderer.domElement); 
 
var clock = new THREE.Clock(); 
 

 
var tuniform = { 
 
\t iGlobalTime: { 
 
\t \t type: 'f', 
 
\t \t value: 0.1 
 
\t }, 
 
\t iResolution: { 
 
\t \t type: 'v2', 
 
\t \t value: new THREE.Vector2() 
 
\t }, 
 
\t iMouse: { 
 
\t \t type: 'v4', 
 
\t \t value: new THREE.Vector2() 
 
\t } 
 
}; 
 

 
// Mouse position in - 1 to 1 
 
renderer.domElement.addEventListener('mousedown', function(e) { 
 
\t var canvas = renderer.domElement; 
 
\t var rect = canvas.getBoundingClientRect(); 
 
\t tuniform.iMouse.value.x = (e.clientX - rect.left)/window.innerWidth * 2 - 1; 
 
\t tuniform.iMouse.value.y = (e.clientY - rect.top)/window.innerHeight * -2 + 1; 
 
}); 
 
renderer.domElement.addEventListener('mouseup', function(e) { 
 
\t var canvas = renderer.domElement; 
 
\t var rect = canvas.getBoundingClientRect(); 
 
\t tuniform.iMouse.value.z = (e.clientX - rect.left)/window.innerWidth * 2 - 1; 
 
\t tuniform.iMouse.value.w = (e.clientY - rect.top)/window.innerHeight * -2 + 1; 
 
}); 
 
// resize canvas function 
 
window.addEventListener('resize',function() { 
 
\t camera.aspect = window.innerWidth/window.innerHeight; 
 
\t camera.updateProjectionMatrix(); 
 
\t renderer.setSize(window.innerWidth, window.innerHeight); 
 
}); 
 

 
tuniform.iResolution.value.x = window.innerWidth; 
 
tuniform.iResolution.value.y = window.innerHeight; 
 
// Create Plane 
 
var material = new THREE.ShaderMaterial({ 
 
\t uniforms: tuniform, 
 
\t vertexShader: document.getElementById('vertex-shader').textContent, 
 
\t fragmentShader: document.getElementById('fragment-shader').textContent 
 
}); 
 
var mesh = new THREE.Mesh(
 
\t new THREE.PlaneBufferGeometry(window.innerWidth, window.innerHeight, 40), material 
 
); 
 
scene.add(mesh); 
 

 
// draw animation 
 
function render(time) { 
 
\t tuniform.iGlobalTime.value += clock.getDelta(); 
 
\t requestAnimationFrame(render); 
 
\t renderer.render(scene, camera); 
 
} 
 
render();

body { 
 
\t overflow: hidden; 
 
\t margin: 0; 
 
\t height: 100%; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.min.js"></script> 
 

 
<!-- THIS is OPENGL Shading language scripts --> 
 
<script id="vertex-shader" type="no-js"> 
 
\t \t void main() \t { 
 
\t \t \t gl_Position = vec4(position, 1.0); 
 
\t \t } 
 
</script> 
 

 
<script id="fragment-shader" type="no-js"> 
 
\t uniform float iGlobalTime; 
 
\t uniform vec2 iResolution; 
 
\t uniform vec4 iMouse; 
 
\t 
 
const int NUM_STEPS = 8; 
 
const float PI \t \t = 3.1415; 
 
const float EPSILON \t = 1e-3; 
 
float EPSILON_NRM \t = 0.1/iResolution.x; 
 

 
// sea 
 
const int ITER_GEOMETRY = 3; 
 
const int ITER_FRAGMENT = 5; 
 
const float SEA_HEIGHT = 0.6; 
 
const float SEA_CHOPPY = 4.0; 
 
const float SEA_SPEED = 0.8; 
 
const float SEA_FREQ = 0.16; 
 
//coloration sea 
 
const vec3 SEA_BASE = vec3(0.1,0.19,0.22); 
 
const vec3 SEA_WATER_COLOR = vec3(0.8,0.9,0.6); 
 
float SEA_TIME = iGlobalTime * SEA_SPEED; 
 
mat2 octave_m = mat2(1.6,1.2,-1.2,1.6); 
 

 
// math 
 
mat3 fromEuler(vec3 ang) { 
 
\t vec2 a1 = vec2(sin(ang.x),cos(ang.x)); 
 
    vec2 a2 = vec2(sin(ang.y),cos(ang.y)); 
 
    vec2 a3 = vec2(sin(ang.z),cos(ang.z)); 
 
    mat3 m; 
 
    m[0] = vec3(a1.y*a3.y+a1.x*a2.x*a3.x,a1.y*a2.x*a3.x+a3.y*a1.x,-a2.y*a3.x); 
 
\t m[1] = vec3(-a2.y*a1.x,a1.y*a2.y,a2.x); 
 
\t m[2] = vec3(a3.y*a1.x*a2.x+a1.y*a3.x,a1.x*a3.x-a1.y*a3.y*a2.x,a2.y*a3.y); 
 
\t return m; 
 
} 
 
float hash(vec2 p) { 
 
\t float h = dot(p,vec2(127.1,311.7)); \t 
 
    return fract(sin(h)*43758.5453123); 
 
} 
 
float noise(in vec2 p) { 
 
    vec2 i = floor(p); 
 
    vec2 f = fract(p); \t 
 
\t vec2 u = f*f*(3.0-2.0*f); 
 
    return -1.0+2.0*mix(mix(hash(i + vec2(0.0,0.0)), 
 
        hash(i + vec2(1.0,0.0)), u.x), 
 
       mix(hash(i + vec2(0.0,1.0)), 
 
        hash(i + vec2(1.0,1.0)), u.x), u.y); 
 
} 
 

 
// lighting 
 
float diffuse(vec3 n,vec3 l,float p) { 
 
    return pow(dot(n,l) * 0.4 + 0.6,p); 
 
} 
 
float specular(vec3 n,vec3 l,vec3 e,float s) {  
 
    float nrm = (s + 8.0)/(3.1415 * 8.0); 
 
    return pow(max(dot(reflect(e,n),l),0.0),s) * nrm; 
 
} 
 

 
// sky 
 
vec3 getSkyColor(vec3 e) { 
 
    e.y = max(e.y,0.0); 
 
    vec3 ret; 
 
    ret.x = pow(1.0-e.y,2.0); 
 
    ret.y = 1.0-e.y; 
 
    ret.z = 0.6+(1.0-e.y)*0.4; 
 
    return ret; 
 
} 
 

 
// sea 
 
float sea_octave(vec2 uv, float choppy) { 
 
    uv += noise(uv);   
 
    vec2 wv = 1.0-abs(sin(uv)); 
 
    vec2 swv = abs(cos(uv));  
 
    wv = mix(wv,swv,wv); 
 
    return pow(1.0-pow(wv.x * wv.y,0.65),choppy); 
 
} 
 

 
float map(vec3 p) { 
 
    float freq = SEA_FREQ; 
 
    float amp = SEA_HEIGHT; 
 
    float choppy = SEA_CHOPPY; 
 
    vec2 uv = p.xz; uv.x *= 0.75; 
 
    
 
    float d, h = 0.0;  
 
    for(int i = 0; i < ITER_GEOMETRY; i++) {   
 
    \t d = sea_octave((uv+SEA_TIME)*freq,choppy); 
 
    \t d += sea_octave((uv-SEA_TIME)*freq,choppy); 
 
     h += d * amp;   
 
    \t uv *= octave_m; freq *= 1.9; amp *= 0.22; 
 
     choppy = mix(choppy,1.0,0.2); 
 
    } 
 
    return p.y - h; 
 
} 
 

 
float map_detailed(vec3 p) { 
 
    float freq = SEA_FREQ; 
 
    float amp = SEA_HEIGHT; 
 
    float choppy = SEA_CHOPPY; 
 
    vec2 uv = p.xz; uv.x *= 0.75; 
 
    
 
    float d, h = 0.0;  
 
    for(int i = 0; i < ITER_FRAGMENT; i++) {   
 
    \t d = sea_octave((uv+SEA_TIME)*freq,choppy); 
 
    \t d += sea_octave((uv-SEA_TIME)*freq,choppy); 
 
     h += d * amp;   
 
    \t uv *= octave_m; freq *= 1.9; amp *= 0.22; 
 
     choppy = mix(choppy,1.0,0.2); 
 
    } 
 
    return p.y - h; 
 
} 
 

 
vec3 getSeaColor(vec3 p, vec3 n, vec3 l, vec3 eye, vec3 dist) { 
 
    float fresnel = 1.0 - max(dot(n,-eye),0.0); 
 
    fresnel = pow(fresnel,3.0) * 0.65; 
 
     
 
    vec3 reflected = getSkyColor(reflect(eye,n));  
 
    vec3 refracted = SEA_BASE + diffuse(n,l,80.0) * SEA_WATER_COLOR * 0.12; 
 
    
 
    vec3 color = mix(refracted,reflected,fresnel); 
 
    
 
    float atten = max(1.0 - dot(dist,dist) * 0.001, 0.0); 
 
    color += SEA_WATER_COLOR * (p.y - SEA_HEIGHT) * 0.18 * atten; 
 
    
 
    color += vec3(specular(n,l,eye,60.0)); 
 
    
 
    return color; 
 
} 
 

 
// tracing 
 
vec3 getNormal(vec3 p, float eps) { 
 
    vec3 n; 
 
    n.y = map_detailed(p);  
 
    n.x = map_detailed(vec3(p.x+eps,p.y,p.z)) - n.y; 
 
    n.z = map_detailed(vec3(p.x,p.y,p.z+eps)) - n.y; 
 
    n.y = eps; 
 
    return normalize(n); 
 
} 
 

 
float heightMapTracing(vec3 ori, vec3 dir, out vec3 p) { 
 
    float tm = 0.0; 
 
    float tx = 1000.0;  
 
    float hx = map(ori + dir * tx); 
 
    if(hx > 0.0) return tx; 
 
    float hm = map(ori + dir * tm);  
 
    float tmid = 0.0; 
 
    for(int i = 0; i < NUM_STEPS; i++) { 
 
     tmid = mix(tm,tx, hm/(hm-hx));     
 
     p = ori + dir * tmid;     
 
    \t float hmid = map(p); 
 
\t \t if(hmid < 0.0) { 
 
     \t tx = tmid; 
 
      hx = hmid; 
 
     } else { 
 
      tm = tmid; 
 
      hm = hmid; 
 
     } 
 
    } 
 
    return tmid; 
 
} 
 

 
void main() { 
 
\t vec2 uv = gl_FragCoord.xy/iResolution.xy; 
 
    uv = uv * 2.0 - 1.0; 
 
    uv.x *= iResolution.x/iResolution.y;  
 
    float time = iGlobalTime * 0.3 + iMouse.x*0.01; 
 
     
 
    // ray 
 
    vec3 ang = vec3(sin(time*3.0)*0.1,sin(time)*0.2+0.3,time);  
 
    vec3 ori = vec3(0.0,3.5,time*5.0); 
 
    vec3 dir = normalize(vec3(uv.xy,-2.0)); dir.z += length(uv) * 0.15; 
 
    dir = normalize(dir) * fromEuler(ang); 
 
    
 
    // tracing 
 
    vec3 p; 
 
    heightMapTracing(ori,dir,p); 
 
    vec3 dist = p - ori; 
 
    vec3 n = getNormal(p, dot(dist,dist) * EPSILON_NRM); 
 
    vec3 light = normalize(vec3(0.0,1.0,0.8)); 
 
       
 
    // color 
 
    vec3 color = mix(
 
     getSkyColor(dir), 
 
     getSeaColor(p,n,light,dir,dist), 
 
    \t pow(smoothstep(0.0,-0.05,dir.y),0.3)); 
 
     
 
    // post 
 
\t gl_FragColor = vec4(pow(color,vec3(0.75)), 1.0); 
 
\t } 
 
</script>