<!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8"> <title>Helle Luxus-Villa – Fotorealistisch</title> <style>body{margin:0;overflow:hidden}</style> </head> <body> <script type="importmap"> { "imports": { "three": "https://unpkg.com/three@0.160.0/build/three.module.js", "three/addons/": "https://unpkg.com/three@0.160.0/examples/jsm/" } } </script> <script type="module"> import * as THREE from 'three'; import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; const scene = new THREE.Scene(); // --- Echter Himmel mit Sonne --- const sky = new THREE.Sky(); sky.scale.setScalar(1000); scene.add(sky); const sun = new THREE.Vector3(30, 20, 15); sky.material.uniforms.sunPosition.value.copy(sun); sky.material.uniforms.turbidity.value = 4; sky.material.uniforms.rayleigh.value = 2; // --- Renderer mit realistischen Effekten --- const renderer = new THREE.WebGLRenderer({antialias:true, toneMapping: THREE.ACESFilmicToneMapping}); renderer.setSize(innerWidth, innerHeight); renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.PCFSoftShadowMap; document.body.appendChild(renderer.domElement); // --- Umgebungsspiegelungen für realistische Materialien --- const pmrem = new THREE.PMREMGenerator(renderer); scene.environment = pmrem.fromScene(sky).texture; const camera = new THREE.PerspectiveCamera(45, innerWidth/innerHeight, .1, 2000); camera.position.set(18, 12, 20); const controls = new OrbitControls(camera, renderer.domElement); controls.enableDamping = Ver más