456 tris4,00 × 0,17 × 4,00 m
Use no código
Fazer remix no editorcrosswalk.js · 203 linhas
Módulo ES autocontido — depende apenas do three. Chame a factory e adicione o grupo à sua cena.
/**
* Crosswalk — Codels 3D model library
* License: CC0-1.0 · Units: meters · Y-up · Front: +Z · Origin: center of the base (y = 0)
* Triangles: 456 · Size (W × H × D): 4.00 × 0.17 × 4.00 m
*
* Usage:
* import { createCrosswalk } from './crosswalk.js';
*
* const model = createCrosswalk();
* model.position.set(0, 0, 0);
* scene.add(model);
*/
import * as THREE from 'three';
export function createCrosswalk() {
const root = new THREE.Group();
root.name = 'Crosswalk';
// Materials
const asphaltMat = new THREE.MeshStandardMaterial({ name: 'asphalt', color: 0x41454b, roughness: 0.95, flatShading: true });
const whiteMat = new THREE.MeshStandardMaterial({ name: 'white', color: 0xecebe4, roughness: 0.7, flatShading: true });
const yellowMat = new THREE.MeshStandardMaterial({ name: 'yellow', color: 0xe9b72c, roughness: 0.7, flatShading: true });
const curbMat = new THREE.MeshStandardMaterial({ name: 'curb', color: 0xb4b2ab, roughness: 0.9, flatShading: true });
const paverMat = new THREE.MeshStandardMaterial({ name: 'paver', color: 0x92918b, roughness: 0.95, flatShading: true });
const baseMat = new THREE.MeshStandardMaterial({ name: 'base', color: 0x64635f, roughness: 1, flatShading: true });
const grateMat = new THREE.MeshStandardMaterial({ name: 'grate', color: 0x26292c, roughness: 0.6, metalness: 0.5, flatShading: true });
// Shared geometries
const boxGeo = new THREE.BoxGeometry(0.16, 0.006, 1);
const boxGeo2 = new THREE.BoxGeometry(0.1, 0.006, 1.38);
const boxGeo3 = new THREE.BoxGeometry(0.895, 0.006, 0.08);
const boxGeo4 = new THREE.BoxGeometry(0.11, 0.006, 0.75);
const boxGeo5 = new THREE.BoxGeometry(0.14, 0.165, 4);
const boxGeo6 = new THREE.BoxGeometry(0.51, 0.13, 4);
const boxGeo7 = new THREE.BoxGeometry(0.498, 0.02, 0.988);
const boxGeo8 = new THREE.BoxGeometry(0.35, 0.008, 0.8);
const boxGeo9 = new THREE.BoxGeometry(0.24, 0.006, 0.035);
// Parts
const asphalt = new THREE.Mesh(new THREE.BoxGeometry(2.7, 0.02, 4), asphaltMat);
asphalt.name = 'asphalt';
asphalt.position.set(0, 0.01, 0);
root.add(asphalt);
const zebraStripe = new THREE.Mesh(boxGeo, whiteMat);
zebraStripe.name = 'zebraStripe';
zebraStripe.position.set(-1.2, 0.022, 0);
root.add(zebraStripe);
const zebraStripe2 = new THREE.Mesh(boxGeo, whiteMat);
zebraStripe2.name = 'zebraStripe';
zebraStripe2.position.set(-0.9, 0.022, 0);
root.add(zebraStripe2);
const zebraStripe3 = new THREE.Mesh(boxGeo, whiteMat);
zebraStripe3.name = 'zebraStripe';
zebraStripe3.position.set(-0.6, 0.022, 0);
root.add(zebraStripe3);
const zebraStripe4 = new THREE.Mesh(boxGeo, whiteMat);
zebraStripe4.name = 'zebraStripe';
zebraStripe4.position.set(-0.3, 0.022, 0);
root.add(zebraStripe4);
const zebraStripe5 = new THREE.Mesh(boxGeo, whiteMat);
zebraStripe5.name = 'zebraStripe';
zebraStripe5.position.set(0, 0.022, 0);
root.add(zebraStripe5);
const zebraStripe6 = new THREE.Mesh(boxGeo, whiteMat);
zebraStripe6.name = 'zebraStripe';
zebraStripe6.position.set(0.3, 0.022, 0);
root.add(zebraStripe6);
const zebraStripe7 = new THREE.Mesh(boxGeo, whiteMat);
zebraStripe7.name = 'zebraStripe';
zebraStripe7.position.set(0.6, 0.022, 0);
root.add(zebraStripe7);
const zebraStripe8 = new THREE.Mesh(boxGeo, whiteMat);
zebraStripe8.name = 'zebraStripe';
zebraStripe8.position.set(0.9, 0.022, 0);
root.add(zebraStripe8);
const zebraStripe9 = new THREE.Mesh(boxGeo, whiteMat);
zebraStripe9.name = 'zebraStripe';
zebraStripe9.position.set(1.2, 0.022, 0);
root.add(zebraStripe9);
const edgeLine = new THREE.Mesh(boxGeo2, whiteMat);
edgeLine.name = 'edgeLine';
edgeLine.position.set(-0.93, 0.022, -1.31);
root.add(edgeLine);
const edgeLine2 = new THREE.Mesh(boxGeo2, whiteMat);
edgeLine2.name = 'edgeLine';
edgeLine2.position.set(-0.93, 0.022, 1.31);
root.add(edgeLine2);
const edgeLine3 = new THREE.Mesh(boxGeo2, whiteMat);
edgeLine3.name = 'edgeLine';
edgeLine3.position.set(0.93, 0.022, -1.31);
root.add(edgeLine3);
const edgeLine4 = new THREE.Mesh(boxGeo2, whiteMat);
edgeLine4.name = 'edgeLine';
edgeLine4.position.set(0.93, 0.022, 1.31);
root.add(edgeLine4);
const stopLine = new THREE.Mesh(boxGeo3, whiteMat);
stopLine.name = 'stopLine';
stopLine.position.set(-0.5325, 0.022, -0.79);
root.add(stopLine);
const stopLine2 = new THREE.Mesh(boxGeo3, whiteMat);
stopLine2.name = 'stopLine';
stopLine2.position.set(0.5325, 0.022, 0.79);
root.add(stopLine2);
const centerDash = new THREE.Mesh(boxGeo4, yellowMat);
centerDash.name = 'centerDash';
centerDash.position.set(0, 0.022, -1.125);
root.add(centerDash);
const centerDash2 = new THREE.Mesh(boxGeo4, yellowMat);
centerDash2.name = 'centerDash';
centerDash2.position.set(0, 0.022, 1.125);
root.add(centerDash2);
const curb = new THREE.Mesh(boxGeo5, curbMat);
curb.name = 'curb';
curb.position.set(-1.42, 0.0825, 0);
root.add(curb);
const sidewalkBase = new THREE.Mesh(boxGeo6, baseMat);
sidewalkBase.name = 'sidewalkBase';
sidewalkBase.position.set(-1.745, 0.065, 0);
root.add(sidewalkBase);
const paver = new THREE.Mesh(boxGeo7, paverMat);
paver.name = 'paver';
paver.position.set(-1.745, 0.14, -1.5);
root.add(paver);
const paver2 = new THREE.Mesh(boxGeo7, paverMat);
paver2.name = 'paver';
paver2.position.set(-1.745, 0.14, -0.5);
root.add(paver2);
const paver3 = new THREE.Mesh(boxGeo7, paverMat);
paver3.name = 'paver';
paver3.position.set(-1.745, 0.14, 0.5);
root.add(paver3);
const paver4 = new THREE.Mesh(boxGeo7, paverMat);
paver4.name = 'paver';
paver4.position.set(-1.745, 0.14, 1.5);
root.add(paver4);
const tactilePad = new THREE.Mesh(boxGeo8, yellowMat);
tactilePad.name = 'tactilePad';
tactilePad.position.set(-1.74, 0.152, 0);
root.add(tactilePad);
const curb2 = new THREE.Mesh(boxGeo5, curbMat);
curb2.name = 'curb';
curb2.position.set(1.42, 0.0825, 0);
root.add(curb2);
const sidewalkBase2 = new THREE.Mesh(boxGeo6, baseMat);
sidewalkBase2.name = 'sidewalkBase';
sidewalkBase2.position.set(1.745, 0.065, 0);
root.add(sidewalkBase2);
const paver5 = new THREE.Mesh(boxGeo7, paverMat);
paver5.name = 'paver';
paver5.position.set(1.745, 0.14, -1.5);
root.add(paver5);
const paver6 = new THREE.Mesh(boxGeo7, paverMat);
paver6.name = 'paver';
paver6.position.set(1.745, 0.14, -0.5);
root.add(paver6);
const paver7 = new THREE.Mesh(boxGeo7, paverMat);
paver7.name = 'paver';
paver7.position.set(1.745, 0.14, 0.5);
root.add(paver7);
const paver8 = new THREE.Mesh(boxGeo7, paverMat);
paver8.name = 'paver';
paver8.position.set(1.745, 0.14, 1.5);
root.add(paver8);
const tactilePad2 = new THREE.Mesh(boxGeo8, yellowMat);
tactilePad2.name = 'tactilePad';
tactilePad2.position.set(1.74, 0.152, 0);
root.add(tactilePad2);
const drainGrate = new THREE.Mesh(new THREE.BoxGeometry(0.3, 0.012, 0.6), grateMat);
drainGrate.name = 'drainGrate';
drainGrate.position.set(1.17, 0.022, 1.35);
root.add(drainGrate);
const grateBar = new THREE.Mesh(boxGeo9, baseMat);
grateBar.name = 'grateBar';
grateBar.position.set(1.17, 0.028, 1.13);
root.add(grateBar);
const grateBar2 = new THREE.Mesh(boxGeo9, baseMat);
grateBar2.name = 'grateBar';
grateBar2.position.set(1.17, 0.028, 1.24);
root.add(grateBar2);
const grateBar3 = new THREE.Mesh(boxGeo9, baseMat);
grateBar3.name = 'grateBar';
grateBar3.position.set(1.17, 0.028, 1.35);
root.add(grateBar3);
const grateBar4 = new THREE.Mesh(boxGeo9, baseMat);
grateBar4.name = 'grateBar';
grateBar4.position.set(1.17, 0.028, 1.46);
root.add(grateBar4);
const grateBar5 = new THREE.Mesh(boxGeo9, baseMat);
grateBar5.name = 'grateBar';
grateBar5.position.set(1.17, 0.028, 1.57);
root.add(grateBar5);
root.traverse((o) => {
if (o.isMesh) {
o.castShadow = true;
o.receiveShadow = true;
}
});
return root;
}
export default createCrosswalk;
Avaliações e comentários
0 comentário
Nenhum comentário ainda. Conte como você usou este modelo ou o que poderia melhorar.
Modelos relacionados
Mesma categoria ou tags parecidas









