3d Time Line with 3js

I would like to create something like these

Just to inform you my standard of knowledge:
I have basic knowledge of HTML, JS, … Have done VRML many years ago.
Used to do FORTRAN programming for Engineering applications.

Downloaded 3js from https://threejsfundamentals.org/threejs/lessons/threejs-setup.html and going through the examples.

It looks like these timelines referred earlier can be created with 3js.
I would appreciate if you can point me in the right direction
Thank you

The second one is definitely created with three.js. You can see the library version in the browser console.

THREE.WebGLRenderer 71

You can maybe start with the following official example and enhance it step by step to something similar like “The Museum of the World”.


In any event, you question is very broad and it won’t happen that somebody provides you a complete manual for developing such an app. It might be better to break down your task into smaller ones and then try to find respective solutions. For example you can independently implement the particles effects, the controls and the UI.

Thank you @Mugen87. I appreciate .
I have already started to break it down into smaller tasks. Not sure what you mean by THREE.WebGLRenderer 71. I will search the web to see if I can find more information on this.

Thank you @Mugen87. Found it https://threejs.org/docs/#api/en/renderers/WebGLRenderer

Yep, it just means that the app was developed with Revision 71 of three.js. It’s a default log of the WebGLRenderer.

I had few health issues. Hence I could not carry on with the project I started. Now I am trying to continue from where I left.
I am trying to make the example given by @Mugen87 work locally on my laptop. I have already downloaded three.js and not sure how to handle these lines found in the example

import * as THREE from ‘…/build/three.module.js’;
import Stats from ‘./jsm/libs/stats.module.js’;


I found this https://discoverthreejs.com/book/introduction/get-threejs/ and it tells me about three.module.js

Now I need help with this
import Stats from ‘./jsm/libs/stats.module.js’;

Download the three npm package and then write your imports like so:

import * as THREE from 'three';

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

stats.js is a separate npm package. You can then use rollup as your bundler.

BTW: Instead of import every class into the THREE namespace, you can also write so called named imports. So you only import the classes you are actually need in your project. It could look like so:

import {
} from 'three';

I would like to know how to read coordinates of points from a text file and plot them. I could not find this information on from three.js site.
This text file contains three columns
x y z
10. 30 40.

I found this http://bl.ocks.org/phil-pedruco/9852362
Hopefully this will help me.

I am unable to figure out why this is not working. Examples that came with three.js are working fine. Thank you

Source file is in …\threejs\Thiru
three.js is in …\threejs\three.js-master\three.js-master

var renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement);
			var camera = new THREE.PerspectiveCamera(45, Window.innerWidth / window.innerHeight, 1, 1000);
			camera.position.y = -400;
			camera.position.z = 400;
			camera.position.x = .70;
			var scene = new THREE.Scene();
			var plane = new THREE.Mesh(new THREE.PlaneGeometry(300,300, new THREE.MeshNormalMaterial(();
			renderer.render(scene, camera);

I have manged to create a plane and a cube.!!!