JSFiddle - React, Tailwind, and code Playground

by Shashank D

HTML

<script src="https://stemkoski.github.io/Three.js/js/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);
    camera.position.z = 500;
    scene.add(camera);

		camera.position.set(-600, -1000, -500);
    
        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.SphereGeometry(0.2, 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]);

        }

        
    renderer = new THREE.CanvasRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);

    document.body.appendChild(renderer.domElement);

}

function animate() {

    requestAnimationFrame(animate);
    render();

}

function render() {

    renderer.render(scene, camera);

}