updated code

removing unwanted lines

grids.js

@@ -3,39 +3,39 @@ const lineMaterial = new THREE.LineBasicMaterial({
     linewidth: 10,
 });
 
-// Lines for the sides of the cube
+
 const sideLineGeometries = [
-    // Line 1
+
     new THREE.BufferGeometry().setFromPoints([
         new THREE.Vector3(1.15, 0.38, -1.15),
         new THREE.Vector3(-1.15, 0.38, -1.15)
     ]),
 
-    // Line 2
+
     new THREE.BufferGeometry().setFromPoints([
         new THREE.Vector3(1.15, 0.38, 1.15),
         new THREE.Vector3(-1.15, 0.38, 1.15)
     ]),
 
-    // Line 3
+
     new THREE.BufferGeometry().setFromPoints([
         new THREE.Vector3(1.15, 0.38, 1.15),
         new THREE.Vector3(1.15, 0.38, -1.15)
     ]),
 
-    // Line 4
+
     new THREE.BufferGeometry().setFromPoints([
         new THREE.Vector3(-1.15, 0.38, 1.15),
         new THREE.Vector3(-1.15, 0.38, -1.15)
     ]),
 
-    // Line 5 (Bottom)
+
     new THREE.BufferGeometry().setFromPoints([
         new THREE.Vector3(1.15, -0.38, 1.15),
         new THREE.Vector3(-1.15, -0.38, 1.15)
     ]),
 
-    // Line 6
+
     new THREE.BufferGeometry().setFromPoints([
         new THREE.Vector3(1.15, -0.38, -1.15),
         new THREE.Vector3(1.15, -0.38, 1.15)
@@ -59,129 +59,126 @@ sideLineGeometries.forEach((geometry) => {
     scene.add(sideLine);
 });
 
-// Vertical Lines (Edges)
-// Line 9
+
 const lineGeometry9 = new THREE.BufferGeometry().setFromPoints([
     new THREE.Vector3(-1.15, 1.15, -0.38),
     new THREE.Vector3(-1.15, -1.15, -0.38)
 ]);
 const line9 = new THREE.Line(lineGeometry9, lineMaterial);
 scene.add(line9);
 
-// Line 10
+
 const lineGeometry10 = new THREE.BufferGeometry().setFromPoints([
     new THREE.Vector3(-1.15, 1.15, 0.38),
     new THREE.Vector3(-1.15, -1.15, 0.38)
 ]);
 const line10 = new THREE.Line(lineGeometry10, lineMaterial);
 scene.add(line10);
 
-// Line 11
+
 const lineGeometry11 = new THREE.BufferGeometry().setFromPoints([
     new THREE.Vector3(-1.15, 1.15, 0.38),
     new THREE.Vector3(1.15, 1.15, 0.38)
 ]);
 const line11 = new THREE.Line(lineGeometry11, lineMaterial);
 scene.add(line11);
 
-// Line 12
+
 const lineGeometry12 = new THREE.BufferGeometry().setFromPoints([
     new THREE.Vector3(1.15, 1.15, 0.38),
     new THREE.Vector3(1.15, -1.15, 0.38)
 ]);
 const line12 = new THREE.Line(lineGeometry12, lineMaterial);
 scene.add(line12);
 
-// Line 13
+
 const lineGeometry13 = new THREE.BufferGeometry().setFromPoints([
     new THREE.Vector3(1.15, 1.15, -0.36),
     new THREE.Vector3(1.15, -1.15, -0.36)
 ]);
 const line13 = new THREE.Line(lineGeometry13, lineMaterial);
 scene.add(line13);
 
-// Line 14
+
 const lineGeometry14 = new THREE.BufferGeometry().setFromPoints([
     new THREE.Vector3(1.15, 1.15, -0.38),
     new THREE.Vector3(-1.15, 1.15, -0.38)
 ]);
 const line14 = new THREE.Line(lineGeometry14, lineMaterial);
 scene.add(line14);
 
-// Horizontal Lines (Edges)
-// Line 15
+
 const lineGeometry15 = new THREE.BufferGeometry().setFromPoints([
     new THREE.Vector3(1.15, -1.15, -0.38),
     new THREE.Vector3(-1.15, -1.15, -0.38)
 ]);
 const line15 = new THREE.Line(lineGeometry15, lineMaterial);
 scene.add(line15);
 
-// Line 16
+
 const lineGeometry16 = new THREE.BufferGeometry().setFromPoints([
     new THREE.Vector3(1.15, -1.15, 0.36),
     new THREE.Vector3(-1.15, -1.15, 0.36)
 ]);
 const line16 = new THREE.Line(lineGeometry16, lineMaterial);
 scene.add(line16);
 
-// Line 17
 const lineGeometry17 = new THREE.BufferGeometry().setFromPoints([
     new THREE.Vector3(0.36, 1.15, 1.15),
     new THREE.Vector3(0.36, -1.15, 1.15)
 ]);
 const line17 = new THREE.Line(lineGeometry17, lineMaterial);
 scene.add(line17);
 
-// Line 18
+
 const lineGeometry18 = new THREE.BufferGeometry().setFromPoints([
     new THREE.Vector3(-0.36, 1.15, 1.15),
     new THREE.Vector3(-0.36, -1.15, 1.15)
 ]);
 const line18 = new THREE.Line(lineGeometry18, lineMaterial);
 scene.add(line18);
 
-// Line 19
+
 const lineGeometry19 = new THREE.BufferGeometry().setFromPoints([
     new THREE.Vector3(-0.36, 1.15, -1.15),
     new THREE.Vector3(-0.36, -1.15, -1.15)
 ]);
 const line19 = new THREE.Line(lineGeometry19, lineMaterial);
 scene.add(line19);
 
-// Line 20
+
 const lineGeometry20 = new THREE.BufferGeometry().setFromPoints([
     new THREE.Vector3(0.36, 1.15, -1.15),
     new THREE.Vector3(0.36, -1.15, -1.15)
 ]);
 const line20 = new THREE.Line(lineGeometry20, lineMaterial);
 scene.add(line20);
 
-// Line 21
+
 const lineGeometry21 = new THREE.BufferGeometry().setFromPoints([
     new THREE.Vector3(0.36, -1.15, 1.15),
     new THREE.Vector3(0.36, -1.15, -1.15)
 ]);
 const line21 = new THREE.Line(lineGeometry21, lineMaterial);
 scene.add(line21);
 
-// Line 22
+
 const lineGeometry22 = new THREE.BufferGeometry().setFromPoints([
     new THREE.Vector3(-0.36, -1.15, 1.15),
     new THREE.Vector3(-0.36, -1.15, -1.15)
 ]);
 const line22 = new THREE.Line(lineGeometry22, lineMaterial);
 scene.add(line22);
 
-// Line 23
+
 const lineGeometry23 = new THREE.BufferGeometry().setFromPoints([
     new THREE.Vector3(0.36, 1.15, 1.15),
     new THREE.Vector3(0.36, 1.15, -1.15)
 ]);
 const line23 = new THREE.Line(lineGeometry23, lineMaterial);
 scene.add(line23);
 
-// Line 24
+
 const lineGeometry24 = new THREE.BufferGeometry().setFromPoints([
     new THREE.Vector3(-0.36, 1.15, 1.15),
     new THREE.Vector3(-0.36, 1.15, -1.15)

htmlcube.js

@@ -1,28 +1,25 @@
 const scene = new THREE.Scene();
 
-// Set up the camera
+
 const width = window.innerWidth;
 const height = window.innerHeight;
 const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
 camera.position.z = 5;
 
-// Create the renderer and append it to the container
 const renderer = new THREE.WebGLRenderer();
 renderer.setSize(width, height);
 document.querySelector('#renderer-container').appendChild(renderer.domElement);
 
-// Add mouse interaction for camera movement (with OrbitControls)
 const controls = new THREE.OrbitControls(camera, renderer.domElement);
-controls.autoRotate = false; // Prevent automatic rotation
+controls.autoRotate = false; 
+
 
-// Create a 3D cube
 const cubeSize = 2.3;
 const cubeGeometry = new THREE.BoxGeometry(cubeSize, cubeSize, cubeSize);
 const cubeMaterial = new THREE.MeshBasicMaterial({ color: 0x44aa88 });
 const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
 scene.add(cube);
 
-// Render the scene with the camera
 function animate() {
     requestAnimationFrame(animate);
     renderer.render(scene, camera);

three.html

@@ -13,13 +13,13 @@
     </style>
 </head>
 <body>
-    <!-- Create a container for the 3D renderer -->
+
     <div id="renderer-container"></div>
     <div id="canvas-container"></div>
 
 
 
-    <!-- Include Three.js and OrbitControls directly in the HTML -->
+
     <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/three@0.101.1/examples/js/controls/OrbitControls.js"></script>
     <script src="htmlcube.js"></script>

x.js

@@ -2,13 +2,10 @@ import { FontLoader } from './FontLoader.js';
 import { TextGeometry } from './TextGeometry.js';
 
 
-animate();
 
-   const renderer = new THREE.WebGLRenderer({ antialias: true });
-    renderer.setPixelRatio(window.devicePixelRatio);
-    renderer.setSize(window.innerWidth, window.innerHeight);
-    document.body.appendChild(renderer.domElement);
+animate();
 
+
 
 window.addEventListener('resize', onWindowResize);
 
@@ -19,10 +16,11 @@ function onWindowResize() {
 }
 
 
-let mouseX, mouseY;
+
 const raycaster=new THREE.Raycaster();
 const mouse=new THREE.Vector2();
 window.addEventListener('click',mouseclick,false)
+
 function mouseclick(event) {
     mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
     mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
@@ -31,7 +29,9 @@ function mouseclick(event) {
     if (intersects.length > 0) {
         const intersectionPoint = intersects[0].point;
         addtext(intersectionPoint);
+        console.log(intersectionPoint);
     }}
+
 
     function addtext(position){
     const loader = new THREE.FontLoader();
@@ -53,18 +53,18 @@ function mouseclick(event) {
             size: 0.38,
             height: 10
         });
-        console.log(mouseX,mouseY);
+
         const text = new THREE.Mesh(geometry, matLite);
-        text.position.z = 1;
+        console.log()
         text.position.copy(position);
         scene.add(text);
-        render();
+
     });
 
 
 }
-// Move the camera to focus on the cube
-camera.position.x = cube.position.x;
-camera.position.y = cube.position.y;
-camera.lookAt(cube.position);
+
+
+
+//}
 addtext();