116 Tris2,08 × 1,54 × 4,01 m
Im Code verwenden
Im Editor remixenramp.js · 96 Zeilen
Eigenständiges ES-Modul — hängt nur von three ab. Ruf die Factory auf und füge die Gruppe deiner Szene hinzu.
/**
* Ramp — Codels 3D model library
* License: CC0-1.0 · Units: meters · Y-up · Front: +Z · Origin: center of the base (y = 0)
* Triangles: 116 · Size (W × H × D): 2.08 × 1.54 × 4.01 m
*
* Usage:
* import { createRamp } from './ramp.js';
*
* const model = createRamp();
* 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 createRamp() {
const root = new THREE.Group();
root.name = 'Ramp';
// Materials
const bodyMat = new THREE.MeshStandardMaterial({ name: 'body', color: 0x4a8ee6, roughness: 0.6, flatShading: true });
const trimMat = new THREE.MeshStandardMaterial({ name: 'trim', color: 0x305991, roughness: 0.6, flatShading: true });
const stripeMat = new THREE.MeshStandardMaterial({ name: 'stripe', color: 0xffd23f, roughness: 0.5, flatShading: true });
// Shared geometries
const extrudeGeo = extrude([[-2, 0], [2.01, 0], [2.01, 1.54], [1.75, 1.54], [-2, 0.04]], 0.05);
const boxGeo = new THREE.BoxGeometry(1.72, 0.02, 0.22);
// Parts
const wedge = new THREE.Mesh(extrude([[-2, 0], [2, 0], [2, 1.5], [1.75, 1.5]], 2), bodyMat);
wedge.name = 'wedge';
wedge.rotation.set(0, deg(90), 0);
root.add(wedge);
const railLeft = new THREE.Mesh(extrudeGeo, trimMat);
railLeft.name = 'railLeft';
railLeft.position.set(-1.015, 0, 0);
railLeft.rotation.set(0, deg(90), 0);
root.add(railLeft);
const railRight = new THREE.Mesh(extrudeGeo, trimMat);
railRight.name = 'railRight';
railRight.position.set(1.015, 0, 0);
railRight.rotation.set(0, deg(90), 0);
root.add(railRight);
const stripe1 = new THREE.Mesh(boxGeo, stripeMat);
stripe1.name = 'stripe1';
stripe1.position.set(0, 0.2234, 1.4576);
stripe1.rotation.set(deg(21.8014), 0, 0);
root.add(stripe1);
const stripe2 = new THREE.Mesh(boxGeo, stripeMat);
stripe2.name = 'stripe2';
stripe2.position.set(0, 0.4363, 0.9255);
stripe2.rotation.set(deg(21.8014), 0, 0);
root.add(stripe2);
const stripe3 = new THREE.Mesh(boxGeo, stripeMat);
stripe3.name = 'stripe3';
stripe3.position.set(0, 0.6491, 0.3933);
stripe3.rotation.set(deg(21.8014), 0, 0);
root.add(stripe3);
const stripe4 = new THREE.Mesh(boxGeo, stripeMat);
stripe4.name = 'stripe4';
stripe4.position.set(0, 0.862, -0.1388);
stripe4.rotation.set(deg(21.8014), 0, 0);
root.add(stripe4);
const stripe5 = new THREE.Mesh(boxGeo, stripeMat);
stripe5.name = 'stripe5';
stripe5.position.set(0, 1.0749, -0.671);
stripe5.rotation.set(deg(21.8014), 0, 0);
root.add(stripe5);
const stripe6 = new THREE.Mesh(boxGeo, stripeMat);
stripe6.name = 'stripe6';
stripe6.position.set(0, 1.2877, -1.2032);
stripe6.rotation.set(deg(21.8014), 0, 0);
root.add(stripe6);
root.traverse((o) => {
if (o.isMesh) {
o.castShadow = true;
o.receiveShadow = true;
}
});
return root;
}
export default createRamp;
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









