From b968708ff52879515f0528a74eafbb5ebdb8bdbd Mon Sep 17 00:00:00 2001 From: Alfakhori <muhammad.alfakhori@hft-stuttgart.de> Date: Fri, 26 May 2023 06:36:23 +0000 Subject: [PATCH] Update public/threeJS/three2.html --- public/threeJS/three2.html | 59 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 59 insertions(+) create mode 100644 public/threeJS/three2.html diff --git a/public/threeJS/three2.html b/public/threeJS/three2.html new file mode 100644 index 0000000..89c38b5 --- /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> + -- GitLab