diff --git a/public/threeJS/three2.html b/public/threeJS/three2.html
new file mode 100644
index 0000000000000000000000000000000000000000..89c38b5fe1e718a78b4f7774af68e72b6cd7f82b
--- /dev/null
+++ b/public/threeJS/three2.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Three.js Cube and Cylinder</title>
+ <style>
+ body { margin: 0; }
+ canvas { display: block; }
+ </style>
+</head>
+<body>
+ <script src="https://cdn.jsdelivr.net/npm/three@0.133.2/build/three.min.js"></script>
+ <script>
+ // Create a scene
+ const scene = new THREE.Scene();
+
+ // Create a camera
+ const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+ camera.position.z = 5;
+
+ // Create a renderer
+ const renderer = new THREE.WebGLRenderer();
+ renderer.setSize(window.innerWidth, window.innerHeight);
+ document.body.appendChild(renderer.domElement);
+
+ // Create geometry
+ const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
+ const cylinderGeometry = new THREE.CylinderGeometry(0.5, 0.5, 1, 32);
+
+ // Create materials
+ const cubeMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
+ const cylinderMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });
+
+ // Create mesh objects
+ const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
+ const cylinder = new THREE.Mesh(cylinderGeometry, cylinderMaterial);
+
+ // Add mesh objects to the scene
+ scene.add(cube);
+ scene.add(cylinder);
+
+ // Render loop
+ function animate() {
+ requestAnimationFrame(animate);
+
+ cube.rotation.x += 0.01;
+ cube.rotation.y += 0.01;
+
+ cylinder.rotation.x += 0.01;
+ cylinder.rotation.y += 0.01;
+
+ renderer.render(scene, camera);
+ }
+
+ animate();
+ </script>
+</body>
+</html>
+