{"id":2,"date":"2025-05-26T10:54:27","date_gmt":"2025-05-26T10:54:27","guid":{"rendered":"https:\/\/alexvlad.ro\/?page_id=2"},"modified":"2025-05-30T06:10:52","modified_gmt":"2025-05-30T06:10:52","slug":"sample-page","status":"publish","type":"page","link":"https:\/\/alexvlad.ro\/index.php\/sample-page\/","title":{"rendered":"Sample Page"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"2\" class=\"elementor elementor-2\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f3404ad e-flex e-con-boxed e-con e-parent\" data-id=\"f3404ad\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-03f9e62 elementor-widget elementor-widget-html\" data-id=\"03f9e62\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- Canvas 3D cu preloader personalizat -->\r\n<div style=\"position: relative;\">\r\n  <div id=\"preloader\" style=\"\r\n    position: absolute;\r\n    width: 100%;\r\n    height: 500px;\r\n    background: transparent;\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    z-index: 10;\r\n    pointer-events: none;\r\n    flex-direction: column;\r\n  \">\r\n    <div style=\"\r\n      width: 200px;\r\n      height: 6px;\r\n      background: rgba(215, 110, 55, 0.2);\r\n      border-radius: 3px;\r\n      overflow: hidden;\r\n    \">\r\n      <div id=\"progressBar\" style=\"\r\n        width: 0%;\r\n        height: 100%;\r\n        background: linear-gradient(to bottom,\r\n          #d76e37 0%,\r\n          #f5b99b 50%,\r\n          #d76e37 100%\r\n        );\r\n      \"><\/div>\r\n    <\/div>\r\n    <div id=\"progressText\" style=\"\r\n      color: #d76e37;\r\n      margin-top: 6px;\r\n      font-size: 0.9em;\r\n      font-family: sans-serif;\r\n    \">0%<\/div>\r\n  <\/div>\r\n\r\n  <canvas id=\"myCanvas3D\" style=\"width: 100%; height: 500px; display: block;\"><\/canvas>\r\n<\/div>\r\n\r\n<!-- Three.js si extensii -->\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/three@0.132.2\/build\/three.min.js\"><\/script>\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/three@0.132.2\/examples\/js\/loaders\/GLTFLoader.js\"><\/script>\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/three@0.132.2\/examples\/js\/loaders\/RGBELoader.js\"><\/script>\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/three@0.132.2\/examples\/js\/pmrem\/PMREMGenerator.js\"><\/script>\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/tween.js\/18.6.4\/tween.umd.js\"><\/script>\r\n\r\n<script>\r\nconst canvas = document.getElementById('myCanvas3D');\r\nconst preloader = document.getElementById('preloader');\r\nconst progressBar = document.getElementById('progressBar');\r\nconst progressText = document.getElementById('progressText');\r\n\r\nconst renderer = new THREE.WebGLRenderer({ canvas, alpha: true, antialias: true });\r\nrenderer.setClearColor(0x000000, 0);\r\nrenderer.setSize(canvas.clientWidth, canvas.clientHeight);\r\nrenderer.setPixelRatio(window.devicePixelRatio);\r\nrenderer.toneMapping = THREE.ACESFilmicToneMapping;\r\nrenderer.toneMappingExposure = 4.0;\r\n\r\nconst scene = new THREE.Scene();\r\nconst camera = new THREE.PerspectiveCamera(75, canvas.clientWidth \/ canvas.clientHeight, 0.1, 1000);\r\ncamera.up.set(0, 0, 1);\r\ncamera.position.set(0, -7, 2);\r\ncamera.lookAt(0, 0, 1.5);\r\n\r\nconst hdriRotationDegrees = 180;\r\nconst hdriRotationOffset = THREE.MathUtils.degToRad(hdriRotationDegrees);\r\nconst hdrSaturation = 0.8;\r\n\r\nconst pmrem = new THREE.PMREMGenerator(renderer);\r\npmrem.compileEquirectangularShader();\r\n\r\nnew THREE.RGBELoader()\r\n  .setDataType(THREE.UnsignedByteType)\r\n  .setPath('https:\/\/dl.polyhaven.org\/file\/ph-assets\/HDRIs\/hdr\/1k\/')\r\n  .load('venice_sunset_1k.hdr', function(hdrTexture) {\r\n    hdrTexture.mapping = THREE.EquirectangularReflectionMapping;\r\n\r\n    const data = hdrTexture.image.data;\r\n    for (let i = 0; i < data.length; i += 4) {\r\n      const r = data[i], g = data[i + 1], b = data[i + 2];\r\n      const gray = r * 0.2126 + g * 0.7152 + b * 0.0722;\r\n      data[i] = gray + (r - gray) * hdrSaturation;\r\n      data[i + 1] = gray + (g - gray) * hdrSaturation;\r\n      data[i + 2] = gray + (b - gray) * hdrSaturation;\r\n    }\r\n\r\n    const tempScene = new THREE.Scene();\r\n    const sphere = new THREE.Mesh(\r\n      new THREE.SphereGeometry(100, 32, 32),\r\n      new THREE.MeshBasicMaterial({ map: hdrTexture, side: THREE.BackSide })\r\n    );\r\n    sphere.rotation.z = hdriRotationOffset;\r\n    sphere.rotation.y = hdriRotationOffset;\r\n    tempScene.add(sphere);\r\n\r\n    const envMap = pmrem.fromScene(tempScene, 0.04).texture;\r\n    scene.environment = envMap;\r\n    scene.background = null;\r\n\r\n    hdrTexture.dispose();\r\n    pmrem.dispose();\r\n  });\r\n\r\nlet model = null, mainController = null, head = null;\r\nlet mixer = null;\r\nlet actions = {};\r\nlet nextInA = 'Idle';\r\nlet inStateB = false;\r\nlet lastMouseMoveTime = Date.now();\r\n\r\nfunction playExclusive(name) {\r\n  mixer.stopAllAction();\r\n  const action = actions[name];\r\n  if (!action) return;\r\n  action.reset();\r\n  action.play();\r\n}\r\nconst loadingManager = new THREE.LoadingManager();\r\nloadingManager.onProgress = (url, loaded, total) => {\r\n  const percent = Math.round((loaded \/ total) * 100);\r\n  progressBar.style.width = percent + \"%\";\r\n  progressText.innerText = percent + \"%\";\r\n};\r\nloadingManager.onLoad = () => preloader.style.display = \"none\";\r\n\r\nconst loader = new THREE.GLTFLoader(loadingManager);\r\nloader.load('https:\/\/alexvlad.ro\/wp-content\/uploads\/robo.glb', (gltf) => {\r\n  model = gltf.scene;\r\n  model.rotation.x = Math.PI \/ 2;\r\n  model.scale.set(1, 1, 1);\r\n  model.position.z = -0.2;\r\n  scene.add(model);\r\n\r\n  model.traverse((child) => {\r\n    if (child.isMesh) child.material.side = THREE.FrontSide;\r\n  });\r\n\r\n  const emissiveParts = [\"Body\", \"Head.001\"];\r\n  model.traverse((child) => {\r\n    if (child.isMesh && emissiveParts.includes(child.name)) {\r\n      child.material = child.material.clone();\r\n      child.material.emissive = new THREE.Color(0xffffff);\r\n      child.material.emissiveIntensity = 2;\r\n    }\r\n  });\r\n\r\n  mainController = model.getObjectByName(\"MainRobotController\");\r\n  head = model.getObjectByName(\"Head\");\r\n\r\n  if (head) {\r\n    const headPivot = new THREE.Group();\r\n    head.parent.add(headPivot);\r\n    headPivot.position.copy(head.position);\r\n    head.position.set(0, 0, 0);\r\n    headPivot.add(head);\r\n    headPivot.rotation.x = THREE.MathUtils.degToRad(20);\r\n    head.userData.pivot = headPivot;\r\n  }\r\n\r\n  if (gltf.animations && gltf.animations.length > 0) {\r\n    mixer = new THREE.AnimationMixer(model);\r\n    gltf.animations.forEach((clip) => {\r\n      const action = mixer.clipAction(clip);\r\n      action.setLoop(THREE.LoopOnce);\r\n      action.clampWhenFinished = true;\r\n      actions[clip.name] = action;\r\n    });\r\n\r\n    playExclusive(\"Idle\");\r\n\r\n    mixer.addEventListener(\"finished\", (e) => {\r\n      const name = e.action._clip.name;\r\n      if (!inStateB) {\r\n        nextInA = nextInA === 'Idle' ? 'Catch' : 'Idle';\r\n        playExclusive(nextInA);\r\n      } else {\r\n        const next = name === 'Hello' ? 'Idle' : 'Hello';\r\n        playExclusive(next);\r\n      }\r\n    });\r\n  }\r\n});\r\n\r\nlet mouseX = 0, mouseY = 0;\r\nfunction updateMousePosition(event) {\r\n  mouseX = event.clientX \/ window.innerWidth;\r\n  mouseY = event.clientY \/ window.innerHeight;\r\n  lastMouseMoveTime = Date.now();\r\n  if (inStateB) {\r\n    inStateB = false;\r\n    new TWEEN.Tween(mainController.rotation).to({ y: 0 }, 1000).start();\r\n    new TWEEN.Tween(head.rotation).to({ x: 0 }, 1000).start();\r\n    setTimeout(() => {\r\n      playExclusive(\"Idle\");\r\n      nextInA = 'Catch';\r\n    }, 1000);\r\n  }\r\n}\r\nwindow.addEventListener('mousemove', updateMousePosition);\r\nwindow.addEventListener('touchmove', (e) => {\r\n  if (e.touches.length > 0) updateMousePosition(e.touches[0]);\r\n}, { passive: true });\r\n\r\nconst clock = new THREE.Clock();\r\nfunction animate() {\r\n  requestAnimationFrame(animate);\r\n  const delta = clock.getDelta();\r\n  if (mixer) mixer.update(delta);\r\n  TWEEN.update();\r\n\r\n  const now = Date.now();\r\n  const mouseInactive = now - lastMouseMoveTime > 4000;\r\n\r\n  if (mainController && head) {\r\n    if (!mouseInactive) {\r\n      const angleY = THREE.MathUtils.lerp(-Math.PI \/ 2, Math.PI \/ 2, mouseX);\r\n      const angleX = -THREE.MathUtils.lerp(Math.PI \/ 6, -Math.PI \/ 6, mouseY);\r\n      mainController.rotation.set(0, angleY, 0);\r\n      head.rotation.set(angleX, 0, 0);\r\n    } else {\r\n      if (!inStateB) {\r\n        inStateB = true;\r\n        new TWEEN.Tween(mainController.rotation).to({ y: 0 }, 1000).start();\r\n        new TWEEN.Tween(head.rotation).to({ x: -0.3 }, 1000).start();\r\n        setTimeout(() => {\r\n          playExclusive(\"Hello\");\r\n        }, 1000);\r\n      }\r\n    }\r\n  }\r\n\r\n  renderer.render(scene, camera);\r\n}\r\nanimate();\r\n\r\nwindow.addEventListener('resize', () => {\r\n  const width = canvas.clientWidth;\r\n  const height = canvas.clientHeight;\r\n  renderer.setSize(width, height);\r\n  camera.aspect = width \/ height;\r\n  camera.updateProjectionMatrix();\r\n});\r\n<\/script>\r\n\t\t\t\t<\/div>\n\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":"<p>0%<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"open","template":"","meta":{"footnotes":""},"class_list":["post-2","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/alexvlad.ro\/index.php\/wp-json\/wp\/v2\/pages\/2","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alexvlad.ro\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/alexvlad.ro\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/alexvlad.ro\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/alexvlad.ro\/index.php\/wp-json\/wp\/v2\/comments?post=2"}],"version-history":[{"count":393,"href":"https:\/\/alexvlad.ro\/index.php\/wp-json\/wp\/v2\/pages\/2\/revisions"}],"predecessor-version":[{"id":407,"href":"https:\/\/alexvlad.ro\/index.php\/wp-json\/wp\/v2\/pages\/2\/revisions\/407"}],"wp:attachment":[{"href":"https:\/\/alexvlad.ro\/index.php\/wp-json\/wp\/v2\/media?parent=2"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}