Collection of examples from discourse.threejs.org

The answers to some questions contain some very interesting and instructive basic examples. These are difficult to find in the large number of questions on discourse.There are also good examples in resources and showcase.

Therefore I collected them and put them on one page, clearly arranged by time.
The collection may be a help for beginners. :slightly_smiling_face:


UPDATE 2019

http://discourse.threejs.hofk.de/ is now redirected to the safe side https://hofk.de/main/discourse.threejs/


The examples are organized by year. There are not many in the beginning year of the discourse, but there are many more in the following!

A download is available for completed years.

2020-01-02_18.26.54


cut-out

You can try them out immediately and use Ctrl U to view the code.
The source code contains the links and the author.

In addition, extended examples ar aviable.

cut-out

These are links to the original pages. Only examples with code on jsfiddle, codepen and my own page are considered to avoid broken links.

26 Likes
Animating Camera LookAt
Create collision with particles of a 3d model Three.js
See inside cube, occluding wall space with other cube
THREE.StaticMesh - Less memory, render faster
Linesegment line position
Interior architecture helpers
Move camera with Tween
How to load OBJ and MTL?
[RESOLVED] Sharp mesh edges around edgy curve
How can I manipulate the vertices of the sphere in three.js?
Drag 3D object with mouse using three.js
Taking an existing HTML5/JS project into three.js?
Vertices and face data into three object
Cube rotation using Leap motion sensor + three.js
3D Mesh from cloud of points
Dynamically add bones to skinned mesh
Mouse lags behide the object when dragging
How to extrude polygon from X-Y until intersection with inclined plane
Module Import / Usage
How to add contextmenu on right click?
Is it possible to add a button into the scene?
Create pulse animation and beating heart
Drag and drop with snapping objects
Net (polyhedron)
Module Import / Usage
Shape lineTo animation [noob question]
Noob need help with Cameras
How to remove interior faces while keeping exterior faces untouched?
Project with threejs
Can I place obects on a sphere surface evenly
How to label all of the vertices of an object?
Collection of sphere definitions
Three.js + Delaunator
How to remove interior faces while keeping exterior faces untouched?
Approach to dynamically "draw" mesh in space
Draw grid on top of model on each face
Align items in a specific layout
Performance problem when using raycaster
How to convert uv coordinates to 3d object?
Normal website with forms on threejs
How to show grid division dimension
Can't Get Text Geometry to show
Cast a ray at LineSegments
Three.js camera rotation
TrackballControls aren't working
20 questions help with the basics! Move, rotate, scale, destroy
Audio in Javascript and HTML
Find intersection between two Line3
Problems with creating custom polyhedron geometry
How to modify (distort) a geometry
Easiest way for straight path animation?
Compute surfaces of objects
[SOLVED] Transform controls changes to different mesh on a scene even when the arrow is in focus
Lights for car headlight
Lights for car headlight
Why is the Geometry faster than BufferGeometry?
Sphere with clickable faces
SeaShell Mesh from point array? extrude along path?
How to select a part of a geometry?
Shadow on transparent plane
Interest for collaborative coding "jams"?
How to make a camera transition to a different point
Best practices Three.js project setup & learning resources
Draw a three-dimensional map
Debug winding validator
Sensor data read into website
Module Import / Usage
VideoTexture rendering but frozen
Help with NPM on simplified scenes?
How to make object from line clicks
Modify point cloud directly in browser
Robotics Simulation - Six DoF
Texture doesn't load correctly
How To Make Curved Surfaces
Shape requirements best fit material and geometry
Wall building in a level-editor
Wall building in a level-editor
How to build a nav viewer (or compass nav)
When loading obj model, why are the coordinates of mesh objects {0, 0, 0}?
Beginner Question: Using a For Loop to add multiple cubes that all animate
Modify Extruded Geometry
Using local images for texture?
How to load a 3D Model?
Move object along the surface of another object
How to create a simple dynamically expanding rectangle geometry
How complex is it to create a chess like grid and add object so positions (perhaps animate)
How to rotate a gltf model in a specific direction
Flying through clouds
Very basic ViewCube
How to change the position of perspective camera vertically?
Circular control used for walkable areas control
How can i make a pyramid shape based on a periodic table
Add marker on mouse click on a 3D cube
Coloring a face in buffer geometry
Is it possible to add a button into the scene?
Possible idea for 'old tutorials don't work' problem?
How would I get these joints simulating correctly?
Which method of text presentation is preferable?

Great idea! :+1:

1 Like

Klaus, you rock! :metal::star_struck::+1:
Great job. Seriously.

2 Likes

Super! Thanks:fire:

Added to the bookshelf!

2 Likes

:slightly_smiling_face: UPDATE January 2019 - new organization after years and download - see original post above. :slightly_smiling_face:

5 Likes

Looks great! :+1:

UPDATE January 2020

:slightly_smiling_face: Year 2019 completed, annual download available. See original post above. :slightly_smiling_face:

4 Likes

@hofk Hello! I was noticing that the individual examples don’t have a date or forum post title listed with them. This would make it easier to find the examples in your index.

Is the code for the index open source somewhere so we can suggest modifications to add such features?

Everything is of course in the license like three.js itself.

I have to keep the workload on this thing to a minimum. See the discussions, links “Discussion about this side” at the bottom of https://hofk.de/main/discourse.threejs/.

With the extended examples I cannot guarantee the actuality.

For example, your example for “HTML-Buttons-Shadow” on https://hofk.de/main/discourse.threejs/2017/Xindex2017.html currently works with Chrome, but not with Firefox.

Also I have to make a choice with the extended examples, it becomes more and more. I won’t post big projects, they are better found elsewhere.

If I find an example that is smaller but not so easy to copy, it will automatically become an extended example. It is possible to specify the links.

I collect the examples myself while reading and copy only the discourse link.

The editing (copy, addition of the HTML page) is done in irregular intervals. Sometimes there are then in the contribution already again other examples. There it becomes with the time sequence again an expenditure.

Sometimes there are contributions from previous years.

The wish list ( see Is it possible to add a button into the scene? ) can possibly be fulfilled by someone else. It is no problem to copy the existing years (there is also a complete download). The HTML pages are simple filled out lists of the elementary template lines above.

Then one can add a link to the completed page. :slightly_smiling_face:

When I was younger (see Module Import / Usage) and a high school teacher, this would have been a nice exercise for a student. :girl: :boy:

So basically what you’re saying is, the code is there, at https://hofk.de/main/discourse.threejs, right?

What I meant is, do you have a code repo? for example on GitHub? This would encourage and make it easier for anyone to suggest code changes to improve the site.

I checked here but don’t see a repo: https://github.com/hofk?tab=repositories

I think your index is valuable, and would like to help propose changes when I find some time.

I’m imagining we can beautify it, organize the thumbnails into a nice grid (with information still visible), make the examples live code so editing code shows live updates, etc.

The individual years as a template copied e.g. for 2020 view-source:https://hofk.de/main/discourse.threejs/2020/index2020.html .

So would you like to put everything that is under https://hofk.de/main/discourse.threejs on GitHub to make it easy to propose changes? Or you’re not interested in that? EDIT: Oh, I just saw your private message after this. I can reply there.

Hello: I am very new at threejs, but I really like it a lot!
I just got the Collection of examples from discourse.threejs.org
I download and open the folders. I just double click on the .html file and some of them work, and some don’t… the DraggingObjects.html on folder 2019
works fine when double click on my computer…
but if I upload it to my server to see it on my web-page… it doesn’t work

I don’t change anything, why is not working on my site: http://songnes.com/g/DraggingObjects.html
and why some of them work, and some don’t

it has to do with this?:

The console shows
ReferenceError: THREE is not defined

You must respect the structure of the folders.

See
script src="…/js/three.min.106.js"
in source code.

Or it is something with the configuration of your server?
See note @amitlzkpa How to add a .png texture to a cube


By the way, have you read this book? https://discoverthreejs.com/ by three.js co-author and moderator looeee

1 Like

Thank you for that, but I guess that was my question…
script src="…/js/three.min.106.js"

when it says “…/” it means from somewhere …
where do I get that file, so I can upload it into my server

http://songnes.com/js/threeJS/three.min.106.js <------ here

when I go to github, I don’t know how to get the actual file…
is there any place I can go and just download it easy…

thank you!

Actually this does not fit into this topic, but since other beginners may have similar problems, here are some explanations. :slightly_smiling_face:


If you download the zip-file from https://hofk.de/main/discourse.threejs/ you will get all necessary things in the folder structure I use.

If you look in the source code of
https://hofk.de/main/discourse.threejs/2019/DraggingObjects/DraggingObjects.html
you see

2020-05-11 11.10.35

“…/” does not mean somewhere, but means “go to the next higher level folder”.

Then it says “js/”, so together “…/js/”

So you will find the file three.min.106.js in the folder js in the next higher level folder.

If you unzip the zip file, you will have many folders with the examples in the folder of the year.

If you look carefully, you will also find the folder js. The short name is often used for JavaScript scripts.

Open the folder and you will see the files I needed for the examples in this particular year.

If you put examples on your server, you either need to create the folder structure like mine, or you change the path to access the files.

In one of your examples I have seen:

2020-05-11 11.34.48

So you have your own structure /js/threeJS/ , which you probably always choose. You should be a bit constant there, otherwise you get mixed up easily.


Sometimes I see examples where the version of three.js is not clear to me, or the author has changed three.js. This is allowed. Then I just copy the file.

Just click on the .js link in the source code and the file will be displayed in the browser. Copy with Ctrl + C and paste it into your own code editor with Ctrl + V .

Now you can name the file correctly and copy it into your appropriate directory.

:slightly_smiling_face:

A statement (GetSources) was added below. 2020-05-11 17.29.29



With the module version it gets a bit more complicated for beginners.

See


Further information can be found at the bottom left corner of
https://hofk.de/main/discourse.threejs/ – Module usage

1 Like

Thank you. I got the first part…

I will read the module explanations!!!

Changes for 2018


Since 2018 the restrictions in the browsers have been tightened. Therefore the example VideoProjection and the underlying fiddle did not work anymore.

A play button was added.


In the example ChangeTextureByTime I had forgotten to copy the textures. Meanwhile the texture UV_Grid_Sm.jpg no longer exists on threejs. org examples textures.

Replaced by uv_grid_opengl.jpg


Please also download and replace the corrected file 2018.zip if necessary.

1 Like