JSFiddle - React, Tailwind, and code Playground

by realhunts

HTML

<script src="http://threejs.org/build/three.min.js"></script>
<script src="http://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babylonjs/2.3.0/babylon.js"></script>
<canvas id="main"></canvas>

CSS

#main{
  display: none;
}

JavaScript

// a basic three.js scene

 var canvas = document.getElementById("main");
var engine = new BABYLON.Engine(canvas);
var scene = new BABYLON.Scene(engine);

var light = new BABYLON.PointLight("light", new BABYLON.Vector3(10,10,0),scene);

var box = BABYLON.MeshBuilder.CreateSphere("sphere", {diameter: 2, segments: 32}, scene);
console.log(box)

var container, renderer, scene, camera, controls;

init();
animate();

function init() {

    // renderer
    renderer = new THREE.WebGLRenderer({
        antialias: false
    });
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setClearColor(0xccccff);
    container = document.createElement('div');
    document.body.appendChild(container);
    container.appendChild(renderer.domElement);

    // scene
    scene = new THREE.Scene();

    // camera
    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
    camera.position.set(0, 200, 800);
    camera.lookAt(scene.position);

    // (camera) controls
    // mouse controls: left button to rotate, 
    //    mouse wheel to zoom, right button to pan
    controls = new THREE.OrbitControls(camera, renderer.domElement);

    // light    
    var light = new THREE.PointLight(0xffffff);
    light.position.set(100, 250, 250);
    scene.add(light);

    // mesh
   var geom = new THREE.Geometry(); 
var positions = box.getVerticesData(BABYLON.VertexBuffer.PositionKind);
	var norm = box.getVerticesData(BABYLON.VertexBuffer.NormalKind);
	var numberOfVertices = positions.length/3;	
	for(var i = 0; i<numberOfVertices; i++) {
    geom.vertices.push(new THREE.Vector3(positions[i*3], positions[i*3+1], positions[i*3+2]));
	}
  
  var numNorm = norm.length/2
for(var j = 0; j<numNorm.length; j++){
geom.faces.push(new THREE.Face3(norm[i*3], norm[i*3+1], norm[i*3+2]));
geom.computeFaceNormals();
}

console.log(box.getIndices() )
var object = new THREE.Mesh( geom );
object.scale.set(40, 40, 40)
scene.add(object);

console.log(object)
   ...