564 Tris0,66 × 0,69 × 0,57 m
Im Code verwenden
Im Editor remixencardboard-box.js · 272 Zeilen
Eigenständiges ES-Modul — hängt nur von three ab. Ruf die Factory auf und füge die Gruppe deiner Szene hinzu.
/**
* Cardboard Box — Codels 3D model library
* License: CC0-1.0 · Units: meters · Y-up · Front: +Z · Origin: center of the base (y = 0)
* Triangles: 564 · Size (W × H × D): 0.66 × 0.69 × 0.57 m
*
* Usage:
* import { createCardboardBox } from './cardboard-box.js';
*
* const model = createCardboardBox();
* model.position.set(0, 0, 0);
* scene.add(model);
*/
import * as THREE from 'three';
const deg = THREE.MathUtils.degToRad;
// Extrude a 2D outline along Z (centered). bevel = [thickness, size, segments].
function extrude(outline, depth, holes = [], bevel = null) {
const shape = new THREE.Shape(outline.map(([x, y]) => new THREE.Vector2(x, y)));
for (const hole of holes) shape.holes.push(new THREE.Path(hole.map(([x, y]) => new THREE.Vector2(x, y))));
const options = bevel
? { depth, bevelEnabled: true, bevelThickness: bevel[0], bevelSize: bevel[1], bevelSegments: bevel[2] }
: { depth, bevelEnabled: false };
return new THREE.ExtrudeGeometry(shape, options).translate(0, 0, -depth / 2);
}
export function createCardboardBox() {
const root = new THREE.Group();
root.name = 'CardboardBox';
// Materials
const cardMat = new THREE.MeshStandardMaterial({ name: 'card', color: 0xc49a63, roughness: 0.95, flatShading: true });
const innerMat = new THREE.MeshStandardMaterial({ name: 'inner', color: 0x7a5f3d, roughness: 1, flatShading: true });
const edgeMat = new THREE.MeshStandardMaterial({ name: 'edge', color: 0xa78354, roughness: 0.95, flatShading: true });
const tapeMat = new THREE.MeshStandardMaterial({ name: 'tape', color: 0xdcbe88, roughness: 0.35, flatShading: true });
const labelMat = new THREE.MeshStandardMaterial({ name: 'label', color: 0xf4f2ec, roughness: 0.8, flatShading: true });
const inkMat = new THREE.MeshStandardMaterial({ name: 'ink', color: 0x3a3532, roughness: 0.9, flatShading: true });
// Shared geometries
const boxGeo = new THREE.BoxGeometry(0.0015, 0.07, 0.05);
const boxGeo2 = new THREE.BoxGeometry(0.0015, 0.05, 0.05);
const extrudeGeo = extrude([[-0.008, -0.03], [0.008, -0.03], [0.008, 0.005], [0.02, 0.005], [0, 0.03], [-0.02, 0.005], [-0.008, 0.005]], 0.002);
const boxGeo3 = new THREE.BoxGeometry(0.3864, 0.2529, 0.006);
const boxGeo4 = new THREE.BoxGeometry(0.006, 0.2529, 0.3011);
const boxGeo5 = new THREE.BoxGeometry(0.3744, 0.2469, 0.002);
const boxGeo6 = new THREE.BoxGeometry(0.002, 0.2469, 0.2971);
const boxGeo7 = new THREE.BoxGeometry(0.3864, 0.1565, 0.006);
const boxGeo8 = new THREE.BoxGeometry(0.3764, 0.1505, 0.002);
const boxGeo9 = new THREE.BoxGeometry(0.006, 0.1565, 0.3011);
const boxGeo10 = new THREE.BoxGeometry(0.002, 0.1505, 0.2911);
const boxGeo11 = new THREE.BoxGeometry(0.05, 0.05, 0.0015);
// Parts
const boxes = new THREE.Group();
boxes.name = 'boxes';
root.add(boxes);
const box1 = new THREE.Group();
box1.name = 'box1';
boxes.add(box1);
const body = new THREE.Mesh(new THREE.BoxGeometry(0.4658, 0.3043, 0.3503), cardMat);
body.name = 'body';
body.position.set(0, 0.1522, 0);
box1.add(body);
const flapSeam = new THREE.Mesh(new THREE.BoxGeometry(0.4558, 0.002, 0.004), edgeMat);
flapSeam.name = 'flapSeam';
flapSeam.position.set(0, 0.3053, 0);
box1.add(flapSeam);
const tapeTop = new THREE.Mesh(new THREE.BoxGeometry(0.4688, 0.0015, 0.05), tapeMat);
tapeTop.name = 'tapeTop';
tapeTop.position.set(0, 0.305, 0);
box1.add(tapeTop);
const tapeEnd = new THREE.Mesh(boxGeo, tapeMat);
tapeEnd.name = 'tapeEnd';
tapeEnd.position.set(0.2337, 0.2693, 0);
box1.add(tapeEnd);
const tapeEnd2 = new THREE.Mesh(boxGeo, tapeMat);
tapeEnd2.name = 'tapeEnd';
tapeEnd2.position.set(-0.2337, 0.2693, 0);
box1.add(tapeEnd2);
const tapeEnd3 = new THREE.Mesh(boxGeo2, tapeMat);
tapeEnd3.name = 'tapeEnd';
tapeEnd3.position.set(0.2337, 0.025, 0);
box1.add(tapeEnd3);
const tapeEnd4 = new THREE.Mesh(boxGeo2, tapeMat);
tapeEnd4.name = 'tapeEnd';
tapeEnd4.position.set(-0.2337, 0.025, 0);
box1.add(tapeEnd4);
const shippingLabel = new THREE.Mesh(new THREE.BoxGeometry(0.1397, 0.0791, 0.002), labelMat);
shippingLabel.name = 'shippingLabel';
shippingLabel.position.set(0.0838, 0.1521, 0.1762);
box1.add(shippingLabel);
const labelText = new THREE.Mesh(new THREE.BoxGeometry(0.0745, 0.006, 0.002), inkMat);
labelText.name = 'labelText';
labelText.position.set(0.0606, 0.1734, 0.1772);
box1.add(labelText);
const labelText2 = new THREE.Mesh(new THREE.BoxGeometry(0.0522, 0.006, 0.002), inkMat);
labelText2.name = 'labelText';
labelText2.position.set(0.0494, 0.1597, 0.1772);
box1.add(labelText2);
const labelText3 = new THREE.Mesh(new THREE.BoxGeometry(0.0633, 0.006, 0.002), inkMat);
labelText3.name = 'labelText';
labelText3.position.set(0.055, 0.146, 0.1772);
box1.add(labelText3);
const labelText4 = new THREE.Mesh(new THREE.BoxGeometry(0.0373, 0.006, 0.002), inkMat);
labelText4.name = 'labelText';
labelText4.position.set(0.0419, 0.1324, 0.1772);
box1.add(labelText4);
const barcode = new THREE.Mesh(new THREE.BoxGeometry(0.0326, 0.0548, 0.002), inkMat);
barcode.name = 'barcode';
barcode.position.set(0.1258, 0.1521, 0.1772);
box1.add(barcode);
const upArrow = new THREE.Mesh(extrudeGeo, inkMat);
upArrow.name = 'upArrow';
upArrow.position.set(0.2339, 0.2191, -0.03);
upArrow.rotation.set(0, deg(90), 0);
box1.add(upArrow);
const upArrow2 = new THREE.Mesh(extrudeGeo, inkMat);
upArrow2.name = 'upArrow';
upArrow2.position.set(0.2339, 0.2191, 0.03);
upArrow2.rotation.set(0, deg(90), 0);
box1.add(upArrow2);
const box2 = new THREE.Group();
box2.name = 'box2';
box2.position.set(-0.0003, 0.3043, -0.0075);
box2.rotation.set(0, deg(5.4241), 0);
boxes.add(box2);
const bottom = new THREE.Mesh(new THREE.BoxGeometry(0.3864, 0.006, 0.3131), cardMat);
bottom.name = 'bottom';
bottom.position.set(0, 0.003, 0);
box2.add(bottom);
const innerFloor = new THREE.Mesh(new THREE.BoxGeometry(0.3744, 0.002, 0.3011), innerMat);
innerFloor.name = 'innerFloor';
innerFloor.position.set(0, 0.007, 0);
box2.add(innerFloor);
const wallFront = new THREE.Mesh(boxGeo3, cardMat);
wallFront.name = 'wallFront';
wallFront.position.set(0, 0.1265, 0.1535);
box2.add(wallFront);
const wallRight = new THREE.Mesh(boxGeo4, cardMat);
wallRight.name = 'wallRight';
wallRight.position.set(0.1902, 0.1265, 0);
box2.add(wallRight);
const innerWall = new THREE.Mesh(boxGeo5, innerMat);
innerWall.name = 'innerWall';
innerWall.position.set(0, 0.1295, 0.1495);
box2.add(innerWall);
const innerWall2 = new THREE.Mesh(boxGeo6, innerMat);
innerWall2.name = 'innerWall';
innerWall2.position.set(0.1862, 0.1295, 0);
box2.add(innerWall2);
const wallBack = new THREE.Mesh(boxGeo3, cardMat);
wallBack.name = 'wallBack';
wallBack.position.set(0, 0.1265, -0.1535);
box2.add(wallBack);
const wallLeft = new THREE.Mesh(boxGeo4, cardMat);
wallLeft.name = 'wallLeft';
wallLeft.position.set(-0.1902, 0.1265, 0);
box2.add(wallLeft);
const innerWall3 = new THREE.Mesh(boxGeo5, innerMat);
innerWall3.name = 'innerWall';
innerWall3.position.set(0, 0.1295, -0.1495);
box2.add(innerWall3);
const innerWall4 = new THREE.Mesh(boxGeo6, innerMat);
innerWall4.name = 'innerWall';
innerWall4.position.set(-0.1862, 0.1295, 0);
box2.add(innerWall4);
const flapFront = new THREE.Group();
flapFront.name = 'flapFront';
flapFront.position.set(0, 0.2529, 0.1535);
flapFront.rotation.set(deg(58), 0, 0);
box2.add(flapFront);
const flap = new THREE.Mesh(boxGeo7, cardMat);
flap.name = 'flap';
flap.position.set(0, 0.0783, 0);
flapFront.add(flap);
const flapInside = new THREE.Mesh(boxGeo8, innerMat);
flapInside.name = 'flapInside';
flapInside.position.set(0, 0.0783, -0.004);
flapFront.add(flapInside);
const flapBack = new THREE.Group();
flapBack.name = 'flapBack';
flapBack.position.set(0, 0.2529, -0.1535);
flapBack.rotation.set(deg(-34), 0, 0);
box2.add(flapBack);
const flap2 = new THREE.Mesh(boxGeo7, cardMat);
flap2.name = 'flap';
flap2.position.set(0, 0.0783, 0);
flapBack.add(flap2);
const flapInside2 = new THREE.Mesh(boxGeo8, innerMat);
flapInside2.name = 'flapInside';
flapInside2.position.set(0, 0.0783, 0.004);
flapBack.add(flapInside2);
const flapRight = new THREE.Group();
flapRight.name = 'flapRight';
flapRight.position.set(0.1902, 0.2529, 0);
flapRight.rotation.set(0, 0, deg(-66));
box2.add(flapRight);
const flap3 = new THREE.Mesh(boxGeo9, cardMat);
flap3.name = 'flap';
flap3.position.set(0, 0.0783, 0);
flapRight.add(flap3);
const flapInside3 = new THREE.Mesh(boxGeo10, innerMat);
flapInside3.name = 'flapInside';
flapInside3.position.set(-0.004, 0.0783, 0);
flapRight.add(flapInside3);
const flapLeft = new THREE.Group();
flapLeft.name = 'flapLeft';
flapLeft.position.set(-0.1902, 0.2529, 0);
flapLeft.rotation.set(0, 0, deg(42));
box2.add(flapLeft);
const flap4 = new THREE.Mesh(boxGeo9, cardMat);
flap4.name = 'flap';
flap4.position.set(0, 0.0783, 0);
flapLeft.add(flap4);
const flapInside4 = new THREE.Mesh(boxGeo10, innerMat);
flapInside4.name = 'flapInside';
flapInside4.position.set(0.004, 0.0783, 0);
flapLeft.add(flapInside4);
const cutTape = new THREE.Mesh(boxGeo11, tapeMat);
cutTape.name = 'cutTape';
cutTape.position.set(0, 0.2279, 0.1573);
box2.add(cutTape);
const cutTape2 = new THREE.Mesh(boxGeo11, tapeMat);
cutTape2.name = 'cutTape';
cutTape2.position.set(0, 0.2279, -0.1573);
box2.add(cutTape2);
const shippingLabel2 = new THREE.Mesh(new THREE.BoxGeometry(0.1159, 0.0658, 0.002), labelMat);
shippingLabel2.name = 'shippingLabel';
shippingLabel2.position.set(0.0696, 0.1265, 0.1575);
box2.add(shippingLabel2);
const labelText5 = new THREE.Mesh(new THREE.BoxGeometry(0.0618, 0.006, 0.002), inkMat);
labelText5.name = 'labelText';
labelText5.position.set(0.0502, 0.1442, 0.1585);
box2.add(labelText5);
const labelText6 = new THREE.Mesh(new THREE.BoxGeometry(0.0433, 0.006, 0.002), inkMat);
labelText6.name = 'labelText';
labelText6.position.set(0.041, 0.1328, 0.1585);
box2.add(labelText6);
const labelText7 = new THREE.Mesh(new THREE.BoxGeometry(0.0526, 0.006, 0.002), inkMat);
labelText7.name = 'labelText';
labelText7.position.set(0.0456, 0.1214, 0.1585);
box2.add(labelText7);
const labelText8 = new THREE.Mesh(new THREE.BoxGeometry(0.0309, 0.006, 0.002), inkMat);
labelText8.name = 'labelText';
labelText8.position.set(0.0348, 0.11, 0.1585);
box2.add(labelText8);
const barcode2 = new THREE.Mesh(new THREE.BoxGeometry(0.0271, 0.0455, 0.002), inkMat);
barcode2.name = 'barcode';
barcode2.position.set(0.1043, 0.1265, 0.1585);
box2.add(barcode2);
const upArrow3 = new THREE.Mesh(extrudeGeo, inkMat);
upArrow3.name = 'upArrow';
upArrow3.position.set(0.1942, 0.1821, -0.0268);
upArrow3.rotation.set(0, deg(90), 0);
box2.add(upArrow3);
const upArrow4 = new THREE.Mesh(extrudeGeo, inkMat);
upArrow4.name = 'upArrow';
upArrow4.position.set(0.1942, 0.1821, 0.0268);
upArrow4.rotation.set(0, deg(90), 0);
box2.add(upArrow4);
root.traverse((o) => {
if (o.isMesh) {
o.castShadow = true;
o.receiveShadow = true;
}
});
return root;
}
export default createCardboardBox;
Bewertungen & Kommentare
—
Noch keine Bewertungen — gib die erste ab.
5
0
4
0
3
0
2
0
1
0
Melde dich an, um zu bewerten und zu kommentieren.
0 Kommentare
Noch keine Kommentare. Erzähl, wie du dieses Modell genutzt hast oder was besser sein könnte.
Ähnliche Modelle
Gleiche Kategorie oder ähnliche Tags









