87 lines
2.9 KiB
PHP
87 lines
2.9 KiB
PHP
<?php
|
|
/**
|
|
* Plugin Name: Coco Beauty Bar 3D Visuals
|
|
* Description: Adds 3D animations using Three.js to the luxury site.
|
|
*/
|
|
|
|
add_action('wp_enqueue_scripts', function() {
|
|
wp_enqueue_script('threejs', 'https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js', [], '128', true);
|
|
});
|
|
|
|
add_action('wp_footer', function() {
|
|
// Only show on the home page hero
|
|
if (!is_front_page()) return;
|
|
?>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const hero = document.querySelector('.coco-hero');
|
|
if (!hero) return;
|
|
|
|
// Create canvas container
|
|
const canvasContainer = document.createElement('div');
|
|
canvasContainer.id = 'coco-3d-bg';
|
|
canvasContainer.style.position = 'absolute';
|
|
canvasContainer.style.top = '0';
|
|
canvasContainer.style.left = '0';
|
|
canvasContainer.style.width = '100%';
|
|
canvasContainer.style.height = '100%';
|
|
canvasContainer.style.zIndex = '0';
|
|
canvasContainer.style.pointerEvents = 'none';
|
|
hero.style.position = 'relative';
|
|
hero.insertBefore(canvasContainer, hero.firstChild);
|
|
|
|
// Ensure hero content is above the canvas
|
|
Array.from(hero.children).forEach(child => {
|
|
if (child.id !== 'coco-3d-bg') {
|
|
child.style.position = 'relative';
|
|
child.style.zIndex = '1';
|
|
}
|
|
});
|
|
|
|
// Three.js Scene Setup
|
|
const scene = new THREE.Scene();
|
|
const camera = new THREE.PerspectiveCamera(75, hero.offsetWidth / hero.offsetHeight, 0.1, 1000);
|
|
const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
|
|
renderer.setSize(hero.offsetWidth, hero.offsetHeight);
|
|
canvasContainer.appendChild(renderer.domElement);
|
|
|
|
// Add floating golden particles
|
|
const geometry = new THREE.BufferGeometry();
|
|
const count = 50;
|
|
const positions = new Float32Array(count * 3);
|
|
for (let i = 0; i < count * 3; i++) {
|
|
positions[i] = (Math.random() - 0.5) * 10;
|
|
}
|
|
geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
|
|
|
|
const material = new THREE.PointsMaterial({
|
|
color: 0xD4AF37, // Gold
|
|
size: 0.1,
|
|
transparent: true,
|
|
opacity: 0.6
|
|
});
|
|
|
|
const points = new THREE.Points(geometry, material);
|
|
scene.add(points);
|
|
|
|
camera.position.z = 5;
|
|
|
|
function animate() {
|
|
requestAnimationFrame(animate);
|
|
points.rotation.y += 0.002;
|
|
points.rotation.x += 0.001;
|
|
renderer.render(scene, camera);
|
|
}
|
|
|
|
animate();
|
|
|
|
window.addEventListener('resize', () => {
|
|
camera.aspect = hero.offsetWidth / hero.offsetHeight;
|
|
camera.updateProjectionMatrix();
|
|
renderer.setSize(hero.offsetWidth, hero.offsetHeight);
|
|
});
|
|
});
|
|
</script>
|
|
<?php
|
|
});
|