{"id":1730,"date":"2026-02-25T17:23:05","date_gmt":"2026-02-25T16:23:05","guid":{"rendered":"https:\/\/zaur.tech\/fond-three-js\/"},"modified":"2026-03-10T07:13:43","modified_gmt":"2026-03-10T06:13:43","slug":"fond-three-js","status":"publish","type":"page","link":"https:\/\/zaur.tech\/fr\/fond-three-js\/","title":{"rendered":"Fond Three Js"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1730\" class=\"elementor elementor-1730\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7ac28da e-flex e-con-boxed e-con e-parent\" data-id=\"7ac28da\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c9e0fcb elementor-widget elementor-widget-html\" data-id=\"c9e0fcb\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div id=\"exampleAnimation\"><\/div>\n<style>\n    #exampleAnimation {\n  position: fixed;\n  inset: 0;\n  pointer-events: none;\n  overflow: hidden;\n}\n\n#exampleAnimation canvas {\n  width: 100%;\n  height: 100%;\n  display: block;\n}\n<\/style>\n<script type=\"module\">\nimport * as THREE from \"https:\/\/unpkg.com\/three@0.158.0\/build\/three.module.js\";\n\nconst container = document.getElementById(\"exampleAnimation\");\n\nconst scene = new THREE.Scene();\nconst camera = new THREE.OrthographicCamera(-1,1,1,-1,0,10);\ncamera.position.z = 1;\n\nconst renderer = new THREE.WebGLRenderer({\n  antialias: true,\n  alpha: true,\n  premultipliedAlpha: false\n});\n\ncontainer.appendChild(renderer.domElement);\n\nconst uniforms = {\n  u_time: { value: 0 },\n  u_resolution: { value: new THREE.Vector2() }\n};\n\nfunction hexToVec3(hex) {\n  const c = new THREE.Color(hex);\n  return new THREE.Vector3(c.r, c.g, c.b);\n}\n\nuniforms.u_color1 = { value: hexToVec3(\"#6a4c40\") };\nuniforms.u_color2 = { value: hexToVec3(\"#504d4b\") };\n\nfunction resize() {\n  const w = container.clientWidth;\n  const h = container.clientHeight;\n  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));\n  renderer.setSize(w, h, false);\n  uniforms.u_resolution.value.set(\n    renderer.domElement.width,\n    renderer.domElement.height\n  );\n}\n\nresize();\nwindow.addEventListener(\"resize\", resize);\n\nconst material = new THREE.ShaderMaterial({\n  transparent: true,\n  depthWrite: false,\n  uniforms,\n  vertexShader: `\n    void main(){\n      gl_Position = vec4(position,1.0);\n    }\n  `,\n  fragmentShader: `\n    uniform float u_time;\n    uniform vec2 u_resolution;\n    uniform vec3 u_color1;\n    uniform vec3 u_color2;\n\n    float hash(vec2 p){\n      return fract(sin(dot(p, vec2(127.1,311.7))) * 43758.5453123);\n    }\n\n    float noise(vec2 p){\n      vec2 i = floor(p);\n      vec2 f = fract(p);\n      vec2 u = f*f*(3.0-2.0*f);\n      return mix(\n        mix(hash(i), hash(i+vec2(1,0)), u.x),\n        mix(hash(i+vec2(0,1)), hash(i+vec2(1,1)), u.x),\n        u.y\n      );\n    }\n\n    void main(){\n      vec2 uv = gl_FragCoord.xy \/ u_resolution.xy;\n      uv.x *= u_resolution.x \/ u_resolution.y;\n\n      float t = u_time * 0.22;\n\n      float n =\n          noise(uv * 2.5 + t) * 0.55 +\n          noise(uv * 5.0 - t * 0.4) * 0.30 +\n          noise(uv * 10.0 + t * 0.25) * 0.15;\n\n      float lineField = abs(fract(n * 14.0 - t * 0.12) - 0.5);\n\n      float pixel = 1.0 \/ u_resolution.y;\n\n      float randType = noise(floor(uv * 8.0));\n\n      float thicknessPx;\n      float dashMask = 1.0;\n\n      if (randType < 0.33) {\n        thicknessPx = 60.0;\n      } else if (randType < 0.66) {\n        thicknessPx = 28.0;\n      } else {\n        thicknessPx = 60.0;\n        float dashLength = 20.0;\n        float dashCoord = mod(gl_FragCoord.x + gl_FragCoord.y, dashLength * 2.0);\n        dashMask = step(dashLength, dashCoord);\n      }\n\n      float thickness = thicknessPx * pixel;\n\n      float edge0 = thickness;\n      float edge1 = thickness * 0.15;\n\n      float lineMask = smoothstep(edge0, edge1, lineField);\n      float finalMask = lineMask * dashMask;\n\n      if (finalMask < 0.01) discard;\n\n      float colorPick = noise(floor(uv * 6.0 + 50.0));\n      vec3 strokeColor = mix(u_color1, u_color2, step(0.5, colorPick));\n\n      gl_FragColor = vec4(strokeColor, 1.0);\n    }\n  `\n});\n\nconst geometry = new THREE.PlaneGeometry(2,2);\nconst mesh = new THREE.Mesh(geometry, material);\nscene.add(mesh);\n\nfunction animate(){\n  requestAnimationFrame(animate);\n  uniforms.u_time.value += 0.01;\n  renderer.render(scene,camera);\n}\nanimate();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-1730","page","type-page","status-publish","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Fond Three Js - zaur.tech<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/zaur.tech\/three-js-background\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Fond Three Js - zaur.tech\" \/>\n<meta property=\"og:url\" content=\"https:\/\/zaur.tech\/three-js-background\/\" \/>\n<meta property=\"og:site_name\" content=\"zaur.tech\" \/>\n<meta property=\"article:modified_time\" content=\"2026-03-10T06:13:43+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/zaur.tech\\\/three-js-background\\\/\",\"url\":\"https:\\\/\\\/zaur.tech\\\/three-js-background\\\/\",\"name\":\"Fond Three Js - zaur.tech\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/zaur.tech\\\/#website\"},\"datePublished\":\"2026-02-25T16:23:05+00:00\",\"dateModified\":\"2026-03-10T06:13:43+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/zaur.tech\\\/three-js-background\\\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/zaur.tech\\\/three-js-background\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/zaur.tech\\\/three-js-background\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/zaur.tech\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Fond Three Js\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/zaur.tech\\\/#website\",\"url\":\"https:\\\/\\\/zaur.tech\\\/\",\"name\":\"zaur.tech\",\"description\":\"Custom G Class\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/zaur.tech\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Fond Three Js - zaur.tech","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/zaur.tech\/three-js-background\/","og_locale":"fr_FR","og_type":"article","og_title":"Fond Three Js - zaur.tech","og_url":"https:\/\/zaur.tech\/three-js-background\/","og_site_name":"zaur.tech","article_modified_time":"2026-03-10T06:13:43+00:00","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/zaur.tech\/three-js-background\/","url":"https:\/\/zaur.tech\/three-js-background\/","name":"Fond Three Js - zaur.tech","isPartOf":{"@id":"https:\/\/zaur.tech\/#website"},"datePublished":"2026-02-25T16:23:05+00:00","dateModified":"2026-03-10T06:13:43+00:00","breadcrumb":{"@id":"https:\/\/zaur.tech\/three-js-background\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/zaur.tech\/three-js-background\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/zaur.tech\/three-js-background\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/zaur.tech\/"},{"@type":"ListItem","position":2,"name":"Fond Three Js"}]},{"@type":"WebSite","@id":"https:\/\/zaur.tech\/#website","url":"https:\/\/zaur.tech\/","name":"zaur.tech","description":"Custom G Class","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/zaur.tech\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"}]}},"_links":{"self":[{"href":"https:\/\/zaur.tech\/fr\/wp-json\/wp\/v2\/pages\/1730","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/zaur.tech\/fr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/zaur.tech\/fr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/zaur.tech\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/zaur.tech\/fr\/wp-json\/wp\/v2\/comments?post=1730"}],"version-history":[{"count":1,"href":"https:\/\/zaur.tech\/fr\/wp-json\/wp\/v2\/pages\/1730\/revisions"}],"predecessor-version":[{"id":1731,"href":"https:\/\/zaur.tech\/fr\/wp-json\/wp\/v2\/pages\/1730\/revisions\/1731"}],"wp:attachment":[{"href":"https:\/\/zaur.tech\/fr\/wp-json\/wp\/v2\/media?parent=1730"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}