JSFiddle - React, Tailwind, and code Playground

by jonjieviduya

HTML

<canvas class="canvas"></canvas>

CSS

.canvas { width: 65px; height: 76px; }

JavaScript

import * as THREE from 'https://threejsfundamentals.org/threejs/resources/threejs/r127/build/three.module.js'

const canvas = document.querySelector('.canvas')


const renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
renderer.setSize( window.innerWidth, window.innerHeight );

const camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 500 );
camera.position.set( 0, 0, 100 );
camera.lookAt( 0, 0, 0 );

const scene = new THREE.Scene();
scene.background = new THREE.Color(0xe0e0e0)

const material = new THREE.LineBasicMaterial( { color: 0xff0000 } );

const points1 = [];
const points2 = [];
points1.push( new THREE.Vector3(-10, 0, 0 ) );
points1.push( new THREE.Vector3( 0, 10, 0 ) );

points2.push( new THREE.Vector3(10, 0, 0 ) );
points2.push( new THREE.Vector3( 0, 10, 0 ) );

let lineGeometry = new THREE.BufferGeometry().setFromPoints(points1);
let lineGeometry2 = new THREE.BufferGeometry().setFromPoints(points2);


const line1 = new THREE.Line( lineGeometry, material );
const line2 = new THREE.Line( lineGeometry2, material );

line2.position.x = -10

scene.add( line1, line2 );
renderer.render( scene, camera );