Plactice three.js - Cubes 001
Sample Site: Cubes 001
```
qb001.html
<!DOCTYPE html>
<html>
<head>
<title>Cubes 001</title>
<meta charset="utf-8" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/three.js/105/three.min.js"></script>
<script type="text/javascript" src="qb001.js" charset="utf-8"></script>
</head>
<body>
<h1>Plactice - three.js - Cubes 001</h1>
<canvas id="mainc"></canvas>
</body>
</html>qb001.js
document.addEventListener('DOMContentLoaded', function() {
var mainc = document.getElementById('mainc');
if(mainc.getContext) {
var xsize = window.innerWidth;
var ysize = window.innerHeight;
mainc.setAttribute('width', xsize);
mainc.setAttribute('height', ysize);
const renderer = new THREE.WebGLRenderer({
canvas: mainc,
antialias: true
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(xsize, ysize);
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(45, xsize / ysize);
camera.position.set(400, 20, 1600);
camera.rotation.set(0, 0.7, 0);
const geometry = new THREE.BoxGeometry(100, 100, 100);
const material = new THREE.MeshStandardMaterial({
color: 0x88eeaa, roughness:0.5
});
const N = 15;
var box = Array(N);
for(var i = 0; i < N; i++) {
box[i] = new THREE.Mesh(geometry, material);
scene.add(box[i]);
}
const directionalLight = new THREE.DirectionalLight(0xffffff);
directionalLight.position.set(1, 1, 1);
scene.add(directionalLight);
const pointLight = new THREE.PointLight(0xffffff, 2, 1000);
scene.add(pointLight);
const pointLightHelper = new THREE.PointLightHelper(pointLight, 30);
scene.add(pointLightHelper);
var Playing = true;
mainc.addEventListener('click', function() {
if(Playing) {
Playing = false;
} else {
Playing = true;
tick();
}
}, false);
var theta = Array(N);
var d = 0;
var a = 0;
for(var i = 0; i < N; i++) {
box[i].rotation.z = a;
//a += -0.3;
box[i].position.z = d;
d += 100;
}
function rot_xyz(i, d) {
box[i].rotation.z += d;
}
var state = 0;
function tick() {
if(!Playing) return;
switch(state) {
case 0:
for(var i = 0; i < N; i++) {
rot_xyz(i, -0.02 + (N-i-1)*0.001);
}
break;
case 1:
break;
case 2:
break;
case 3:
break;
case 4:
break;
default:
state = 0;
break;
}
renderer.render(scene, camera);
requestAnimationFrame(tick);
}
tick();
}
}, false);