JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://github.com/mrdoob/three.js/raw/master/build/Three.js"></script>
<script src="https://github.com/mrdoob/three.js/raw/master/examples/js/RequestAnimationFrame.js"></script>
<script src="https://github.com/mrdoob/three.js/raw/master/examples/js/Stats.js"></script>
<script src="https://github.com/mrdoob/three.js/raw/master/examples/js/Detector.js"></script>
CSS
body {
margin: 0px;
padding: 0px;
overflow: hidden;
}
JavaScript
// Shared objects we'll instantiate later.
var container, camera, scene, renderer, origin = new THREE.Vector3(0,0,0);
// Initialise
init();
// Then animate the scene.
animate();
function init() {
// Create a new scene
scene = new THREE.Scene();
// Length of the line that we want to draw
var axisLength = 350;
// Create a new material, of type LineBasicMaterial with a colour of red
var material = new THREE.LineBasicMaterial({color: 0xff0000});
// Create an empty geometry object
var geometry = new THREE.Geometry();
// Add two vertices to the geometry, one for each end of the line
geometry.vertices.push(
// From x = -axisLength
new THREE.Vertex(new THREE.Vector3(-axisLength, 0, 0)),
// To x = axisLength
new THREE.Vertex(new THREE.Vector3(axisLength, 0, 0))
);
// Create a new line, with the given geometry and material.
// Think of a line as a special type of Mesh for now.
var line = new THREE.Line(geometry, material);
// Add the line to the scene.
scene.add(line);
// ------
// Repeat for the Y-axis, of green from y = -axisLength to y = axisLength
material = new THREE.LineBasicMaterial({color: 0x00ff00});
geometry = new THREE.Geometry();
geometry.vertices.push(
new THREE.Vertex(new THREE.Vector3(0, -axisLength, 0)),
new THREE.Vertex(new THREE.Vector3(0, axisLength, 0))
);
line = new THREE.Line(geometry, material);
scene.add(line);
// ------
// Repeat for the Z-axis, of blue from z = -axisLength to z = axisLength
material = new THREE.LineBasicMaterial({color: 0x0000ff});
geometry = new THREE.Geometry();
geometry.vertices.push(
new THREE.Vertex(new THREE.Vector3(0, 0, -axisLength)),
new THREE.Vertex(new THREE.Vector3(0, 0, axisLength))
);
line = new THREE.Line(geometry, material);
scene.add(line);
// Create a new camera, don't worry about...