ivanmem/sonnet_3_5_three.html

## sonnet_3_5_three.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fox Running in Grass</title>
    <style>
        body { margin: 0; }
        canvas { display: block; }
    </style>
</head>
<body>
<script type="importmap">
    {
      "imports": {
        "three": "https://unpkg.com/three@0.159.0/build/three.module.js",
        "three/addons/": "https://unpkg.com/three@0.159.0/examples/jsm/"
      }
    }
</script>
<script type="module">
    import * as THREE from 'three';
    import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

    let scene, camera, renderer, fox, sun;
    let clock = new THREE.Clock();

    init();
    animate();

    function init() {
        scene = new THREE.Scene();
        camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        camera.position.set(0, 5, 10);
        camera.lookAt(0, 0, 0);

        renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        // Lighting
        const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
        scene.add(ambientLight);

        // Sun
        const sunGeometry = new THREE.SphereGeometry(0.5, 32, 32);
        const sunMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00 });
        sun = new THREE.Mesh(sunGeometry, sunMaterial);
        scene.add(sun);

        // Ground (grass)
        const groundGeometry = new THREE.PlaneGeometry(20, 20);
        const groundMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00, side: THREE.DoubleSide });
        const ground = new THREE.Mesh(groundGeometry, groundMaterial);
        ground.rotation.x = Math.PI / 2;
        scene.add(ground);

        // Load fox model
        const loader = new GLTFLoader();
        loader.load('fox.glb', (gltf) => {
            fox = gltf.scene;
            fox.scale.set(0.05, 0.05, 0.05);
            scene.add(fox);
        });

        window.addEventListener('resize', onWindowResize, false);
    }

    function animate() {
        requestAnimationFrame(animate);

        const time = clock.getElapsedTime();

        // Move fox in a circle
        if (fox) {
            fox.position.x = Math.cos(time) * 5;
            fox.position.z = Math.sin(time) * 5;
            fox.rotation.y = -time;
        }

        // Move sun based on current time
        const date = new Date();
        const hours = date.getHours();
        const minutes = date.getMinutes();
        const totalMinutes = hours * 60 + minutes;
        const angle = (totalMinutes / 1440) * Math.PI * 2 - Math.PI / 2;
        sun.position.x = Math.cos(angle) * 8;
        sun.position.y = Math.sin(angle) * 8;

        renderer.render(scene, camera);
    }

    function onWindowResize() {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth, window.innerHeight);
    }
</script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Fox Running in Grass</title>
	<style>
	body { margin: 0; }
	canvas { display: block; }
	</style>
	</head>
	<body>
	<script type="importmap">
	{
	"imports": {
	"three": "https://unpkg.com/three@0.159.0/build/three.module.js",
	"three/addons/": "https://unpkg.com/three@0.159.0/examples/jsm/"
	}
	}
	</script>
	<script type="module">
	import * as THREE from 'three';
	import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

	let scene, camera, renderer, fox, sun;
	let clock = new THREE.Clock();

	init();
	animate();

	function init() {
	scene = new THREE.Scene();
	camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
	camera.position.set(0, 5, 10);
	camera.lookAt(0, 0, 0);

	renderer = new THREE.WebGLRenderer();
	renderer.setSize(window.innerWidth, window.innerHeight);
	document.body.appendChild(renderer.domElement);

	// Lighting
	const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
	scene.add(ambientLight);

	// Sun
	const sunGeometry = new THREE.SphereGeometry(0.5, 32, 32);
	const sunMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00 });
	sun = new THREE.Mesh(sunGeometry, sunMaterial);
	scene.add(sun);

	// Ground (grass)
	const groundGeometry = new THREE.PlaneGeometry(20, 20);
	const groundMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00, side: THREE.DoubleSide });
	const ground = new THREE.Mesh(groundGeometry, groundMaterial);
	ground.rotation.x = Math.PI / 2;
	scene.add(ground);

	// Load fox model
	const loader = new GLTFLoader();
	loader.load('fox.glb', (gltf) => {
	fox = gltf.scene;
	fox.scale.set(0.05, 0.05, 0.05);
	scene.add(fox);
	});

	window.addEventListener('resize', onWindowResize, false);
	}

	function animate() {
	requestAnimationFrame(animate);

	const time = clock.getElapsedTime();

	// Move fox in a circle
	if (fox) {
	fox.position.x = Math.cos(time) * 5;
	fox.position.z = Math.sin(time) * 5;
	fox.rotation.y = -time;
	}

	// Move sun based on current time
	const date = new Date();
	const hours = date.getHours();
	const minutes = date.getMinutes();
	const totalMinutes = hours * 60 + minutes;
	const angle = (totalMinutes / 1440) * Math.PI * 2 - Math.PI / 2;
	sun.position.x = Math.cos(angle) * 8;
	sun.position.y = Math.sin(angle) * 8;

	renderer.render(scene, camera);
	}

	function onWindowResize() {
	camera.aspect = window.innerWidth / window.innerHeight;
	camera.updateProjectionMatrix();
	renderer.setSize(window.innerWidth, window.innerHeight);
	}
	</script>
	</body>
	</html>