AbhinandShibu at 10:33, 2 October 2022

2022-10-02T10:33:10Z

← Older revision		Revision as of 10:33, 2 October 2022
Line 1:		Line 1:
	Sarmpavi's guide and info: [[Three.js]]		Sarmpavi's guide and info: [[Three.js]]

	==== Setting up your development environment (installation) ====		=== Setting up your development environment (installation) ===
	If you are new to programming with javascript and the size of the project is small (maybe a few interactive graphs), I recommend using the online environment as you can get started with it straight away.		If you are new to programming with javascript and the size of the project is small (maybe a few interactive graphs), I recommend using the online environment as you can get started with it straight away.

Line 10:		Line 10:

	===== Local Installation =====		===== Local Installation =====
	- [https://~~nodejs~~.org/en/~~download~~/ ~~Install Node~~.~~js]~~.		- Follow the guide [https://threejs.org/docs/#manual/en/introduction/Installation here]. It is recommended to use a framework such as React or Vue.

	~~- Create a folder where you would like to store the code for the project.~~		=== Should you use ThreeJS? ===

	~~- Navigate to that folder on the command line, then type "npm install three".~~

	~~- Create a file called index.html and fill it with the following:<syntaxhighlight lang~~=~~"html" line~~=~~"1">~~
	~~<!DOCTYPE html>~~
	~~<html>~~

	~~<head>~~
	~~<title>My Visualisation</title>~~
	~~<meta charset~~=~~"UTF-8" />~~
	~~</head>~~

	~~<body>~~
	~~<div id="app"></div>~~

	~~<script src="src/index.js">~~
	~~</script>~~
	~~</body>~~

	~~</html>~~
	~~</syntaxhighlight>- Create a folder inside your directory called src and make a file called index.js, then fill it with the following:<syntaxhighlight lang="javascript" line="1">~~
	~~import * as THREE from "three";~~
	~~import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";~~
	~~import "./styles.css";~~

	~~let camera, scene, renderer, orbitControls;~~

	~~init();~~
	~~animate();~~

	~~function init() {~~
	~~// Making a scene~~
	~~scene = new THREE.Scene();~~

	~~// Camera~~
	~~camera = new THREE.PerspectiveCamera(~~
	~~40, // Field of view~~
	~~window.innerWidth / window.innerHeight,~~
	1,
	~~2000~~
	);
	~~camera.position.x = 60;~~
	~~camera.position.y = 20;~~
	~~camera.position.z = 50;~~

	~~// Renderer~~
	~~renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });~~
	~~renderer.setPixelRatio(window.devicePixelRatio);~~
	~~renderer.setSize(window.innerWidth, window.innerHeight);~~

	~~// Orbit Controls~~
	~~orbitControls = new OrbitControls(camera, renderer.domElement);~~
	~~orbitControls.autoRotate = true;~~
	~~orbitControls.autoRotateSpeed = 1;~~

	~~// Creating and adding ambient light~~
	~~const ambientLight = new THREE.AmbientLight(0xffffff, 0.4);~~
	~~scene.add(ambientLight);~~

	~~// Creating and adding directional light~~
	~~const directionalLight = new THREE.DirectionalLight(0xffffff, 1);~~
	~~directionalLight.position.set(0, 2, 10);~~
	~~scene.add(directionalLight);~~

	~~// ADD OBJECTS HERE ------~~

	~~// Creating and adding the cube~~
	~~const geometry~~ = ~~new THREE.BoxGeometry(10, 10, 10);~~
	~~const material~~ = ~~new THREE.MeshStandardMaterial({ color: 0x106b54 });~~
	~~const cube~~ = ~~new THREE.Mesh(geometry, material);~~
	~~scene.add(cube);~~

	~~// -----------------------~~

	~~// append the rendered to the dom~~
	~~document.body.appendChild(renderer.domElement);~~

	~~// render the scene~~
	~~renderer.render(scene, camera);~~
	}

	~~function animate() {~~
	~~requestAnimationFrame(animate);~~
	~~orbitControls.update();~~
	~~renderer.render(scene, camera);~~
	}

	~~</syntaxhighlight>~~
	[[Category:Tools]]		[[Category:Tools]]

AbhinandShibu: Adding some installation instructions

2022-10-02T10:16:25Z

Adding some installation instructions

New page

Sarmpavi's guide and info: [[Three.js]]

==== Setting up your development environment (installation) ====
If you are new to programming with javascript and the size of the project is small (maybe a few interactive graphs), I recommend using the online environment as you can get started with it straight away.

===== Online Installation =====
- Go to [https://codesandbox.io code sandbox] and create a free account.

- Fork [https://codesandbox.io/s/three-js-9tq6nj this repo] (the button is on the top right).

===== Local Installation =====
- [https://nodejs.org/en/download/ Install Node.js].

- Create a folder where you would like to store the code for the project.

- Navigate to that folder on the command line, then type "npm install three".

- Create a file called index.html and fill it with the following:<syntaxhighlight lang="html" line="1">
<!DOCTYPE html>
<html>

<head>
<title>My Visualisation</title>
<meta charset="UTF-8" />
</head>

<body>
<div id="app"></div>

<script src="src/index.js">
</script>
</body>

</html>
</syntaxhighlight>- Create a folder inside your directory called src and make a file called index.js, then fill it with the following:<syntaxhighlight lang="javascript" line="1">
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import "./styles.css";

let camera, scene, renderer, orbitControls;

init();
animate();

function init() {
// Making a scene
scene = new THREE.Scene();

// Camera
camera = new THREE.PerspectiveCamera(
40, // Field of view
window.innerWidth / window.innerHeight,
1,
2000
);
camera.position.x = 60;
camera.position.y = 20;
camera.position.z = 50;

// Renderer
renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);

// Orbit Controls
orbitControls = new OrbitControls(camera, renderer.domElement);
orbitControls.autoRotate = true;
orbitControls.autoRotateSpeed = 1;

// Creating and adding ambient light
const ambientLight = new THREE.AmbientLight(0xffffff, 0.4);
scene.add(ambientLight);

// Creating and adding directional light
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(0, 2, 10);
scene.add(directionalLight);

// ADD OBJECTS HERE ------

// Creating and adding the cube
const geometry = new THREE.BoxGeometry(10, 10, 10);
const material = new THREE.MeshStandardMaterial({ color: 0x106b54 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// -----------------------

// append the rendered to the dom
document.body.appendChild(renderer.domElement);

// render the scene
renderer.render(scene, camera);
}

function animate() {
requestAnimationFrame(animate);
orbitControls.update();
renderer.render(scene, camera);
}

</syntaxhighlight>
[[Category:Tools]]

ThreeJs - Revision history

AbhinandShibu at 10:33, 2 October 2022

AbhinandShibu: Adding some installation instructions