Pure THREE.JS template

by navinleon

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/three.js/107/three.min.js"></script>
<script src="http://threejs.org/examples/js/controls/OrbitControls.js"></script>

JavaScript

var scene, renderer, camera, controls;
import { DragControls } from "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/controls/DragControls.js";

renderer = new THREE.WebGLRenderer({
  antialias: true
});
var width = window.innerWidth;
var height = window.innerHeight;

renderer.setSize(width, height);
// background color
renderer.setClearColor(0xffaa00, 1);

document.body.appendChild(renderer.domElement);

scene = new THREE.Scene();

camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
camera.position.y = 16;
camera.position.z = 40;
camera.lookAt(new THREE.Vector3(0, 0, 0));

controls = new THREE.OrbitControls(camera, renderer.domElement);

var gridXZ = new THREE.GridHelper(100, 10);
scene.add(gridXZ);

var dl = new THREE.SpotLight();
scene.add(dl);
dl.position.set(0, 50, 0);

scene.add(new THREE.AmbientLight(0x555555));

// MERGING

var blueMaterial = new THREE.MeshPhongMaterial({
  color: 0x0000FF
});
var redMaterial = new THREE.MeshPhongMaterial({
  color: 0xFF0000
});

var dummyObj = new THREE.Object3D();
var mergeGeometry = new THREE.Geometry();
/* for(var i=0;i<32;i++){
var boxGeometry = new THREE.BoxGeometry(10, 10, 10);
for (var face in boxGeometry.faces) {
  boxGeometry.faces[face].materialIndex = 0;
}

var sphereGeometry = new THREE.SphereGeometry(5, 16, 16);
sphereGeometry.applyMatrix(new THREE.Matrix4().makeTranslation(Math.random() * 2 - 1 , 0, Math.random() * 2 - 1 ));

//mergeGeometry.merge(boxGeometry, boxGeometry.matrix);
mergeGeometry.merge(sphereGeometry, sphereGeometry.matrix, 1);
} */
/* console.log('mergeGeometry',mergeGeometry);
var mesh = new THREE.Mesh(mergeGeometry, redMaterial);
scene.add(mesh); */
/* controls.enabled = false;
const dragControl = new DragControls([mesh], camera, renderer.domElement);
dragControl.addEventListener('dragstart', (event) => {
  //alert('ddd')
  controls.enabled = false;

}); */



var spheres = [];
var geometry0 = new THREE.SphereGeometry(50, 14, 14);
for (var i=0 ; i<10 ; i++){
let point...