ShaneBrumback/threejs-examples-tracking-animated-3d-objects-with-the-camera.html

## threejs-examples-tracking-animated-3d-objects-with-the-camera.html
<!--////////////////////////////////////////////////////////////////////////////////////////
///                                                                                      ///
///  Example Using Three.js Library, HTML, CSS & JavaScript                              ///
//   3D Interactive Web Apps & Games   2021-2024                                         ///
///  Contact Shane Brumback https://www.shanebrumback.com                                ///
///  Send a message if you have questions about this code                                ///
///  I am a freelance developer. I develop any and all web.                              ///
///  Apps Websites 3D 2D CMS Systems etc. Contact me anytime :)                          ///
///                                                                                      ///
////////////////////////////////////////////////////////////////////////////////////////////-->


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Threejs Examples - Tracking Animated 3D Objects With The Camera</title>

</head>
<body>

    <!--Load the latest version of Three.js from CDN-->
    <script src="https://cdn.jsdelivr.net/npm/three@latest/build/three.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@latest/examples/js/controls/OrbitControls.js"></script>

    <script>

        // Create the scene
        var scene = new THREE.Scene();

        // Create the camera
        var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        camera.position.z = 5;
        camera.position.y = 1;

        // Create the renderer
        let renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.toneMapping = THREE.ReinhardToneMapping;
        renderer.shadowMap.enabled = true;
        renderer.shadowMap.type = THREE.PCFSoftShadowMap;
        renderer.domElement.id = 'renderer';
        renderer.setClearColor(0x000000, 1); // Set background color to black
        renderer.domElement.style.position = 'fixed';
        renderer.domElement.style.zIndex = '-1';
        renderer.domElement.style.left = '0';
        renderer.domElement.style.top = '0';
        document.body.appendChild(renderer.domElement);

        // Create the grid
        var gridSize = 10;
        var gridStep = 1;
        var gridHelper = new THREE.GridHelper(gridSize, gridSize, 0xffffff, 0xffffff);
        gridHelper.position.set(0, 0, 0);
        scene.add(gridHelper);

        // Create the sphere
        var sphereGeometry = new THREE.SphereGeometry(0.5, 32, 32);
        var sphereMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });
        var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
        scene.add(sphere);

        // Camera movement variables
        var cameraSpeed = 0.01;

        // Sphere movement variables
        var sphereVelocity = new THREE.Vector3(0.01, 0, 0);
        var sphereMaxSpeed = 0.01; // Adjust this value to control the speed

        // Randomly move the sphere within the plane area
        function moveSphere() {
            if (
                sphere.position.x <= -gridSize / 2 + gridStep / 2 ||
                sphere.position.x >= gridSize / 2 - gridStep / 2 ||
                sphere.position.z <= -gridSize / 2 + gridStep / 2 ||
                sphere.position.z >= gridSize / 2 - gridStep / 2
            ) {
                // Reverse the direction of the sphere's velocity
                sphereVelocity.multiplyScalar(-1);
            }

            // Limit the sphere's speed
            if (sphereVelocity.length() > sphereMaxSpeed) {
                sphereVelocity.normalize().multiplyScalar(sphereMaxSpeed);
            }

            // Update the sphere's position
            sphere.position.add(sphereVelocity);
            sphere.position.y = 0.5;
        }

        // Update camera position to follow the sphere
        function followSphere() {
            camera.position.x = sphere.position.x;
            camera.position.z = sphere.position.z + 5; // Place camera behind the sphere
        }

        // Rotate the sphere to simulate rolling
        function rollSphere() {
            var rotationAngle = sphereVelocity.length() * 0.1;
            var rollDirection = new THREE.Vector3(-sphereVelocity.z, 0, sphereVelocity.x).normalize();
            sphere.rotateOnAxis(rollDirection, rotationAngle);
        }

        // Render loop
        function animate() {
            requestAnimationFrame(animate);
            moveSphere();
            followSphere();
            rollSphere();
            renderer.render(scene, camera);
        }

        // Start the animation
        animate();


        // Add event listener for window resize
        window.addEventListener('resize', onWindowResize);

        // Function to handle window resize
        function onWindowResize() {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        }

    </script>
</body>
</html>
	<!--////////////////////////////////////////////////////////////////////////////////////////
	/// ///
	/// Example Using Three.js Library, HTML, CSS & JavaScript ///
	// 3D Interactive Web Apps & Games 2021-2024 ///
	/// Contact Shane Brumback https://www.shanebrumback.com ///
	/// Send a message if you have questions about this code ///
	/// I am a freelance developer. I develop any and all web. ///
	/// Apps Websites 3D 2D CMS Systems etc. Contact me anytime :) ///
	/// ///
	////////////////////////////////////////////////////////////////////////////////////////////-->


	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Threejs Examples - Tracking Animated 3D Objects With The Camera</title>

	</head>
	<body>

	<!--Load the latest version of Three.js from CDN-->
	<script src="https://cdn.jsdelivr.net/npm/three@latest/build/three.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/three@latest/examples/js/controls/OrbitControls.js"></script>

	<script>

	// Create the scene
	var scene = new THREE.Scene();

	// Create the camera
	var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
	camera.position.z = 5;
	camera.position.y = 1;

	// Create the renderer
	let renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
	renderer.setPixelRatio(window.devicePixelRatio);
	renderer.setSize(window.innerWidth, window.innerHeight);
	renderer.toneMapping = THREE.ReinhardToneMapping;
	renderer.shadowMap.enabled = true;
	renderer.shadowMap.type = THREE.PCFSoftShadowMap;
	renderer.domElement.id = 'renderer';
	renderer.setClearColor(0x000000, 1); // Set background color to black
	renderer.domElement.style.position = 'fixed';
	renderer.domElement.style.zIndex = '-1';
	renderer.domElement.style.left = '0';
	renderer.domElement.style.top = '0';
	document.body.appendChild(renderer.domElement);

	// Create the grid
	var gridSize = 10;
	var gridStep = 1;
	var gridHelper = new THREE.GridHelper(gridSize, gridSize, 0xffffff, 0xffffff);
	gridHelper.position.set(0, 0, 0);
	scene.add(gridHelper);

	// Create the sphere
	var sphereGeometry = new THREE.SphereGeometry(0.5, 32, 32);
	var sphereMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });
	var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
	scene.add(sphere);

	// Camera movement variables
	var cameraSpeed = 0.01;

	// Sphere movement variables
	var sphereVelocity = new THREE.Vector3(0.01, 0, 0);
	var sphereMaxSpeed = 0.01; // Adjust this value to control the speed

	// Randomly move the sphere within the plane area
	function moveSphere() {
	if (
	sphere.position.x <= -gridSize / 2 + gridStep / 2 \|\|
	sphere.position.x >= gridSize / 2 - gridStep / 2 \|\|
	sphere.position.z <= -gridSize / 2 + gridStep / 2 \|\|
	sphere.position.z >= gridSize / 2 - gridStep / 2
	) {
	// Reverse the direction of the sphere's velocity
	sphereVelocity.multiplyScalar(-1);
	}

	// Limit the sphere's speed
	if (sphereVelocity.length() > sphereMaxSpeed) {
	sphereVelocity.normalize().multiplyScalar(sphereMaxSpeed);
	}

	// Update the sphere's position
	sphere.position.add(sphereVelocity);
	sphere.position.y = 0.5;
	}

	// Update camera position to follow the sphere
	function followSphere() {
	camera.position.x = sphere.position.x;
	camera.position.z = sphere.position.z + 5; // Place camera behind the sphere
	}

	// Rotate the sphere to simulate rolling
	function rollSphere() {
	var rotationAngle = sphereVelocity.length() * 0.1;
	var rollDirection = new THREE.Vector3(-sphereVelocity.z, 0, sphereVelocity.x).normalize();
	sphere.rotateOnAxis(rollDirection, rotationAngle);
	}

	// Render loop
	function animate() {
	requestAnimationFrame(animate);
	moveSphere();
	followSphere();
	rollSphere();
	renderer.render(scene, camera);
	}

	// Start the animation
	animate();


	// Add event listener for window resize
	window.addEventListener('resize', onWindowResize);

	// Function to handle window resize
	function onWindowResize() {
	camera.aspect = window.innerWidth / window.innerHeight;
	camera.updateProjectionMatrix();
	renderer.setSize(window.innerWidth, window.innerHeight);
	}

	</script>
	</body>
	</html>