JSFiddle - React, Tailwind, and code Playground
HTML
<canvas height="400" width="400" id="canvas"></canvas>
JavaScript
import * as THREE from 'https://unpkg.com/three/build/three.module.js'
import {
LineSegments2
} from "https://unpkg.com/three/examples/jsm/lines/LineSegments2.js";
import {
LineSegmentsGeometry
} from "https://unpkg.com/three/examples/jsm/lines/LineSegmentsGeometry.js";
import {
LineMaterial
} from "https://unpkg.com/three/examples/jsm/lines/LineMaterial.js";
let camera, scene, renderer;
let line, mouse, raycaster = new THREE.Raycaster();
let canvas = document.getElementById('canvas');
let enableClick = false;
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 10);
camera.position.z = 10;
scene = new THREE.Scene();
renderer = new THREE.WebGLRenderer({
antialias: true,
canvas: canvas
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const lineGeometry = new LineSegmentsGeometry();
const color = new THREE.Color(0x277cb2);
const positions = [
new THREE.Vector3(0, 0, 0),
new THREE.Vector3(5, 0, 0),
new THREE.Vector3(0, 0, 0),
new THREE.Vector3(-5, 0, 0),
new THREE.Vector3(0, 0, 0),
new THREE.Vector3(5, 5, 5)
];
const _positions = [
0, 0, 0,
5, 0, 0,
0, 0, 0,
-5, -5, 0,
0, 0, 0,
5, 5, 0,
]
const colors = positions.map(() => [color.r, color.g, color.b]).reduce((accumulator, currentValue) => {
accumulator = accumulator.concat(currentValue)
return accumulator;
}, []);
const matLine = new LineMaterial({
color: 0x277cb2,
vertexColors: true,
dashed: false,
linewidth: 5,
});
lineGeometry.setPositions(_positions);
lineGeometry.setColors(colors);
line = new LineSegments2(lineGeometry, matLine);
scene.add(line)
matLine.resolution.set(
renderer.domElement.offsetWidth,
renderer.domElement.offsetHeight
);
canvas.addEventListener('click', function(event) {
enableClick = true;
let canvasBounds =...