Threejs - Template ES5

by black strings

HTML

<script src="https://rawgit.com/mrdoob/three.js/dev/build/three.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/controls/OrbitControls.js"></script>
<script src="https://stemkoski.github.io/Three.js/js/Stats.js"></script>
<div id="container1">

</div>

CSS

body {
  margin:0;
}

JavaScript

var objects = []; 
var scene = new THREE.Scene();
var width = window.innerWidth;
var height = window.innerHeight;

var renderer = new THREE.WebGLRenderer();
renderer.setSize( width, height );
renderer.setClearColor( 0xcccccc, 1 ); 
document.body.appendChild( renderer.domElement );

var camera = new THREE.PerspectiveCamera( 35, width/height, 0.1, 1000 );
scene.add(camera);
controls = new THREE.OrbitControls(camera, renderer.domElement);
setToFullOrbit(controls)
camera.position.copy(new THREE.Vector3(fti(5), fti(5), fti(5)) );
// fix first frame render issue going invisible
camera.lookAt(new THREE.Vector3(0,0,0));

var axesHelper = new THREE.AxesHelper();
scene.add(axesHelper);

var grid = new THREE.GridHelper(fti(12), 12);
scene.add(grid);

// make sure you use https vs http, as the https lets you do bypass cors sometimes
var texture = new THREE.TextureLoader().load('https://threejs.org/examples/textures/UV_Grid_Sm.jpg');
var mat = new THREE.MeshBasicMaterial({map: texture});

// ----- playground starts here ----------------- //
//var p1 = createPlane(5, new THREE.MeshBasicMaterial({color: 0xffffff, map: texture}));

var stats = new Stats();
var con = document.getElementById('container1');
setTimeout(() => {
	//document.body.append(stats.domElement);
  con.append(stats.domElement);
}, 500);

var s1 = createShape(0xff0000);
var s2 = createShape(0x0000ff);
s2.position.add(new THREE.Vector3(5));
s2.rotateZ(THREE.Math.degToRad(45));

var sp1 = createSphere(.3);
s1.add(sp1);
sp1.position.add(new THREE.Vector3(0, .3, 0));

var sp2 = createSphere(.3);
s2.add(sp2);

sp2.position.add(new THREE.Vector3(0, .3, 0));

// ---- end of playground ---------------------- //
function createPlane(size = 1, mat){
	var geo = new THREE.PlaneGeometry(size, size);
  var mesh = new THREE.Mesh(geo, mat);
  scene.add(mesh);
  return mesh;
}

function displayVector(v1){
	var v2 = new THREE.Vector3();
  createLine(v2, v1);
}

function createLine(v1, v2){
/* 	var lineMesh;
	  var geo = new...