JSFiddle - React, Tailwind, and code Playground

by navinleon

HTML

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

CSS

body {
	background-color: #000;
	margin: 0px;
	overflow: hidden;
}

JavaScript

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

const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

const geometry = new THREE.CubeGeometry()
console.log('geometry',geometry);

for (let i = 0; i < geometry.vertices.length; i+=1) {
	let color
	if (i % 2 === 0) {
		color =  new THREE.Color(0, 0, 0)
	} else {
		color =  new THREE.Color(0.9843, 0.5529, 0.03921)
	}
	geometry.colors.push(color)
}

const edgesGeometry = new THREE.EdgesGeometry(geometry);
const edgesMaterial = new THREE.LineBasicMaterial({
	color: 0xffffff,
	lineWidth: 4,
	vertexColors: true,
});

// This work partially
const cube = new THREE.LineSegments(geometry, edgesMaterial)
// This doesn't render anything
// const cube = new THREE.LineSegments(edgesGeometry, edgesMaterial)

scene.add( cube );
camera.position.z = 7;

const animate = function (time) {
	requestAnimationFrame( animate );
	cube.rotation.x = THREE.MathUtils.degToRad(16)
	cube.rotation.y = THREE.MathUtils.degToRad(45)
	cube.rotation.z = THREE.MathUtils.degToRad(15)
	renderer.render( scene, camera );
};

animate();