Difference between revisions of "ThreeJs"

From ImpVis Wiki
Jump to navigation Jump to search
(Adding some installation instructions)
 
m
 
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]]

Latest revision as of 10:33, 2 October 2022

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 code sandbox and create a free account.

- Fork this repo (the button is on the top right).

Local Installation

- Follow the guide here. It is recommended to use a framework such as React or Vue.

Should you use ThreeJS?

Retrieved from ‘https://wiki.impvis.co.uk/index.php?title=ThreeJs&oldid=1738’