JSFiddle - React, Tailwind, and code Playground
by Aaron Watters
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r83/three.js"></script>
<script src="https://rawgit.com/AaronWatters/contourist/master/misc/morph_triangles.js"></script>
<script src="https://rawgit.com/simonsfoundation/jp_gene_viz/master/jp_gene_viz/OrbitControls.js"></script>
JavaScript
var camera, scene, renderer;
var sequence, objects;
var orbitControls;
var clock = new THREE.Clock();
var mesh;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
init();
//animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 15000 );
camera.position.z = -3;
camera.position.y = -3;
camera.position.x = -3;
camera.lookAt(new THREE.Vector3(0, 0, 0));
scene = new THREE.Scene();
//scene.fog = new THREE.Fog( 0x000000, 1, 15000 );
var light = new THREE.PointLight( 0xff2200 );
light.position.set( 100, 100, 100 );
scene.add( light );
var light = new THREE.PointLight( 0x0000ff );
light.position.set( 100, -100, 100 );
scene.add( light );
var light = new THREE.PointLight( 0xffff00 );
light.position.set( 100, -100, -100 );
scene.add( light );
var light = new THREE.PointLight( 0x00ffff );
light.position.set( -100, -100, -100 );
scene.add( light );
var light = new THREE.AmbientLight( 0x111111 );
scene.add( light );
var material = new THREE.MeshLambertMaterial( { color: 0xffffff, morphTargets: true } );
//var material = new THREE.MeshNormalMaterial( { morphTargest: true });
material.side = THREE.DoubleSide;
// patch the normals
debugger;
var duration = 30.0;
duration = 5.0;
//sequence = THREE.morph_triangles(triangle_data, scene, duration, material);
var load_success = function (data, seq) {
sequence = seq;
renderer = new THREE.WebGLRenderer();
renderer.setClearColor( 0x222222 );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.sortObjects = false;
container.appendChild( renderer.domElement...