threejsfundamentals

I am new to using three.js, JavaScript, html, and CSS and I am working on loading a 3d model. I have a program that is working when I pull a gltf file online, ex:

I try to add light in Three.js but when I update display, light doesn't affect on my cilinder I literally copy pasted the source code from Three.js docs Three.js but it doesnt work,

this is my code

I want to replace a plane in ThreeJS to a specific Z value.

I create a shapeBufferGeometry with shape which contains Vector3s containing the x y and z value.

here is my code and what I obtain. I want the white plane to match the position of aqua lines.

The code bellow allow me to render the scene with my plane the different points in it and the vertices around it.

I know that I can use translate to move the plane but I don't know how to properly use it. And how can I know on which axis should a translate my geometry depending on my vector values.

I am new to threejs and now trying to make this work since ....

I am loading a GLTF with mappings (jpg) into threejs.

I can't find a way to make the loaded model clickable.

Can you please show, how to make this model clickable (single or double click and touch) and call a js-function ?

this is my scene:

threejs-model-link

I'm using BufferGeometry to handle meshes with lots of vertices, faces and normals, which I supply via TypedArrays. During rendering, the Scene and its Mesh is constructed without any warnings or errors in the console. With BoxHelper I've constructed a Bounding Box around the mesh.

Now the strangest thing happens: Although the Bounding Box is perfectly correct, the faces/vertices are cut off somewhere in the middle.

To see what I mean, here is the comparison of two models rendered with a python script (left) and rendered with Three.js (right):

The code I've used for this task can be found here in this pastebin. Any help is highly appreciated.

I am selecting vertices from a point cloud using angular and three.js. I have been trying to label a selected vertex with its x,y,z information. I have been using these resources in my attempt:

1. three.js Vector3 to 2D screen coordinate with rotated scene
2. https://threejsfundamentals.org/threejs/lessons/threejs-align-html-elements-to-3d.html

and I can't get either to work as described.

My code currently is:

I am running an Ubuntu 20.10 machine and testing my site on Firefox. Using npm as package manager and parcel as a bundler. When I try to load a .gltf model in three.js, parcel does not show any errors. When I go to localhost:1234/ my laptop freezes and the canvas is blank.

The directory structure and the file links in index.html and index.js are correct, so that's not an issue. I am also using parcel-plugin-static-files-copy to ensure the static file is available. Also, I generated the .gltf file using Blender and know that it's a valid json.

Code: index.html

I have been learning webgl from webglfundamentals where I came across a simple shader example where you can paint triangles with solid color. Here is link to tutorial and original demo.

I tried to create same effect in three js using plane geometry but I can't manage achieve solid color shader. When I use almost same setup in Three js, I get more like gradient effect. What am I doing wrong here? (I am noticing that my shader isn't consistent either as it renders differently on refresh) Also, is there place to learn shaders specifically for three js?

My case is like this: I have an asset inventory with multiple assets and I want whenever the user hovers on top of them to start the rendering with an OrbitController (I would prefer Trackball but I know that it is not possible due to a bug). The point is that the "this" variable of the class instance can not pass into the render method of the class :