aigenart.jp

// Three.js PBR Rendering Code for Patek Philippe Watch
// Requires Three.js library: <script src="https://cdn.jsdelivr.net/npm/three@0.163.0/build/three.module.js"></script>
// Also include OrbitControls for interaction: <script src="https://cdn.jsdelivr.net/npm/three@0.163.0/examples/jsm/controls/OrbitControls.js"></script>
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
function init() {
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// PBR Environment Setup (HDR for realistic reflections)
const pmremGenerator = new THREE.PMREMGenerator(renderer);
pmremGenerator.compileCubemapShader();
// Load HDR environment map for PBR (replace with your HDR file URL)
new THREE.RGBELoader().load('https://example.com/hdr/environment.hdr', function (texture) {
const envMap = pmremGenerator.fromEquirectangular(texture).texture;
scene.background = envMap;
scene.environment = envMap;
texture.dispose();
pmremGenerator.dispose();
});
// Light Elements: Soft directed lighting for highlights and reflections
const directionalLight = new THREE.DirectionalLight(0xffffff, 1.5); // Main light for sunburst effect
directionalLight.position.set(5, 5, 5);
scene.add(directionalLight);
const pointLight = new THREE.PointLight(0xffffff, 1, 100); // Subtle point light for gear highlights
pointLight.position.set(0, 2, 3);
scene.add(pointLight);
const ambientLight = new THREE.AmbientLight(0x404040, 0.5); // Soft ambient for overall sophistication
scene.add(ambientLight);
// Watch Model: Simplified geometry with PBR materials
// Case: Gold polished with brushed sides
const caseGeometry = new THREE.CylinderGeometry(1.5, 1.5, 0.2, 64); // Simplified case
const caseMaterial = new THREE.MeshStandardMaterial({ // PBR Material
color: 0xba9772, // #ba9772
metalness: 0.9, // High metalness for gold reflection
roughness: 0.2, // Polished finish
envMapIntensity: 1.5 // Enhance reflections
});
const watchCase = new THREE.Mesh(caseGeometry, caseMaterial);
scene.add(watchCase);
// Dial: Deep blue with sunburst (use normal map for texture)
const dialGeometry = new THREE.CircleGeometry(1.4, 64);
const dialMaterial = new THREE.MeshStandardMaterial({
color: 0x3e4f65, // #3e4f65
metalness: 0.1,
roughness: 0.4, // Subtle texture for sunburst
envMapIntensity: 1.0
});
const dial = new THREE.Mesh(dialGeometry, dialMaterial);
dial.position.z = 0.11; // Slightly elevated
dial.rotation.x = Math.PI; // Face up
scene.add(dial);
// Strap: Brown leather with scale pattern (use texture)
const strapGeometry = new THREE.BoxGeometry(0.5, 4, 0.1); // Simplified strap
const strapMaterial = new THREE.MeshStandardMaterial({
color: 0x51342c, // #51342c
metalness: 0.0,
roughness: 0.8, // Matte leather
normalMap: new THREE.TextureLoader().load('https://example.com/alligator_texture.jpg') // Add scale pattern
});
const strap = new THREE.Mesh(strapGeometry, strapMaterial);
strap.position.y = -2.5; // Attach to case
scene.add(strap);
// Hands: Golden with luminous
const hourHandGeometry = new THREE.BoxGeometry(0.1, 1, 0.01);
const handMaterial = new THREE.MeshStandardMaterial({
color: 0xc3bfb5, // #c3bfb5
metalness: 0.7,
roughness: 0.3,
emissive: 0xc3bfb5, // Luminous glow
emissiveIntensity: 0.2
});
const hourHand = new THREE.Mesh(hourHandGeometry, handMaterial);
hourHand.position.set(0, 0.5, 0.12);
scene.add(hourHand);
// Text: Brand name (simplified as plane with texture)
const textMaterial = new THREE.MeshStandardMaterial({
color: 0xa6917a, // #a6917a
metalness: 0.8,
roughness: 0.2
});
// Use TextGeometry for actual text (requires font loader)
// For simplicity, assume a plane
const textGeometry = new THREE.PlaneGeometry(1, 0.2);
const textMesh = new THREE.Mesh(textGeometry, textMaterial);
textMesh.position.set(0, -0.5, 0.12);
scene.add(textMesh);
// Open-heart: Gears (simplified torus)
const gearGeometry = new THREE.TorusGeometry(0.3, 0.1, 16, 100);
const gearMaterial = new THREE.MeshStandardMaterial({
color: 0xba9772,
metalness: 1.0,
roughness: 0.1
});
const gear = new THREE.Mesh(gearGeometry, gearMaterial);
gear.position.set(0, 1, 0.05);
scene.add(gear);
// Camera and Controls
camera.position.z = 5;
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
// Animation Loop
function animate() {
requestAnimationFrame(animate);
controls.update();
renderer.render(scene, camera);
}
animate();
// Handle Resize
window.addEventListener('resize', () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});
}
init();