Creating a Hipped Roof from a shape

Beakerboy · June 13, 2025, 9:47pm

I have just finalized a geometry that I call HippedGeometry. If you provide an outline of a building, it will produce the hipped roof using a straight skeleton algorithm. It has one external dependency, but I am in the process of migrating it all to use threejs objects, like THREE.Vector2 instead of it using its own vector implementation.

I’d love any feedback or advice on improvements.

github.com/Beakerboy/Threejs-Geometries

src/HippedGeometry.js

833a688ab

import {
	BufferGeometry,
	BufferAttribute,
	Vector2,
	Shape,
	ShapeUtils,
} from 'three';
import { SkeletonBuilder } from 'straight-skeleton';

class HippedGeometry extends BufferGeometry {

	constructor( shape = new Shape( [ new Vector2( 0.5, 0.5 ), new Vector2( - 0.5, 0.5 ), new Vector2( - 0.5, - 0.5 ), new Vector2( 0.5, - 0.5 ) ] ), options = {} ) {

		super();
		this.type = 'HippedGeometry';
		this.parameters = {
			shape: shape,
			options: options,
		};
		/** {number} The max depth of the geometry */

This file has been truncated. show original

vielzutun.ch · June 14, 2025, 3:37am

That’s pretty cool! I’m adding a link to your demo:

As a suggestion to better appreciate the details of your work, I’d like to see an “Animation On/Off” toggle in the UI, and maybe a selection of canonical ortho views (Top, Front, Side).

Topic		Replies	Views
Working on the 3d model for the first time need help Questions geometry	6	431	July 30, 2020
Interactive building with editable dimensions? Questions modeling	4	2373	November 29, 2018
Triangulation process of 3d mesh Questions geometry , mesh , triangulation	3	1662	February 24, 2023
Is there an implementation of a straight skeleton algorithm with Three.JS Questions geometry	4	670	March 11, 2024
Showing off some custom geometries Showcase geometry	0	609	May 7, 2022

Creating a Hipped Roof from a shape

Related topics