JSFiddle - React, Tailwind, and code Playground
by ismacadenas
JavaScript
import * as THREE from "https://threejs.org/build/three.module.js";
import { OrbitControls } from "https://threejs.org/examples/jsm/controls/OrbitControls.js";
import { Line2 } from 'https://threejs.org/examples/jsm/lines/Line2.js';
import { LineMaterial } from 'https://threejs.org/examples/jsm/lines/LineMaterial.js';
import { LineGeometry } from 'https://threejs.org/examples/jsm/lines/LineGeometry.js';
import { GeometryUtils } from 'https://threejs.org/examples/jsm/utils/GeometryUtils.js';
let line, renderer, scene, camera, camera2, controls;
let lineEX;
let matLine, matLineBasic, matLineDashed;
let stats;
let gui;
// viewport
let insetWidth;
let insetHeight;
init();
animate();
function init() {
// renderer
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setPixelRatio( window.devicePixelRatio );
document.body.appendChild( renderer.domElement );
// scene
scene = new THREE.Scene();
// camera
camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.set( 20, 20, 20 );
// controls
controls = new OrbitControls( camera, renderer.domElement );
// ambient
scene.add( new THREE.AmbientLight( 0x222222 ) );
// light
var light = new THREE.DirectionalLight( 0xffffff, 1 );
light.position.set( 20,20, 0 );
scene.add( light );
// axes
scene.add( new THREE.AxesHelper( 10 ) );
// Line2 ( LineGeometry, LineMaterial )
const geometr = new LineGeometry();
const pointsPR = [];
const colors = [];
pointsPR.push(-100, 0, 0);
pointsPR.push(0, 0, 0);
pointsPR.push(100, 0, 0);
colors.push(new THREE.Color('red'));
colors.push(new THREE.Color('blue'));
colors.push(new THREE.Color('green'));
...