three.js dev template

by govizlora

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>

CSS

body {
	background-color: #000;
	margin: 0px;
	overflow: hidden;
}

JavaScript

// Setup
const w = window.innerWidth;
const h = window.innerHeight;
const renderer = new THREE.WebGLRenderer();
renderer.setSize(w, h);
document.body.appendChild(renderer.domElement);
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(50, w / h);
camera.position.z = 30;

// Geometry
const geometry = new THREE.Geometry();
geometry.vertices.push(new THREE.Vector3());

// Material
const material1 = new THREE.PointsMaterial({
  sizeAttenuation: false,
  color: new THREE.Color(0xff6666),
  size: 512,
});
const material2 = new THREE.PointsMaterial({
  sizeAttenuation: false,
  color: new THREE.Color(0x3399ff),
  size: 256,
});

// Points
const point1 = new THREE.Points(geometry, material1);
const point2 = new THREE.Points(geometry, material2);
point1.position.x = -10;
point2.position.x = 10;
scene.add(point1, point2);

// Render
renderer.render(scene, camera);