【Three.js】立方体を立方体状に配置する
See the Pen [2017/03/20][Three.js]big cube by cubes by aadebdeb (@aadebdeb) on CodePen.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>[2017/03/20] big cube by cubes</title> <style> body { margin: 0; overflow: hidden; } </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/stats.js/r16/Stats.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.3/dat.gui.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/84/three.min.js"></script> <script> window.onload = function() { init(); render(); }; window.onresize = onResize; var camera, scene, renderer; var stats; var controller; var axes, group, camera; function init() { time = 0; initGui(); initStats(); initScene(); initCamera(); initRenderer(); } function initStats() { stats = new Stats(); stats.setMode(0); stats.domElement.style.position = 'absolute'; stats.domElement.style.left = '0px'; stats.domElement.style.top = '0px'; document.body.appendChild(stats.domElement); } function initGui() { controller = new function() { this.groupRotationX = 0.01; this.groupRotationY = 0.01; this.groupRotationZ = 0.01; this.cubeRotationX = 0.01; this.cubeRotationY = 0.01; this.cubeRotationZ = 0.01; this.isAxesVisible = true; this.isPerspectiveCamera = true; }; gui = new dat.GUI(); var groupFolder = gui.addFolder('group'); groupFolder.add(controller, 'groupRotationX', 0, 0.05); groupFolder.add(controller, 'groupRotationY', 0, 0.05); groupFolder.add(controller, 'groupRotationZ', 0, 0.05); groupFolder.open(); var cubeFolder = gui.addFolder('cube'); cubeFolder.add(controller, 'cubeRotationX', 0, 0.05); cubeFolder.add(controller, 'cubeRotationY', 0, 0.05); cubeFolder.add(controller, 'cubeRotationZ', 0, 0.05); cubeFolder.open(); gui.add(controller, 'isAxesVisible').onChange(function(e) { axes.visible = e; }); gui.add(controller, 'isPerspectiveCamera').onChange(function(e) { setUpCamera(e); }); } function initRenderer() { renderer = new THREE.WebGLRenderer(); renderer.setClearColor(new THREE.Color(0xeeeeee)); renderer.setSize(window.innerWidth, window.innerHeight); renderer.shadowMap.enabled = true; document.body.appendChild(renderer.domElement); } function initCamera() { setUpCamera(controller.isPerspectiveCamera); } function setUpCamera(isPerspective) { if (isPerspective) { camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.set(0, 0, 500); camera.lookAt(scene.position); } else { camera = new THREE.OrthographicCamera( window.innerWidth / -6, window.innerWidth / 6, window.innerHeight / 6, window.innerHeight / -6, -200, 1000 ); camera.position.set(0, 0, 500); camera.lookAt(scene.position); } } function initScene() { scene = new THREE.Scene(); axes = new THREE.AxisHelper(300); axes.visible = controller.isAxesVisible; scene.add(axes); group = new THREE.Group(); var step = 30; var num = 10; for (var x = 1; x <= num; x++) { for (var y = 1; y <= num; y++) { for (var z = 1; z <= num; z ++) { var cube = new THREE.Mesh( new THREE.BoxGeometry(10, 10, 10), new THREE.MeshLambertMaterial(0xffffff) ); cube.position.set( (x - num / 2) * step, (y - num / 2) * step, (z - num / 2) * step ); group.add(cube); } } } scene.add(group); var pointLight = new THREE.PointLight(0xffffff); pointLight.position.set(200, 200, 200); scene.add(pointLight); } function getRandom(min, max) { return Math.random() * (max - min) + min; } function render() { group.rotation.x += controller.groupRotationX; group.rotation.y += controller.groupRotationY; group.rotation.z += controller.groupRotationZ; group.traverse(function(obj) { if (obj != group) { obj.rotation.x += controller.cubeRotationX; obj.rotation.y += controller.cubeRotationY; obj.rotation.z += controller.cubeRotationZ; } }); stats.update(); renderer.render(scene, camera); requestAnimationFrame(render); } function onResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); } </script> </head> <body> </body> </html>