Update public/threeJS/three2.html

b968708f · Alfakhori · 6024905a · b968708f
Commit b968708f authored May 26, 2023 by Alfakhori
--- a/public/threeJS/three2.html
+++ b/public/threeJS/three2.html
+<!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>
+