Three.jsのコードでピラミッドを作るにはどこを変えればいいですか？

以前にも質問した、
こちらのコードなんですが、

このブロックを

var map = [
[1, 1, 1, 1, 1, 1, 1,],
[1, 1, 1, 1, 1, 1, 1,],
[1, 1, 1, 1, 1, 1, 1,],
[1, 1, 1, 1, 1, 1, 1,],
[1, 1, 1, 1, 1, 1, 1,],
[1, 1, 1, 1, 1, 1, 1,],
[1, 1, 1, 1, 1, 1, 1,],
];

積み上げて

[1, 1, 1, 1, 1,],
[1, 1, 1, 1, 1,],
[1, 1, 1, 1, 1,],
[1, 1, 1, 1, 1,],
[1, 1, 1, 1, 1,],

積み上げて

[1, 1, 1,],
[1, 1, 1,],
[1, 1, 1,],

積み上げて

[1,],

ピラミッドにしたいのですが。

初歩的な質問ですがよろしくお願いします。

行動規範の内容に同意します

回答2件

既に解決済かと思いますが参考までにサンプルを書いてみました。
任意の段数のピラミッドを作るサンプルになります。

http://jsdo.it/cx20/OkMp

js
1var COUNT = 8; // ピラミッドの段数
2for ( var i = COUNT; i > 0 ; i-- ) {
3    for ( var j = i; j > 0; j-- ) {
4        for ( var k = i; k > 0; k-- ) {
5            // ＜表示位置計算＞
6            // 下層から順番に並べていく
7            var cube = new THREE.Mesh(cubeGeo, cubeMat);
8            cube.position.x = -COUNT * WIDTH / 2 + j * WIDTH + (COUNT - i) * WIDTH / 2 - WIDTH / 2;
9            cube.position.z = -COUNT * DEPTH / 2 + k * DEPTH + (COUNT - i) * DEPTH / 2 - DEPTH / 2;
10            cube.position.y =  COUNT * HEIGHT - i * HEIGHT;
11            
12            scene.add(cube);
13        }
14    }
15}

投稿2018/09/07 13:55

cx20

総合スコア4633

tomeater

2018/09/07 20:01

美しいピラミッドです！もっと精進します。

行動規範の内容に同意します

ベストアンサー

箱作る部分(createMazeCubes)を変えればできます。

JavaScript
1// forked from cx20's "Three.js で 3D 迷路を表示してみるテスト" http://jsdo.it/cx20/wLcg
2// forked from Microsoft Edge Docs's "Dino game final" https://codepen.io/MSEdgeDev/pen/NpKejy
3
4var UNITWIDTH = 90;                 // Width of a cubes in the maze
5var UNITHEIGHT = 90;                // Height of the cubes in the maze
6
7var camera, controls, scene, renderer;
8var mapSize;
9
10var collidableObjects = [];
11var totalCubesWide;
12
13// HTML elements to be changed
14var container = document.getElementById('container');
15var body = document.getElementById('body');
16var blocker = document.getElementById('blocker');
17
18// Get control of the mouse
19function getPointerLock() {
20    document.onclick = function () {
21        container.requestPointerLock();
22    }
23
24    document.addEventListener('pointerlockchange', lockChange, false);
25}
26
27// Listen for when the pointer lock is activatd and deacivated
28function lockChange() {
29    if (document.pointerLockElement === container) {
30        blocker.style.display = "none";
31        //controls.enabled = true;
32    } else {
33        blocker.style.display = "";
34        //controls.enabled = false;
35    }
36}
37
38// Set up the game
39//getPointerLock();
40init();
41
42// Set up the game
43function init() {
44    // Create the scene where everything will go
45    scene = new THREE.Scene();
46
47    // Set render settings
48    renderer = new THREE.WebGLRenderer();
49    renderer.setClearColor(0x000000);
50    renderer.setSize(window.innerWidth, window.innerHeight);
51
52    // Render to the container
53    var container = document.getElementById('container');
54    container.appendChild(renderer.domElement);
55
56    // Set camera position and view details
57    camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 10000);
58    camera.position.y = 500; // Height the camera will be looking from
59    camera.position.x = 0;
60    camera.position.z = 1000;
61    //camera.lookAt(new THREE.Vector3(0, 0, 0 ));
62
63    // Add the camera to the controller, then add to the scene
64    //controls = new THREE.PointerLockControls(camera);
65    controls = new THREE.OrbitControls( camera, renderer.domElement );
66    controls.userPan = false;
67    controls.userPanSpeed = 0.0;
68    controls.maxDistance = 5000.0;
69    controls.maxPolarAngle = Math.PI * 0.495;
70    controls.autoRotate = true;
71    controls.autoRotateSpeed = -2.0;
72
73    
74    //scene.add(controls.getObject());
75
76    let axis = new THREE.AxesHelper(1000);   
77    scene.add(axis);
78
79    // Add the walls(cubes) of the maze
80    createMazeCubes();
81    // Add ground plane
82    createGround();
83    // Add perimeter walls that surround the maze
84    createPerimWalls();
85
86    // Call the animate function
87    animate();
88
89    // Add lights to the scene
90    addLights();
91
92    // Listen for if the window changes sizes
93    window.addEventListener('resize', onWindowResize, false);
94
95}
96
97// Add lights to the scene
98function addLights() {
99    var lightOne = new THREE.DirectionalLight(0xffffff);
100    lightOne.position.set(1, 1, 1);
101    scene.add(lightOne);
102
103    var lightTwo = new THREE.DirectionalLight(0xffffff, .4);
104    lightTwo.position.set(1, -1, -1);
105    scene.add(lightTwo);
106}
107
108// Create the maze walls using cubes that are mapped with a 2D array
109function createMazeCubes() {
110    var map = [
111        [
112            [0, 0, 1, 0, 1, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 1, 0, 0,],
113            [0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 1, 0, 0,],
114            [0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 1, 1, 1, 1, 1, 0, 1, 1, 0, 0,],
115            [0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0,],
116            [0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0,],
117            [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0,],
118            [1, 1, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0,],
119            [0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0,],
120            [0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,],
121            [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,],
122            [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 1, 0, 1,],
123            [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 1, 0, 0,],
124            [0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 1, 0, 1, 0, 0, 1, 1, 1,],
125            [0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0,],
126            [0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 1, 1, 1, 0, 1, 0, 0, 0, 0, 0,],
127            [1, 1, 1, 0, 1, 1, 1, 1, 0, 1, 0, 1, 1, 0, 1, 0, 0, 0, 0, 0,],
128            [0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,],
129            [1, 1, 1, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0,],
130            [0, 0, 1, 0, 1, 1, 1, 1, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0,],
131            [0, 0, 1, 1, 1, 0, 0, 0, 0, 1, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0,]
132        ],
133        [
134            [1, 1, 1, 1, 1, 1, 1,],
135            [1, 1, 1, 1, 1, 1, 1,],
136            [1, 1, 1, 1, 1, 1, 1,],
137            [1, 1, 1, 1, 1, 1, 1,],
138            [1, 1, 1, 1, 1, 1, 1,],
139            [1, 1, 1, 1, 1, 1, 1,],
140            [1, 1, 1, 1, 1, 1, 1,],
141        ],
142        [
143            [1, 1, 1, 1, 1,],
144            [1, 1, 1, 1, 1,],
145            [1, 1, 1, 1, 1,],
146            [1, 1, 1, 1, 1,],
147            [1, 1, 1, 1, 1,],
148        ],
149        [
150            [1, 1, 1,],
151            [1, 1, 1,],
152            [1, 1, 1,],
153        ],
154        [
155            [1,],
156        ],
157    ];
158    
159    for(var i = 0; i < map.length; i++) {
160        createMazeCubesFromData(map[i], i);
161    }
162}
163function createMazeCubesFromData(map, z) {
164    // Maze wall mapping, assuming matrix
165    // 1's are cubes, 0's are empty space
166
167    // wall details
168    var cubeGeo = new THREE.BoxGeometry(UNITWIDTH, UNITHEIGHT, UNITWIDTH);
169    var cubeMat = new THREE.MeshPhongMaterial({
170        color: 0x81cfe0,
171    });
172
173    // Keep cubes within boundry walls
174    var widthOffset = UNITWIDTH / 2;
175    // Put the bottom of the cube at y = 0
176    var heightOffset = UNITHEIGHT / 2;
177
178    // See how wide the map is by seeing how long the first array is
179    totalCubesWide = map[0].length;
180
181    // Place walls where 1`s are
182    for (var i = 0; i < totalCubesWide; i++) {
183        for (var j = 0; j < map[i].length; j++) {
184            // If a 1 is found, add a cube at the corresponding position
185            if (map[i][j]) {
186                // Make the cube
187                var cube = new THREE.Mesh(cubeGeo, cubeMat);
188                // Set the cube position
189                cube.position.z = (i - totalCubesWide / 2) * UNITWIDTH + widthOffset;
190                cube.position.y = heightOffset + UNITHEIGHT * z;
191                cube.position.x = (j - totalCubesWide / 2) * UNITWIDTH + widthOffset;
192                // Add the cube
193                scene.add(cube);
194                // Used later for collision detection
195                collidableObjects.push(cube);
196            }
197        }
198    }
199    // Create the ground based on the map size the matrix/cube size produced
200    mapSize = totalCubesWide * UNITWIDTH;
201}
202
203
204// Create the ground plane that the maze sits on top of
205function createGround() {
206    // Create the ground geometry and material
207    var groundGeo = new THREE.PlaneGeometry(mapSize, mapSize);
208    var groundMat = new THREE.MeshPhongMaterial({ color: 0xA0522D, side: THREE.DoubleSide, shading: THREE.FlatShading });
209
210    // Create the ground and rotate it flat
211    var ground = new THREE.Mesh(groundGeo, groundMat);
212    ground.position.set(0, 1, 0);
213    ground.rotation.x = degreesToRadians(90);
214    scene.add(ground);
215}
216
217// Make the four perimeter walls for the maze
218function createPerimWalls() {
219    var halfMap = mapSize / 2;  // Half the size of the map
220    var sign = 1;               // Used to make an amount positive or negative
221
222    // Loop through twice, making two perimeter walls at a time
223    for (var i = 0; i < 2; i++) {
224        var perimGeo = new THREE.PlaneGeometry(mapSize, UNITHEIGHT);
225        // Make the material double sided
226        var perimMat = new THREE.MeshPhongMaterial({ color: 0x464646, side: THREE.DoubleSide });
227        // Make two walls
228        var perimWallLR = new THREE.Mesh(perimGeo, perimMat);
229        var perimWallFB = new THREE.Mesh(perimGeo, perimMat);
230
231        // Create left/right walls
232        perimWallLR.position.set(halfMap * sign, UNITHEIGHT / 2, 0);
233        perimWallLR.rotation.y = degreesToRadians(90);
234        scene.add(perimWallLR);
235        collidableObjects.push(perimWallLR);
236        // Create front/back walls
237        perimWallFB.position.set(0, UNITHEIGHT / 2, halfMap * sign);
238        scene.add(perimWallFB);
239        collidableObjects.push(perimWallFB);
240
241        sign = -1; // Swap to negative value
242    }
243}
244
245// Update the camera and renderer when the window changes size
246function onWindowResize() {
247    camera.aspect = window.innerWidth / window.innerHeight;
248    camera.updateProjectionMatrix();
249    renderer.setSize(window.innerWidth, window.innerHeight);
250}
251
252function animate() {
253    controls.update();
254    render();
255    requestAnimationFrame(animate);
256}
257
258// Render the scene
259function render() {
260    renderer.render(scene, camera);
261}
262
263// Converts degrees to radians
264function degreesToRadians(degrees) {
265    return degrees * Math.PI / 180;
266}
267