JSFiddle - React, Tailwind, and code Playground

by grano

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/three.js/r69/three.js"></script>

JavaScript

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );

var renderer = new THREE.WebGLRenderer();
renderer.setClearColor( new THREE.Color(0xffffff) );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );



// add points in an arbitrary shape
var geometry = new THREE.Geometry();
geometry.vertices = [ new THREE.Vector3(1,1,0), new THREE.Vector3(1,0,0), new THREE.Vector3(0,0,0), new THREE.Vector3(-1,0,0), new THREE.Vector3(-1,-1,0) ]
for(var i=0; i<geometry.vertices.length; i++) {
if (i===3) {
      geometry.colors[i] = new THREE.Color(255, 0, 0);   
} else {
      geometry.colors[i] = new THREE.Color(0, 0, 0);   
}

}
var material = new THREE.LineBasicMaterial( { linewidth: 10, color: 0xffffff, vertexColors: THREE.VertexColors, shading: THREE.FlatShading } );

// I tried this as well, but no dice
// var material = new THREE.MeshBasicMaterial( { wireframe: true, wireframeLinewidth: 10, color: 0xffffff, vertexColors: THREE.VertexColors, smoothing: THREE.FlatShading } );





var object = new THREE.Line( geometry, material );
scene.add( object );

camera.position.z = 5;

var render = function () {
    requestAnimationFrame( render );

    object.rotation.x += 0.01;
    object.rotation.y += 0.01;

    renderer.render(scene, camera);
};

requestAnimationFrame(render)