828 ポリゴン1.07 × 1.02 × 1.07 m
コードで使う
エディターでリミックスquestion-block.js · 282 行
自己完結型の ES モジュールで、依存先は three のみです。ファクトリー関数を呼び出し、返された group をシーンに追加してください。
/**
* Question Block — Codels 3D model library
* License: CC0-1.0 · Units: meters · Y-up · Front: +Z · Origin: center of the base (y = 0)
* Triangles: 828 · Size (W × H × D): 1.07 × 1.02 × 1.07 m
*
* Usage:
* import { createQuestionBlock } from './question-block.js';
*
* const model = createQuestionBlock();
* model.position.set(0, 0, 0);
* scene.add(model);
*/
import * as THREE from 'three';
const deg = THREE.MathUtils.degToRad;
export function createQuestionBlock() {
const root = new THREE.Group();
root.name = 'QuestionBlock';
// Materials
const blockMat = new THREE.MeshStandardMaterial({ name: 'block', color: 0xf4a91f, roughness: 0.55, flatShading: true });
const rivetMat = new THREE.MeshStandardMaterial({ name: 'rivet', color: 0x8a4d14, roughness: 0.6, flatShading: true });
const markMat = new THREE.MeshStandardMaterial({ name: 'mark', color: 0xfff7dc, roughness: 0.5, emissive: 0xffe8a3, emissiveIntensity: 0.55, flatShading: true });
const markShadowMat = new THREE.MeshStandardMaterial({ name: 'markShadow', color: 0xa3520f, roughness: 0.7, flatShading: true });
// Shared geometries
const boxGeo = new THREE.BoxGeometry(0.08, 0.08, 0.04);
const boxGeo2 = new THREE.BoxGeometry(0.3, 0.1, 0.03);
const boxGeo3 = new THREE.BoxGeometry(0.3, 0.1, 0.04);
const boxGeo4 = new THREE.BoxGeometry(0.1, 0.1, 0.03);
const boxGeo5 = new THREE.BoxGeometry(0.1, 0.1, 0.04);
const boxGeo6 = new THREE.BoxGeometry(0.1, 0.2, 0.03);
const boxGeo7 = new THREE.BoxGeometry(0.1, 0.2, 0.04);
const boxGeo8 = new THREE.BoxGeometry(0.2, 0.1, 0.03);
const boxGeo9 = new THREE.BoxGeometry(0.2, 0.1, 0.04);
// Parts
const block = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), blockMat);
block.name = 'block';
block.position.set(0, 0.5, 0);
root.add(block);
const frontFace = new THREE.Group();
frontFace.name = 'frontFace';
frontFace.position.set(0, 0.5, 0);
root.add(frontFace);
const box3 = new THREE.Mesh(boxGeo, rivetMat);
box3.position.set(-0.38, -0.38, 0.5);
frontFace.add(box3);
const box4 = new THREE.Mesh(boxGeo, rivetMat);
box4.position.set(0.38, -0.38, 0.5);
frontFace.add(box4);
const box5 = new THREE.Mesh(boxGeo, rivetMat);
box5.position.set(0.38, 0.38, 0.5);
frontFace.add(box5);
const box6 = new THREE.Mesh(boxGeo, rivetMat);
box6.position.set(-0.38, 0.38, 0.5);
frontFace.add(box6);
const box7 = new THREE.Mesh(boxGeo2, markShadowMat);
box7.position.set(0.035, 0.265, 0.506);
frontFace.add(box7);
const box8 = new THREE.Mesh(boxGeo3, markMat);
box8.position.set(0, 0.3, 0.515);
frontFace.add(box8);
const box9 = new THREE.Mesh(boxGeo4, markShadowMat);
box9.position.set(-0.165, 0.165, 0.506);
frontFace.add(box9);
const box10 = new THREE.Mesh(boxGeo5, markMat);
box10.position.set(-0.2, 0.2, 0.515);
frontFace.add(box10);
const box11 = new THREE.Mesh(boxGeo6, markShadowMat);
box11.position.set(0.235, 0.115, 0.506);
frontFace.add(box11);
const box12 = new THREE.Mesh(boxGeo7, markMat);
box12.position.set(0.2, 0.15, 0.515);
frontFace.add(box12);
const box13 = new THREE.Mesh(boxGeo8, markShadowMat);
box13.position.set(0.085, -0.035, 0.506);
frontFace.add(box13);
const box14 = new THREE.Mesh(boxGeo9, markMat);
box14.position.set(0.05, 0, 0.515);
frontFace.add(box14);
const box15 = new THREE.Mesh(boxGeo4, markShadowMat);
box15.position.set(0.035, -0.135, 0.506);
frontFace.add(box15);
const box16 = new THREE.Mesh(boxGeo5, markMat);
box16.position.set(0, -0.1, 0.515);
frontFace.add(box16);
const box17 = new THREE.Mesh(boxGeo4, markShadowMat);
box17.position.set(0.035, -0.335, 0.506);
frontFace.add(box17);
const box18 = new THREE.Mesh(boxGeo5, markMat);
box18.position.set(0, -0.3, 0.515);
frontFace.add(box18);
const rightFace = new THREE.Group();
rightFace.name = 'rightFace';
rightFace.position.set(0, 0.5, 0);
rightFace.rotation.set(0, deg(90), 0);
root.add(rightFace);
const box20 = new THREE.Mesh(boxGeo, rivetMat);
box20.position.set(-0.38, -0.38, 0.5);
rightFace.add(box20);
const box21 = new THREE.Mesh(boxGeo, rivetMat);
box21.position.set(0.38, -0.38, 0.5);
rightFace.add(box21);
const box22 = new THREE.Mesh(boxGeo, rivetMat);
box22.position.set(0.38, 0.38, 0.5);
rightFace.add(box22);
const box23 = new THREE.Mesh(boxGeo, rivetMat);
box23.position.set(-0.38, 0.38, 0.5);
rightFace.add(box23);
const box24 = new THREE.Mesh(boxGeo2, markShadowMat);
box24.position.set(0.035, 0.265, 0.506);
rightFace.add(box24);
const box25 = new THREE.Mesh(boxGeo3, markMat);
box25.position.set(0, 0.3, 0.515);
rightFace.add(box25);
const box26 = new THREE.Mesh(boxGeo4, markShadowMat);
box26.position.set(-0.165, 0.165, 0.506);
rightFace.add(box26);
const box27 = new THREE.Mesh(boxGeo5, markMat);
box27.position.set(-0.2, 0.2, 0.515);
rightFace.add(box27);
const box28 = new THREE.Mesh(boxGeo6, markShadowMat);
box28.position.set(0.235, 0.115, 0.506);
rightFace.add(box28);
const box29 = new THREE.Mesh(boxGeo7, markMat);
box29.position.set(0.2, 0.15, 0.515);
rightFace.add(box29);
const box30 = new THREE.Mesh(boxGeo8, markShadowMat);
box30.position.set(0.085, -0.035, 0.506);
rightFace.add(box30);
const box31 = new THREE.Mesh(boxGeo9, markMat);
box31.position.set(0.05, 0, 0.515);
rightFace.add(box31);
const box32 = new THREE.Mesh(boxGeo4, markShadowMat);
box32.position.set(0.035, -0.135, 0.506);
rightFace.add(box32);
const box33 = new THREE.Mesh(boxGeo5, markMat);
box33.position.set(0, -0.1, 0.515);
rightFace.add(box33);
const box34 = new THREE.Mesh(boxGeo4, markShadowMat);
box34.position.set(0.035, -0.335, 0.506);
rightFace.add(box34);
const box35 = new THREE.Mesh(boxGeo5, markMat);
box35.position.set(0, -0.3, 0.515);
rightFace.add(box35);
const backFace = new THREE.Group();
backFace.name = 'backFace';
backFace.position.set(0, 0.5, 0);
backFace.rotation.set(0, deg(180), 0);
root.add(backFace);
const box37 = new THREE.Mesh(boxGeo, rivetMat);
box37.position.set(-0.38, -0.38, 0.5);
backFace.add(box37);
const box38 = new THREE.Mesh(boxGeo, rivetMat);
box38.position.set(0.38, -0.38, 0.5);
backFace.add(box38);
const box39 = new THREE.Mesh(boxGeo, rivetMat);
box39.position.set(0.38, 0.38, 0.5);
backFace.add(box39);
const box40 = new THREE.Mesh(boxGeo, rivetMat);
box40.position.set(-0.38, 0.38, 0.5);
backFace.add(box40);
const box41 = new THREE.Mesh(boxGeo2, markShadowMat);
box41.position.set(0.035, 0.265, 0.506);
backFace.add(box41);
const box42 = new THREE.Mesh(boxGeo3, markMat);
box42.position.set(0, 0.3, 0.515);
backFace.add(box42);
const box43 = new THREE.Mesh(boxGeo4, markShadowMat);
box43.position.set(-0.165, 0.165, 0.506);
backFace.add(box43);
const box44 = new THREE.Mesh(boxGeo5, markMat);
box44.position.set(-0.2, 0.2, 0.515);
backFace.add(box44);
const box45 = new THREE.Mesh(boxGeo6, markShadowMat);
box45.position.set(0.235, 0.115, 0.506);
backFace.add(box45);
const box46 = new THREE.Mesh(boxGeo7, markMat);
box46.position.set(0.2, 0.15, 0.515);
backFace.add(box46);
const box47 = new THREE.Mesh(boxGeo8, markShadowMat);
box47.position.set(0.085, -0.035, 0.506);
backFace.add(box47);
const box48 = new THREE.Mesh(boxGeo9, markMat);
box48.position.set(0.05, 0, 0.515);
backFace.add(box48);
const box49 = new THREE.Mesh(boxGeo4, markShadowMat);
box49.position.set(0.035, -0.135, 0.506);
backFace.add(box49);
const box50 = new THREE.Mesh(boxGeo5, markMat);
box50.position.set(0, -0.1, 0.515);
backFace.add(box50);
const box51 = new THREE.Mesh(boxGeo4, markShadowMat);
box51.position.set(0.035, -0.335, 0.506);
backFace.add(box51);
const box52 = new THREE.Mesh(boxGeo5, markMat);
box52.position.set(0, -0.3, 0.515);
backFace.add(box52);
const leftFace = new THREE.Group();
leftFace.name = 'leftFace';
leftFace.position.set(0, 0.5, 0);
leftFace.rotation.set(0, deg(-90), 0);
root.add(leftFace);
const box54 = new THREE.Mesh(boxGeo, rivetMat);
box54.position.set(-0.38, -0.38, 0.5);
leftFace.add(box54);
const box55 = new THREE.Mesh(boxGeo, rivetMat);
box55.position.set(0.38, -0.38, 0.5);
leftFace.add(box55);
const box56 = new THREE.Mesh(boxGeo, rivetMat);
box56.position.set(0.38, 0.38, 0.5);
leftFace.add(box56);
const box57 = new THREE.Mesh(boxGeo, rivetMat);
box57.position.set(-0.38, 0.38, 0.5);
leftFace.add(box57);
const box58 = new THREE.Mesh(boxGeo2, markShadowMat);
box58.position.set(0.035, 0.265, 0.506);
leftFace.add(box58);
const box59 = new THREE.Mesh(boxGeo3, markMat);
box59.position.set(0, 0.3, 0.515);
leftFace.add(box59);
const box60 = new THREE.Mesh(boxGeo4, markShadowMat);
box60.position.set(-0.165, 0.165, 0.506);
leftFace.add(box60);
const box61 = new THREE.Mesh(boxGeo5, markMat);
box61.position.set(-0.2, 0.2, 0.515);
leftFace.add(box61);
const box62 = new THREE.Mesh(boxGeo6, markShadowMat);
box62.position.set(0.235, 0.115, 0.506);
leftFace.add(box62);
const box63 = new THREE.Mesh(boxGeo7, markMat);
box63.position.set(0.2, 0.15, 0.515);
leftFace.add(box63);
const box64 = new THREE.Mesh(boxGeo8, markShadowMat);
box64.position.set(0.085, -0.035, 0.506);
leftFace.add(box64);
const box65 = new THREE.Mesh(boxGeo9, markMat);
box65.position.set(0.05, 0, 0.515);
leftFace.add(box65);
const box66 = new THREE.Mesh(boxGeo4, markShadowMat);
box66.position.set(0.035, -0.135, 0.506);
leftFace.add(box66);
const box67 = new THREE.Mesh(boxGeo5, markMat);
box67.position.set(0, -0.1, 0.515);
leftFace.add(box67);
const box68 = new THREE.Mesh(boxGeo4, markShadowMat);
box68.position.set(0.035, -0.335, 0.506);
leftFace.add(box68);
const box69 = new THREE.Mesh(boxGeo5, markMat);
box69.position.set(0, -0.3, 0.515);
leftFace.add(box69);
const topFace = new THREE.Group();
topFace.name = 'topFace';
topFace.position.set(0, 0.5, 0);
topFace.rotation.set(deg(-90), 0, 0);
root.add(topFace);
const box71 = new THREE.Mesh(boxGeo, rivetMat);
box71.position.set(-0.38, -0.38, 0.5);
topFace.add(box71);
const box72 = new THREE.Mesh(boxGeo, rivetMat);
box72.position.set(0.38, -0.38, 0.5);
topFace.add(box72);
const box73 = new THREE.Mesh(boxGeo, rivetMat);
box73.position.set(0.38, 0.38, 0.5);
topFace.add(box73);
const box74 = new THREE.Mesh(boxGeo, rivetMat);
box74.position.set(-0.38, 0.38, 0.5);
topFace.add(box74);
root.traverse((o) => {
if (o.isMesh) {
o.castShadow = true;
o.receiveShadow = true;
}
});
return root;
}
export default createQuestionBlock;
評価とコメント
0 件のコメント
まだコメントはありません。このモデルの使い方や改善できる点を共有しましょう。
関連モデル
同じカテゴリまたは似たタグ









