472 tris0,70 × 0,55 × 0,04 m
Use no código
Fazer remix no editorpicture-frame.js · 176 linhas
Módulo ES autocontido — depende apenas do three. Chame a factory e adicione o grupo à sua cena.
/**
* Picture Frame — Codels 3D model library
* License: CC0-1.0 · Units: meters · Y-up · Front: +Z · Origin: wall mount point (back of the model on the wall plane z = 0)
* Triangles: 472 · Size (W × H × D): 0.70 × 0.55 × 0.04 m
*
* Usage:
* import { createPictureFrame } from './picture-frame.js';
*
* const model = createPictureFrame();
* 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 createPictureFrame() {
const root = new THREE.Group();
root.name = 'PictureFrame';
// Materials
const frameMat = new THREE.MeshStandardMaterial({ name: 'frame', color: 0x6b4528, roughness: 0.65, flatShading: true });
const goldMat = new THREE.MeshStandardMaterial({ name: 'gold', color: 0xc9a043, roughness: 0.35, metalness: 0.7, flatShading: true });
const skyMat = new THREE.MeshStandardMaterial({ name: 'sky', color: 0x9ccbe8, roughness: 0.9, flatShading: true });
const glowMat = new THREE.MeshStandardMaterial({ name: 'glow', color: 0xfff1a6, roughness: 0.8, flatShading: true });
const lightMat = new THREE.MeshStandardMaterial({ name: 'light', color: 0xffffff, roughness: 0.85, flatShading: true });
const farMat = new THREE.MeshStandardMaterial({ name: 'far', color: 0x9aa6c0, roughness: 0.9, flatShading: true });
const mountainMat = new THREE.MeshStandardMaterial({ name: 'mountain', color: 0x6c7a96, roughness: 0.9, flatShading: true });
const hillMat = new THREE.MeshStandardMaterial({ name: 'hill', color: 0x7cab4c, roughness: 0.9, flatShading: true });
const waterMat = new THREE.MeshStandardMaterial({ name: 'water', color: 0x4f93c9, roughness: 0.5, flatShading: true });
const treeMat = new THREE.MeshStandardMaterial({ name: 'tree', color: 0x2f5e33, roughness: 0.9, flatShading: true });
// Parts
const frame = new THREE.Mesh(extrude([[-0.342, -0.265], [0.342, -0.265], [0.342, 0.265], [-0.342, 0.265]], 0.022, [[[-0.287, -0.21], [0.287, -0.21], [0.287, 0.21], [-0.287, 0.21]]], [0.007, 0.008, 1]), frameMat);
frame.name = 'frame';
frame.position.set(0, 0, 0.018);
root.add(frame);
const lip = new THREE.Mesh(extrude([[-0.283, -0.206], [0.283, -0.206], [0.283, 0.206], [-0.283, 0.206]], 0.004, [[[-0.267, -0.19], [0.267, -0.19], [0.267, 0.19], [-0.267, 0.19]]]), goldMat);
lip.name = 'lip';
lip.position.set(0, 0, 0.019);
root.add(lip);
const painting = new THREE.Group();
painting.name = 'painting';
painting.position.set(0, 0, 0.006);
root.add(painting);
const canvas = new THREE.Mesh(new THREE.BoxGeometry(0.558, 0.404, 0.008), skyMat);
canvas.name = 'canvas';
canvas.position.set(0, 0, -0.002);
painting.add(canvas);
const sun = new THREE.Mesh(new THREE.CylinderGeometry(0.0285, 0.0285, 0.001, 10), glowMat);
sun.name = 'sun';
sun.position.set(0.1335, 0.0988, 0.0025);
sun.rotation.set(deg(90), 0, 0);
painting.add(sun);
const cloud = new THREE.Mesh(new THREE.BoxGeometry(0.0961, 0.0152, 0.001), lightMat);
cloud.name = 'cloud';
cloud.position.set(-0.1335, 0.1178, 0.003);
painting.add(cloud);
const cloud2 = new THREE.Mesh(new THREE.BoxGeometry(0.0481, 0.0285, 0.001), lightMat);
cloud2.name = 'cloud';
cloud2.position.set(-0.1442, 0.1254, 0.003);
painting.add(cloud2);
const cloud3 = new THREE.Mesh(new THREE.BoxGeometry(0.0673, 0.0106, 0.001), lightMat);
cloud3.name = 'cloud';
cloud3.position.set(0.032, 0.1482, 0.003);
painting.add(cloud3);
const cloud4 = new THREE.Mesh(new THREE.BoxGeometry(0.0336, 0.0199, 0.001), lightMat);
cloud4.name = 'cloud';
cloud4.position.set(0.0246, 0.1535, 0.003);
painting.add(cloud4);
const farRange = new THREE.Mesh(extrude([[-0.279, -0.0418], [-0.279, 0.0228], [-0.1869, 0.057], [-0.1335, 0.0342], [-0.0534, 0.0817], [0.0267, 0.038], [0.0934, 0.095], [0.1655, 0.0494], [0.2243, 0.0684], [0.279, 0.0342], [0.279, -0.0418]], 0.001), farMat);
farRange.name = 'farRange';
farRange.position.set(0, 0, 0.0035);
painting.add(farRange);
const farSnow = new THREE.Mesh(extrude([[-0.0534, 0.0817], [-0.0774, 0.0675], [-0.0534, 0.0735], [-0.0294, 0.0686]], 0.001), lightMat);
farSnow.name = 'farSnow';
farSnow.position.set(0, 0, 0.0042);
painting.add(farSnow);
const farSnow2 = new THREE.Mesh(extrude([[0.0934, 0.095], [0.0734, 0.0779], [0.0934, 0.0858], [0.1151, 0.0813]], 0.001), lightMat);
farSnow2.name = 'farSnow';
farSnow2.position.set(0, 0, 0.0042);
painting.add(farSnow2);
const nearRange = new THREE.Mesh(extrude([[-0.279, -0.0418], [-0.279, 0], [-0.1655, 0.0722], [-0.1121, 0.0285], [-0.0694, 0.0494], [0.016, -0.0418]], 0.001), mountainMat);
nearRange.name = 'nearRange';
nearRange.position.set(0, 0, 0.005);
painting.add(nearRange);
const nearRange2 = new THREE.Mesh(extrude([[0.0748, -0.0418], [0.1602, 0.0456], [0.2083, 0.0152], [0.279, 0.0342], [0.279, -0.0418]], 0.001), mountainMat);
nearRange2.name = 'nearRange';
nearRange2.position.set(0, 0, 0.005);
painting.add(nearRange2);
const nearSnow = new THREE.Mesh(extrude([[-0.1655, 0.0722], [-0.2041, 0.0477], [-0.1655, 0.0604], [-0.1474, 0.0573]], 0.001), lightMat);
nearSnow.name = 'nearSnow';
nearSnow.position.set(0, 0, 0.0058);
painting.add(nearSnow);
const nearSnow2 = new THREE.Mesh(extrude([[0.1602, 0.0456], [0.1329, 0.0176], [0.1602, 0.0343], [0.1756, 0.0359]], 0.001), lightMat);
nearSnow2.name = 'nearSnow';
nearSnow2.position.set(0, 0, 0.0058);
painting.add(nearSnow2);
const hills = new THREE.Mesh(extrude([[-0.279, -0.202], [0.279, -0.202], [0.279, -0.0152], [0.1976, 0], [0.1201, -0.0209], [0.0374, 0.0076], [-0.0534, -0.0247], [-0.1388, -0.0038], [-0.279, -0.019]], 0.001), hillMat);
hills.name = 'hills';
hills.position.set(0, 0, 0.007);
painting.add(hills);
const lake = new THREE.Mesh(extrude([[0.0053, -0.1064], [0.1495, -0.1178], [0.1976, -0.0836], [0.1068, -0.0608], [0.0214, -0.0722]], 0.001), waterMat);
lake.name = 'lake';
lake.position.set(0, 0, 0.008);
painting.add(lake);
const glint = new THREE.Mesh(new THREE.BoxGeometry(0.0481, 0.0023, 0.001), lightMat);
glint.name = 'glint';
glint.position.set(0.0854, -0.0836, 0.009);
painting.add(glint);
const glint2 = new THREE.Mesh(new THREE.BoxGeometry(0.0267, 0.0023, 0.001), lightMat);
glint2.name = 'glint';
glint2.position.set(0.1335, -0.0988, 0.009);
painting.add(glint2);
const pine = new THREE.Mesh(extrude([[-0.2105, -0.0646], [-0.174, -0.0646], [-0.1922, -0.0293]], 0.001), treeMat);
pine.name = 'pine';
pine.position.set(0, 0, 0.0095);
painting.add(pine);
const pine2 = new THREE.Mesh(extrude([[-0.2059, -0.0429], [-0.1786, -0.0429], [-0.1922, -0.0076]], 0.001), treeMat);
pine2.name = 'pine';
pine2.position.set(0, 0, 0.0095);
painting.add(pine2);
const pine3 = new THREE.Mesh(extrude([[-0.1726, -0.095], [-0.1264, -0.095], [-0.1495, -0.0502]], 0.001), treeMat);
pine3.name = 'pine';
pine3.position.set(0, 0, 0.0095);
painting.add(pine3);
const pine4 = new THREE.Mesh(extrude([[-0.1668, -0.0676], [-0.1322, -0.0676], [-0.1495, -0.0228]], 0.001), treeMat);
pine4.name = 'pine';
pine4.position.set(0, 0, 0.0095);
painting.add(pine4);
const pine5 = new THREE.Mesh(extrude([[-0.251, -0.1292], [-0.1975, -0.1292], [-0.2243, -0.0774]], 0.001), treeMat);
pine5.name = 'pine';
pine5.position.set(0, 0, 0.0095);
painting.add(pine5);
const pine6 = new THREE.Mesh(extrude([[-0.2443, -0.0974], [-0.2042, -0.0974], [-0.2243, -0.0456]], 0.001), treeMat);
pine6.name = 'pine';
pine6.position.set(0, 0, 0.0095);
painting.add(pine6);
const pine7 = new THREE.Mesh(extrude([[-0.1042, -0.057], [-0.0774, -0.057], [-0.0908, -0.0311]], 0.001), treeMat);
pine7.name = 'pine';
pine7.position.set(0, 0, 0.0095);
painting.add(pine7);
const pine8 = new THREE.Mesh(extrude([[-0.1008, -0.0411], [-0.0807, -0.0411], [-0.0908, -0.0152]], 0.001), treeMat);
pine8.name = 'pine';
pine8.position.set(0, 0, 0.0095);
painting.add(pine8);
const pine9 = new THREE.Mesh(extrude([[0.2138, -0.0532], [0.2454, -0.0532], [0.2296, -0.0226]], 0.001), treeMat);
pine9.name = 'pine';
pine9.position.set(0, 0, 0.0095);
painting.add(pine9);
const pine10 = new THREE.Mesh(extrude([[0.2178, -0.0344], [0.2415, -0.0344], [0.2296, -0.0038]], 0.001), treeMat);
pine10.name = 'pine';
pine10.position.set(0, 0, 0.0095);
painting.add(pine10);
root.traverse((o) => {
if (o.isMesh) {
o.castShadow = true;
o.receiveShadow = true;
}
});
return root;
}
export default createPictureFrame;
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









