396 ポリゴン2.00 × 3.00 × 0.32 m
コードで使う
エディターでリミックスmodular-wall.js · 190 行
自己完結型の ES モジュールで、依存先は three のみです。ファクトリー関数を呼び出し、返された group をシーンに追加してください。
/**
* Modular Wall — Codels 3D model library
* License: CC0-1.0 · Units: meters · Y-up · Front: +Z · Origin: center of the base (y = 0)
* Triangles: 396 · Size (W × H × D): 2.00 × 3.00 × 0.32 m
*
* Usage:
* import { createModularWall } from './modular-wall.js';
*
* const model = createModularWall();
* model.position.set(0, 0, 0);
* scene.add(model);
*/
import * as THREE from 'three';
// Deterministic vertex displacement (organic low-poly look).
function jitter(geometry, amount, seed) {
const pos = geometry.attributes.position;
const h = (a, b, c, s) => {
let x = Math.imul(a, 73856093) ^ Math.imul(b, 19349663) ^ Math.imul(c, 83492791) ^ Math.imul(s, 2654435761);
x = Math.imul(x ^ (x >>> 16), 2246822507);
x = Math.imul(x ^ (x >>> 13), 3266489909);
return ((x ^ (x >>> 16)) >>> 0) / 4294967295 - 0.5;
};
for (let i = 0; i < pos.count; i++) {
const x = pos.getX(i), y = pos.getY(i), z = pos.getZ(i);
const qx = Math.round(x * 1000), qy = Math.round(y * 1000), qz = Math.round(z * 1000);
pos.setXYZ(i, x + h(qx, qy, qz, seed) * 2 * amount, y + h(qx, qy, qz, seed + 1) * 2 * amount, z + h(qx, qy, qz, seed + 2) * 2 * amount);
}
pos.needsUpdate = true;
geometry.computeVertexNormals();
return geometry;
}
export function createModularWall() {
const root = new THREE.Group();
root.name = 'ModularWall';
// Materials
const stoneMat = new THREE.MeshStandardMaterial({ name: 'stone', color: 0x7c7871, roughness: 0.95, flatShading: true });
const stone2Mat = new THREE.MeshStandardMaterial({ name: 'stone2', color: 0x67635c, roughness: 0.95, flatShading: true });
const stone3Mat = new THREE.MeshStandardMaterial({ name: 'stone3', color: 0x8b867c, roughness: 0.95, flatShading: true });
const mortarMat = new THREE.MeshStandardMaterial({ name: 'mortar', color: 0x3f3c38, roughness: 1, flatShading: true });
const plinthMat = new THREE.MeshStandardMaterial({ name: 'plinth', color: 0x57534d, roughness: 0.95, flatShading: true });
const dressedMat = new THREE.MeshStandardMaterial({ name: 'dressed', color: 0x9a9488, roughness: 0.9, flatShading: true });
// Parts
const plinth = new THREE.Mesh(new THREE.BoxGeometry(2, 0.3, 0.31), plinthMat);
plinth.name = 'plinth';
plinth.position.set(0, 0.15, 0);
root.add(plinth);
const cap = new THREE.Mesh(new THREE.BoxGeometry(2, 0.2, 0.32), dressedMat);
cap.name = 'cap';
cap.position.set(0, 2.9, 0);
root.add(cap);
const core = new THREE.Mesh(new THREE.BoxGeometry(2, 2.5, 0.25), mortarMat);
core.name = 'core';
core.position.set(0, 1.55, 0);
root.add(core);
const stone = new THREE.Mesh(jitter(new THREE.BoxGeometry(0.3847, 0.28, 0.2785), 0.005, 350), stone2Mat);
stone.name = 'stone';
stone.position.set(-0.7977, 0.45, 0);
root.add(stone);
const stone2 = new THREE.Mesh(jitter(new THREE.BoxGeometry(0.4048, 0.28, 0.2772), 0.005, 351), stoneMat);
stone2.name = 'stone';
stone2.position.set(-0.3829, 0.45, 0);
root.add(stone2);
const stone3 = new THREE.Mesh(jitter(new THREE.BoxGeometry(0.7708, 0.28, 0.2793), 0.005, 352), stone3Mat);
stone3.name = 'stone';
stone3.position.set(0.2248, 0.45, 0);
root.add(stone3);
const stone4 = new THREE.Mesh(jitter(new THREE.BoxGeometry(0.3598, 0.28, 0.2722), 0.005, 353), stoneMat);
stone4.name = 'stone';
stone4.position.set(0.8101, 0.45, 0);
root.add(stone4);
const stone5 = new THREE.Mesh(jitter(new THREE.BoxGeometry(0.6856, 0.28, 0.2748), 0.005, 354), stoneMat);
stone5.name = 'stone';
stone5.position.set(-0.6472, 0.75, 0);
root.add(stone5);
const stone6 = new THREE.Mesh(jitter(new THREE.BoxGeometry(0.5874, 0.28, 0.2788), 0.005, 355), stoneMat);
stone6.name = 'stone';
stone6.position.set(0.0093, 0.75, 0);
root.add(stone6);
const stone7 = new THREE.Mesh(jitter(new THREE.BoxGeometry(0.667, 0.28, 0.2895), 0.005, 356), stoneMat);
stone7.name = 'stone';
stone7.position.set(0.6565, 0.75, 0);
root.add(stone7);
const stone8 = new THREE.Mesh(jitter(new THREE.BoxGeometry(0.7311, 0.255, 0.273), 0.005, 357), stone2Mat);
stone8.name = 'stone';
stone8.position.set(-0.6244, 1.0375, 0);
root.add(stone8);
const stone9 = new THREE.Mesh(jitter(new THREE.BoxGeometry(0.4563, 0.255, 0.2843), 0.005, 358), stoneMat);
stone9.name = 'stone';
stone9.position.set(-0.0107, 1.0375, 0);
root.add(stone9);
const stone10 = new THREE.Mesh(jitter(new THREE.BoxGeometry(0.4375, 0.255, 0.2879), 0.005, 359), stone2Mat);
stone10.name = 'stone';
stone10.position.set(0.4562, 1.0375, 0);
root.add(stone10);
const stone11 = new THREE.Mesh(jitter(new THREE.BoxGeometry(0.2951, 0.255, 0.2809), 0.005, 360), stone3Mat);
stone11.name = 'stone';
stone11.position.set(0.8424, 1.0375, 0);
root.add(stone11);
const stone12 = new THREE.Mesh(jitter(new THREE.BoxGeometry(0.7664, 0.255, 0.2859), 0.005, 361), stoneMat);
stone12.name = 'stone';
stone12.position.set(-0.6068, 1.3125, 0);
root.add(stone12);
const stone13 = new THREE.Mesh(jitter(new THREE.BoxGeometry(0.6298, 0.255, 0.2702), 0.005, 362), stone2Mat);
stone13.name = 'stone';
stone13.position.set(0.1113, 1.3125, 0);
root.add(stone13);
const stone14 = new THREE.Mesh(jitter(new THREE.BoxGeometry(0.5439, 0.255, 0.2762), 0.005, 363), stoneMat);
stone14.name = 'stone';
stone14.position.set(0.7181, 1.3125, 0);
root.add(stone14);
const stone15 = new THREE.Mesh(jitter(new THREE.BoxGeometry(0.4152, 0.255, 0.2772), 0.005, 364), stone3Mat);
stone15.name = 'stone';
stone15.position.set(-0.7824, 1.5875, 0);
root.add(stone15);
const stone16 = new THREE.Mesh(jitter(new THREE.BoxGeometry(0.6872, 0.255, 0.2829), 0.005, 365), stone3Mat);
stone16.name = 'stone';
stone16.position.set(-0.2112, 1.5875, 0);
root.add(stone16);
const stone17 = new THREE.Mesh(jitter(new THREE.BoxGeometry(0.5276, 0.255, 0.2739), 0.005, 366), stone2Mat);
stone17.name = 'stone';
stone17.position.set(0.4162, 1.5875, 0);
root.add(stone17);
const stone18 = new THREE.Mesh(jitter(new THREE.BoxGeometry(0.29, 0.255, 0.2693), 0.005, 367), stoneMat);
stone18.name = 'stone';
stone18.position.set(0.845, 1.5875, 0);
root.add(stone18);
const stone19 = new THREE.Mesh(jitter(new THREE.BoxGeometry(0.7452, 0.255, 0.2812), 0.005, 368), stone2Mat);
stone19.name = 'stone';
stone19.position.set(-0.6174, 1.8625, 0);
root.add(stone19);
const stone20 = new THREE.Mesh(jitter(new THREE.BoxGeometry(0.509, 0.255, 0.267), 0.005, 369), stone3Mat);
stone20.name = 'stone';
stone20.position.set(0.0297, 1.8625, 0);
root.add(stone20);
const stone21 = new THREE.Mesh(jitter(new THREE.BoxGeometry(0.6858, 0.255, 0.2881), 0.005, 370), stone2Mat);
stone21.name = 'stone';
stone21.position.set(0.6471, 1.8625, 0);
root.add(stone21);
const stone22 = new THREE.Mesh(jitter(new THREE.BoxGeometry(0.7106, 0.18, 0.2688), 0.005, 371), stone2Mat);
stone22.name = 'stone';
stone22.position.set(-0.6347, 2.1, 0);
root.add(stone22);
const stone23 = new THREE.Mesh(jitter(new THREE.BoxGeometry(0.6421, 0.18, 0.2816), 0.005, 372), stone3Mat);
stone23.name = 'stone';
stone23.position.set(0.0617, 2.1, 0);
root.add(stone23);
const stone24 = new THREE.Mesh(jitter(new THREE.BoxGeometry(0.5873, 0.18, 0.2891), 0.005, 373), stone3Mat);
stone24.name = 'stone';
stone24.position.set(0.6964, 2.1, 0);
root.add(stone24);
const stone25 = new THREE.Mesh(jitter(new THREE.BoxGeometry(0.6177, 0.28, 0.2792), 0.005, 374), stone3Mat);
stone25.name = 'stone';
stone25.position.set(-0.6812, 2.35, 0);
root.add(stone25);
const stone26 = new THREE.Mesh(jitter(new THREE.BoxGeometry(0.7655, 0.28, 0.2661), 0.005, 375), stone2Mat);
stone26.name = 'stone';
stone26.position.set(0.0305, 2.35, 0);
root.add(stone26);
const stone27 = new THREE.Mesh(jitter(new THREE.BoxGeometry(0.5568, 0.28, 0.2739), 0.005, 376), stone3Mat);
stone27.name = 'stone';
stone27.position.set(0.7116, 2.35, 0);
root.add(stone27);
const stone28 = new THREE.Mesh(jitter(new THREE.BoxGeometry(0.5998, 0.28, 0.2794), 0.005, 377), stone3Mat);
stone28.name = 'stone';
stone28.position.set(-0.6901, 2.65, 0);
root.add(stone28);
const stone29 = new THREE.Mesh(jitter(new THREE.BoxGeometry(0.6822, 0.28, 0.2763), 0.005, 378), stone2Mat);
stone29.name = 'stone';
stone29.position.set(-0.0291, 2.65, 0);
root.add(stone29);
const stone30 = new THREE.Mesh(jitter(new THREE.BoxGeometry(0.658, 0.28, 0.2837), 0.005, 379), stone2Mat);
stone30.name = 'stone';
stone30.position.set(0.661, 2.65, 0);
root.add(stone30);
root.traverse((o) => {
if (o.isMesh) {
o.castShadow = true;
o.receiveShadow = true;
}
});
return root;
}
export default createModularWall;
評価とコメント
0 件のコメント
まだコメントはありません。このモデルの使い方や改善できる点を共有しましょう。
関連モデル
同じカテゴリまたは似たタグ









