three.js dev template - module

CSS

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

JavaScript

// Simple three.js example

import * as THREE from "https://rawgit.com/mrdoob/three.js/dev/build/three.module.js";
import { OrbitControls } from "https://rawgit.com/mrdoob/three.js/dev/examples/jsm/controls/OrbitControls.js";

var mesh, renderer, scene, camera, controls;

init();
animate();

function init() {

    // renderer
    renderer = new THREE.WebGLRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );
    renderer.setPixelRatio( window.devicePixelRatio );
    document.body.appendChild( renderer.domElement );

    // scene
    scene = new THREE.Scene();
    
    // camera
    camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
    camera.position.set( 20, 20, 20 );

    // controls
    controls = new OrbitControls( camera, renderer.domElement );
    
    // axes
    scene.add( new THREE.AxesHelper( 20 ) );

    // geometry, for the position attribute
    var tempGeometry = new THREE.SphereBufferGeometry( 5, 12, 8 );
    
    var geometry = new THREE.InstancedBufferGeometry();
    geometry.setAttribute("position", tempGeometry.getAttribute("position"));
    geometry.setIndex(tempGeometry.getIndex());
    
    var data = new Float32Array([0, 0, 0, -10, 10, 10, /* 10, 10, -10 */]); // Uncomment to see desired result
    var attribute = new THREE.InstancedBufferAttribute(data, 3);
    geometry.setAttribute("translation", attribute);
    
    // material
    var material = new THREE.ShaderMaterial( {
   	    vertexShader: `
            attribute vec3 translation;
            
            void main() {
       	        gl_Position = projectionMatrix * modelViewMatrix * vec4( position + translation, 1.0 );
            }
        `,
        
        fragmentShader: `
            void main() {
                gl_FragColor = vec4(1.0);
            }
        `
    } );
    
    geometry.instanceCount = 2;
    
    // mesh
    mesh = new THREE.Mesh( geometry, material );
    mesh.frustumCulled = false;
   ...