Different dynamic shape on the bottom of scene

Questions
,
1

Hello, any one know how i can to make like this grid in this pic ? maybe i need some keyword to search (i think to add it as a texture bot i want to add some effect on the line so i need to customize it )

950e2315985f5af6ce00cfabcf6c0930
950e2315985f5af6ce00cfabcf6c0930564×564 23.2 KB

Thank’s on advance

2

I think you should use a mask.
But it seems that there is no shader supported by three.js.
I think you need to use customeShader or use onBeforeCompile .

3

Thank you for reply , but how i can know where i have to replace the shader ?
as an example i write this code with a bump map (this shape what i want under the scene but a plane instead of cube )

function main() {

   const sizes = {

       width: window.innerWidth,

       height: window.innerHeight

   }

   const canvas = document.querySelector('#c');

   const renderer = new THREE.WebGLRenderer({ canvas });

   renderer.setSize(sizes.width, sizes.height)

   renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))

   const fov = 75;

   const aspect = 2;  // the canvas default

   const near = 0.1;

   const far = 5;

   const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);

   camera.position.z = 2;

   const scene = new THREE.Scene();

   {

       const color = 0xFFFFFF;

       const intensity = 1;

       const light = new THREE.DirectionalLight(color, intensity);

       light.position.set(-1, 2, 4);

       scene.add(light);

   }

   const boxWidth = 1;

   const boxHeight = 1;

   const boxDepth = 1;

   const geometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth);

   const loader = new THREE.TextureLoader();

   const myLoadedTexture = loader.load('./abeac5e8fd989bd82cb817cb5432975f.jpg');

   const myBumpMap = myLoadedTexture;

   var material = new THREE.MeshPhongMaterial({

       map: myLoadedTexture,

       shininess: 0,

       bumpMap: myBumpMap,

       bumpScale: 0.1,

       fog: true,

       color: 0xff0000

   });

   material.onBeforeCompile = function (shader) {

   }

   const cube = new THREE.Mesh(geometry, material);

   scene.add(cube);

   function render(time) {

       time *= 0.001;  // convert time to seconds

       cube.rotation.x = time;

       cube.rotation.y = time;

       renderer.render(scene, camera);

       requestAnimationFrame(render);

   }

   requestAnimationFrame(render);

}

main();

so now , is there a way to coloring just a low place of the bump map ?

4

@mayyar
Hi!
If you mean the grid on the ground plane of the picture provided, I would start with something like this: How to achieve this material effect [gif image]? - #5 by prisoner849

1 Like
5

Thank you so much , can we move the blue color as a circle shape
i try to replace this

      vec3 c = v * vec3(1., 0., 0.) * (sin(time * 5. - pos.z * .25) * .5 + .5);

with

      vec3 c = v * vec3(1., 0., 0.) * (sin(time * 5. - pos.y * .25) * .5 + .5);

but it look strange

6

You need to use distance from a center instead of a coordinate on an axis.

7

You mean from center so from 0 point ?


      vec3 c = v * vec3(1., 0., 0.) * (sin(time * 5.) * .5 + .5);

bult it look like fade

8

and i search to get the center of grid

      vec3 c = v * vec3(1., 0., 0.) * (sin(time * 5. - atan(pos.x,pos.y)* .25) * .5 + .5);

still not work

9

Use length(), which gives you distance from the center to the current position, so you’ll have kind of ripples: Edit fiddle - JSFiddle - Code Playground

изображение
изображение841×834 103 KB

2 Likes