JSFiddle - React, Tailwind, and code Playground

by Shashank D

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r97/three.js"></script>

JavaScript

var camera, scene, renderer, geometry, material, mesh;

init();
animate();

function init() {

    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
    scene.add(camera);

    
        var geometry0 = new THREE.Geometry();

        geometry0.vertices = [
            {
                "x": -600.18847386,
                "y": -989.403640835,
                "z": -212.355555096
            },
            {
                "x": -1399.55385418,
                "y": -1614.19038931,
                "z": -669.71891056
            },
            {
                "x": -1447.77539674,
                "y": -1611.02653965,
                "z": -611.240468084
            }
        ].map(function (pos) {
            return new THREE.Vector3(pos.x, pos.y, pos.z);
        });
        
        var spheres = [];
        for (var i=0 ; i<geometry0.vertices.length ; i++) {


            var sphereGeometry = new THREE.SphereBufferGeometry(20, 10, 10);
            var sphereMaterial = new THREE.MeshBasicMaterial({color: 0xff0000, opacity: 1});
            spheres[i] = new THREE.Mesh(sphereGeometry, sphereMaterial);
            spheres[i].position.set(geometry0.vertices[i].x,
                geometry0.vertices[i].y,
                geometry0.vertices[i].z);
            scene.add(spheres[i]);

        }

  var box = new THREE.Box3().setFromObject(controller.pivot);
  box.getCenter(controller.pivot.position); 
  
    renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);

    document.body.appendChild(renderer.domElement);

}

function animate() {

    requestAnimationFrame(animate);
    render();

}

function render() {

    renderer.render(scene, camera);

}