I am trying to create a glass like triangle for my project in 3js, but it is not working.

if ((boxSize.x > 1 || boxSize.y > 1) && this.mesh) { const cameraAspect = this.camera.aspect; const horizontalPadding = (boxSize.x – boxSize.y * cameraAspect) / 2; const verticalPadding = (boxSize.y – boxSize.x / cameraAspect) / 2; this.controls.fitToBox(this.mesh, true, { paddingTop: verticalPadding, paddingBottom: verticalPadding, paddingLeft: horizontalPadding, paddingRight: horizontalPadding, }); } Occasionally the camera will zoom to the […]

so i’m new to threejs and i was trying to render a basic rectangle using BufferGeometry but i can’t see the material that was applied to the geometry.

After slicing the 2:1 picture, using canvas and CanvasTexture to draw it, I pasted it on a panorama ball, and there was overlap at the concatenation.
enter image description here

I have a pre-rendered image which I display on screen. It has identical width and height, and is styled by css. It changes size when the window is resized and changes aspect ratio, but is always in the bottom right corner.

I am pretty new to Three.js, so please forgive me if I a missing something obvious here.

I want the camera movement made with the mouse to be the same as on this site. https://bruno-simon.com/

I have a mesh which has line segments added to it which help define its shape when rendered. i use the following code to add the lines:

When you turn the camera to the back side – looking at it frontally, the object disappears – stripes.
I don’t understand how to fix it, live example.

How can I move an object by dragging by **mouse **(for example using DragControls) but only along the **local ** Z axis of the object (round trip) , not in world coordinates.
I can only limit it in world coordinates, but it is necessary for the object to move along its local Z coordinate.