ShaneBrumback · March 19, 2024 05:17
diff --git a/threejs-examples-creating-and-animating-simple-3d-objects.html b/threejs-examples-creating-and-animating-simple-3d-objects.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>
 <head>
    <meta charset="utf-8">
    <title>Threejs Examples - Creating and Animating Simple 3D Objects</title>

 </head>

 <body>

    <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 type="module">

        // Set up Three js scene
        const scene = new THREE.Scene();

        // Set up the camera
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        camera.position.z = 5;

        // Set up 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.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);

        // Set up the orbital controls
        const controls = new THREE.OrbitControls(camera, renderer.domElement);
        controls.dampingFactor = 0.1; // Reduce camera damping for smoother movement
        controls.autoRotate = true; // Make the camera rotate sinuously around the spheres

        // Create blue cube
        const geometry = new THREE.BoxGeometry(3, 3, 3);
        const material = new THREE.MeshLambertMaterial({ color: 0x0000ff });
        const cube = new THREE.Mesh(geometry, material);
        scene.add(cube);

        // Create the spotlight with shadows
        const spotLight = new THREE.SpotLight(0xffffff);
        spotLight.position.set(10, 20, 30);
        spotLight.castShadow = true;
        scene.add(spotLight);

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

        // Enable shadows on the spheres
        scene.traverse(function (node) {
            if (node instanceof THREE.Mesh) {
                node.castShadow = true;
            }
        });

        var grid = new THREE.GridHelper(100, 40);
        grid.position.y = -4;
        scene.add(grid);

        // Render loop
        const render = function () {
            requestAnimationFrame(render);
            controls.update()
            // Rotate cube
            cube.rotation.x += 0.01;
            cube.rotation.y += 0.01;

            renderer.render(scene, camera);
        };

        render();
    </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>
	<head>
	<meta charset="utf-8">
	<title>Threejs Examples - Creating and Animating Simple 3D Objects</title>

	</head>

	<body>

	<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 type="module">

	// Set up Three js scene
	const scene = new THREE.Scene();

	// Set up the camera
	const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
	camera.position.z = 5;

	// Set up 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.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);

	// Set up the orbital controls
	const controls = new THREE.OrbitControls(camera, renderer.domElement);
	controls.dampingFactor = 0.1; // Reduce camera damping for smoother movement
	controls.autoRotate = true; // Make the camera rotate sinuously around the spheres

	// Create blue cube
	const geometry = new THREE.BoxGeometry(3, 3, 3);
	const material = new THREE.MeshLambertMaterial({ color: 0x0000ff });
	const cube = new THREE.Mesh(geometry, material);
	scene.add(cube);

	// Create the spotlight with shadows
	const spotLight = new THREE.SpotLight(0xffffff);
	spotLight.position.set(10, 20, 30);
	spotLight.castShadow = true;
	scene.add(spotLight);

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

	// Enable shadows on the spheres
	scene.traverse(function (node) {
	if (node instanceof THREE.Mesh) {
	node.castShadow = true;
	}
	});

	var grid = new THREE.GridHelper(100, 40);
	grid.position.y = -4;
	scene.add(grid);

	// Render loop
	const render = function () {
	requestAnimationFrame(render);
	controls.update()
	// Rotate cube
	cube.rotation.x += 0.01;
	cube.rotation.y += 0.01;

	renderer.render(scene, camera);
	};

	render();
	</script>
	</body>
	</html>