Three.js - Revision history

SarmpaviUthayakumar: Final edit

2022-08-22T00:37:02Z

Final edit

← Older revision		Revision as of 00:37, 22 August 2022
Line 16:		Line 16:

	Once installed, import it into your JavaScript file:		Once installed, import it into your JavaScript file:
			[[File:Import threejs.png\|thumb\|Import three.js]]
	<code>import * as THREE from "../node_modules/three/build/three.module.js"</code>		<code>import * as THREE from "../node_modules/three/build/three.module.js"</code>
			'''Orbit Controls:'''

	'''Orbit Controls:'''		'''Orbit Controls:'''

	The Orbit Controls package must also be imported – this allows you to interact with (e.g. rotate, pan, zoom in/out) your 3D object. To import this into your JavaScript file:		The Orbit Controls package must also be imported – this allows you to interact with (e.g. rotate, pan, zoom in/out) your 3D object. To import this into your JavaScript file:
			[[File:Import OrbitControls.png\|thumb\|Import OrbitControls]]
	<code>import {OrbitControls} from "../vendor_mods/three/examples/jsm/controls/OrbitControls.js"</code>		<code>import {OrbitControls} from "../vendor_mods/three/examples/jsm/controls/OrbitControls.js"</code>

Line 152:		Line 153:

	where the input ‘1’ specifies the size of the coordinates axes.		where the input ‘1’ specifies the size of the coordinates axes.
			[[File:Content screenshot part 1.png\|thumb\|Content screenshot part 1]]
			[[File:Content screenshot part 2.png\|thumb\|Content screenshot part 2]]
	Finally, add the axes to the scene:		Finally, add the axes to the scene:
			[[File:Content screenshot part 3.png\|thumb\|Content screenshot part 3]]
			[[File:Content screenshot part 4.png\|thumb\|Content screenshot part 4]]
	<code>scene.add(axes)</code>		<code>scene.add(axes)</code>

	'''Screenshot of three.js visualisation and content (~~pdf~~):'''		'''Screenshot of three.js visualisation and content (see images):'''


	'''Things to work on in future:'''		'''Things to work on in future:'''
Line 164:		Line 166:
	* Integration with the ImpVis template: Found it difficult to use import three.js into the template		* Integration with the ImpVis template: Found it difficult to use import three.js into the template
	* Removing the previous vectors each time the user wants to define and interact with a new state		* Removing the previous vectors each time the user wants to define and interact with a new state
	* Text on sphere to show the basis states (Pauli-x, Pauli-y and Pauli-z eigenstates)		* [[File:Template screenshot.png\|thumb\|Template screenshot]]Text on sphere to show the basis states (Pauli-x, Pauli-y and Pauli-z eigenstates)
	* Explanations (see pdf)		* Explanations (see pdf)

SarmpaviUthayakumar: edit 2

2022-08-22T00:21:04Z

edit 2

Show changes

SarmpaviUthayakumar at 23:59, 21 August 2022

2022-08-21T23:59:44Z

← Older revision		Revision as of 23:59, 21 August 2022
Line 12:		Line 12:

	three.js can be installed by navigating to your project folder in your terminal and then typing:		three.js can be installed by navigating to your project folder in your terminal and then typing:
			<syntaxhighlight lang="html" line>
			npm install three
			</syntaxhighlight>

	[[Category:Records]]		[[Category:Records]]
	[[Category:Summer 2022]]		[[Category:Summer 2022]]

SarmpaviUthayakumar: edit 1

2022-08-21T23:58:37Z

edit 1

← Older revision		Revision as of 23:58, 21 August 2022
Line 1:		Line 1:
			'''Author - Sarmpavi'''

			I developed an interactive visualisation using three.js on quantum gates and their effects on quantum states. This visualisation is intended for 3<sup>rd</sup> and 4<sup>th</sup> undergraduate Physics students taking the Quantum Information module. I also created a design template (with the learning outcomes) which can be found on the Miro page under Bloch Sphere. As I developed this visualisation, I documented what I had learnt about three.js and how it can be used to create visualisations. Below is a summary of what I have learnt.

	'''Introduction'''		'''Introduction'''

	~~Author - Sarmpavi~~		This guidance page provides some basic information on how to use three.js including example code (which can be found on ImpVis’ GitHub) and some useful resources to learn and gain more knowledge about the package. Please note that the example code has been written by myself with only a few weeks of three.js experience – a lot of improvements can be made (some of which I have listed below) but I hope this will be somewhat useful for any beginners who are reading this. This page also assumes that you have some basic JavaScript/HTML/CSS knowledge.

	This page provides some basic information on how to use ~~Three~~.js including example code and some useful resources to learn and gain more knowledge about the package. Please note that the example code has been written by myself with only a few weeks of ~~Three~~.js experience – a lot of improvements can be made but I hope this will be somewhat useful for any beginners who are reading this. This page also assumes that you have some basic JavaScript/HTML/CSS knowledge.

	~~Three~~.js is a library which allows you to create 3D content and is a useful tool when developing interactive visualisations.		three.js is a library which allows you to create 3D content and is a useful tool when developing interactive visualisations.

	'''Installation:'''		'''Installation:'''

	~~Three~~.js can be installed by navigating to your project folder in your terminal and then typing: ~~npm install three~~		three.js can be installed by navigating to your project folder in your terminal and then typing:

	~~Once installed, import it into your JavaScript file: import * as THREE from "../node_modules/three/build/three.module.js"; (insert image)~~

	~~'''Orbit controls:'''~~

	The Orbit controls package must also be imported – this allows you to interact with (e.g. rotate, pan, zoom in/out) your 3D object. To import this into your JavaScript file - import {OrbitControls} from "../vendor_mods/three/examples/jsm/controls/OrbitControls.js"; (pic)

	~~'''Scene'''~~

	~~First, we construct the ‘Scene’ which can be thought of as the canvas for the 3D object. To create the Scene – const scene = new THREE.Scene()~~

	~~'''Camera'''~~

	The camera controls how the user views the 3D object on the scene. There are lots of different types of cameras but generally the ‘PerspectiveCamera’ is used where objects further away appear smaller just how the human eye sees things.

	~~const camera = new THREE.PerspectiveCamera()~~

	PerspectiveCamera takes several variables in which one can define the type of lens (wide-angle, telephoto) and the aspect ratio. If we want the scene to cover the entire page, the aspect ratio is window.innerWidth/window.innerHeight.

	~~The position of the camera can be changed by setting the x, y and z positions:~~

	~~camera.position.x = (enter float)~~

	~~camera.position.y = (enter float)~~

	~~camera.position.z = (enter float)~~

	~~We must finally add the camera to the Scene: scene.add(camera)~~

	~~'''Mesh'''~~

	~~To add the 3D object, we use ‘Mesh’. The Mesh is made up of two variables: the geometry (the shape of the object) and the material (how the geometry looks). Let us take the example of a sphere.~~




	~~Finally add the object to the Scene:~~






	~~Link to example code:~~


	~~Screenshot of Three.js visualisation:~~


	~~Things to work on in future:~~

	~~- Integration with the ImpVis template: Found it difficult to use import Three.js into the template~~
	[[Category:Records]]		[[Category:Records]]
	[[Category:Summer 2022]]		[[Category:Summer 2022]]

SarmpaviUthayakumar: Added summer 2022 category

2022-07-26T01:03:11Z

Added summer 2022 category

← Older revision		Revision as of 01:03, 26 July 2022
Line 63:		Line 63:
	- Integration with the ImpVis template: Found it difficult to use import Three.js into the template		- Integration with the ImpVis template: Found it difficult to use import Three.js into the template
	[[Category:Records]]		[[Category:Records]]
			[[Category:Summer 2022]]

SarmpaviUthayakumar: Three.js summer project review

2022-07-26T00:59:29Z

Three.js summer project review

New page

'''Introduction'''

Author - Sarmpavi

This page provides some basic information on how to use Three.js including example code and some useful resources to learn and gain more knowledge about the package. Please note that the example code has been written by myself with only a few weeks of Three.js experience – a lot of improvements can be made but I hope this will be somewhat useful for any beginners who are reading this. This page also assumes that you have some basic JavaScript/HTML/CSS knowledge.

Three.js is a library which allows you to create 3D content and is a useful tool when developing interactive visualisations.

'''Installation:'''

Three.js can be installed by navigating to your project folder in your terminal and then typing: npm install three

Once installed, import it into your JavaScript file: import * as THREE from "../node_modules/three/build/three.module.js"; (insert image)

'''Orbit controls:'''

The Orbit controls package must also be imported – this allows you to interact with (e.g. rotate, pan, zoom in/out) your 3D object. To import this into your JavaScript file - import {OrbitControls} from "../vendor_mods/three/examples/jsm/controls/OrbitControls.js"; (pic)

'''Scene'''

First, we construct the ‘Scene’ which can be thought of as the canvas for the 3D object. To create the Scene – const scene = new THREE.Scene()

'''Camera'''

The camera controls how the user views the 3D object on the scene. There are lots of different types of cameras but generally the ‘PerspectiveCamera’ is used where objects further away appear smaller just how the human eye sees things.

const camera = new THREE.PerspectiveCamera()

PerspectiveCamera takes several variables in which one can define the type of lens (wide-angle, telephoto) and the aspect ratio. If we want the scene to cover the entire page, the aspect ratio is window.innerWidth/window.innerHeight.

The position of the camera can be changed by setting the x, y and z positions:

camera.position.x = (enter float)

camera.position.y = (enter float)

camera.position.z = (enter float)

We must finally add the camera to the Scene: scene.add(camera)

'''Mesh'''

To add the 3D object, we use ‘Mesh’. The Mesh is made up of two variables: the geometry (the shape of the object) and the material (how the geometry looks). Let us take the example of a sphere.

Finally add the object to the Scene:

Link to example code:

Screenshot of Three.js visualisation:

Things to work on in future:

- Integration with the ImpVis template: Found it difficult to use import Three.js into the template
[[Category:Records]]