JSFiddle - React, Tailwind, and code Playground

by jsfiddle_lyke_be

HTML

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">

	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
	<script type="text/javascript" src="https://test.lyke.be/data.js"></script>

</head>

<body>
	<div id='canvas'></div>
</body>

</html>

CSS

body {    
    margin: 0 !important;
    padding: 0 !important;
}

JavaScript

var animationSpeed = 0.0035
var cameraRotateSpeed = Math.PI * 0.002
var cnt = 1
var dirLight0
var geom
var geomXYZ
var hemisphereLight0
var incr = false
var materialPhong
var rotateObject = true
var scene, renderer, camera

setupScene()
init();

function setupScene() {
	scene = new THREE.Scene();
	scene.background = new THREE.Color(0xababab);

	renderer = new THREE.WebGLRenderer({ antialias: true });
	renderer.setSize(window.innerWidth - 0, window.innerHeight - 0);
	renderer.setPixelRatio(window.devicePixelRatio);
	renderer.shadowMap.enabled = true;
	renderer.shadowMap.type = THREE.PCFSoftShadowMap;

	document.body.appendChild(renderer.domElement);
}

function init() {

	var completeSceneAfterLoading=function(){
		
		materialPhong = new THREE.MeshPhongMaterial({flatShading:false});
		materialPhong.color.setHex(0x0d0d0d);
		materialPhong.emissive.setHex(0x0f0f0f);
		materialPhong.emissiveIntensity = 0.75;
		materialPhong.specular.setHex(0x070707);
		materialPhong.shininess = 30
		materialPhong.side = THREE.DoubleSide
		materialPhong.needsUpdate = true

		mesh = new THREE.Mesh(geom);
		mesh.material = materialPhong;

		mesh.receiveShadow = true;
		mesh.castShadow = true;

		scene.add(mesh);

		camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 1, 10000);
		camera.position.x = 0;
		camera.position.y = 3;
		camera.position.z = 6;
		camera.lookAt(mesh.position);



		dirLight0 = new THREE.DirectionalLight(0xddddddd, 2.5);
		dirLight0.position.x = 1;
		dirLight0.position.y = 4;
		dirLight0.position.z = 6;
		dirLight0.castShadow = false;
		scene.add(dirLight0);
		
		animate()
	}

	geom = new THREE.BufferGeometry()
	geom.setFromPoints(pts)
	geom.computeVertexNormals()
	geom.computeFaceNormals();
	geom.rotateX(-Math.PI / 2);
	
	completeSceneAfterLoading()

};

function animate() {

	requestAnimationFrame(animate);
	renderer.render(scene, camera);

	if (rotateObject) {
		mesh.rotation.y += animationSpeed;
	}
}