JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://rawgit.com/Coburn37/three.js/devBuild/build/three.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/dev/examples/js/controls/TrackballControls.js"></script>
<canvas id="can" width="800" height="600"></canvas>
JavaScript
//.
//GOTO LINE 73 FOR THE PROBLEM
var getRenderingObjects = function(jCanvas){
var ret = {};
ret.renderer = new THREE.WebGLRenderer({canvas : jCanvas[0]});
ret.renderer.setSize(jCanvas.width(), jCanvas.height());
ret.cam = new THREE.PerspectiveCamera(45, jCanvas.width() / jCanvas.height(), 0.1, 100);
ret.cam.position.set(0,2,6);
ret.cam.quaternion.multiply(new THREE.Quaternion().setFromAxisAngle( new THREE.Vector3( 1, 0, 0 ), -Math.PI/8 ));
ret.camControls = new THREE.TrackballControls(ret.cam, ret.renderer.domElement);
ret.camControls.target.set(0, 0, 0);
return ret;
};
var defaultScene = function(objs){
objs.scene = new THREE.Scene();
var light = new THREE.HemisphereLight( 0xffffbb, 0x080820, 1 );
objs.scene.add( light );
var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
directionalLight.position.set( -2, 1, -1 );
objs.scene.add( directionalLight );
var lastTime = Date.now();
objs.renderFunc = function() {
requestAnimationFrame( this.renderFunc.bind(this) );
var delta = Date.now() - lastTime;
this.camControls.update(delta);
this.renderer.render( this.scene, this.cam );
};
return objs;
};
var objs = getRenderingObjects($("#can"));
defaultScene(objs);
//== TEST CODE ==
var geo = new THREE.BufferGeometry();
//Generate points on circle
var points = [];
for(i=0; i<20; i++)
{
points.push(new THREE.Vector3(
Math.sin(i/20*2*Math.PI),
Math.cos(i/20*2*Math.PI),
0));
}
var posArr = [];
for(i=0; i<points.length; i++)
{
posArr.push(points[i].x, points[i].y, points[i].z);
}
posArr = new window.Float32Array(posArr);
geo.addAttribute("position", new THREE.BufferAttribute( posArr, 3 ));
//index attr - for TriangleStripDrawMode
var idxArr = [];
for(i=0; i<points.length; i++)
{
var i2 = Math.floor(i / 2);
var idx = i % 2 === 0 ? i2 : points.length-1-i2;
idxArr.push(idx);
}
//Changing Uint16Array to Uint8Array will break the example and give a "GL ERROR...