sgenoud / replicad

The library to build browser based 3D models with code.
https://replicad.xyz
MIT License
324 stars 38 forks source link

Customizer not appearing? #37

Closed lf94 closed 2 years ago

lf94 commented 2 years ago

For some reason it's just not appearing for me...? Try this:

const defaultParams = {
  outerRingDiameter: 44.0,
  innerRingDiameter: 38.0,
  topThickness: 3.0,
  gripDiameter: 2.0,
  socketDepth: 10.0,
  gripsTotal: 6,
};

const main = ({ sketchCircle, Sketcher, Plane }, {
  outerRingDiameter,
  innerRingDiameter,
  topThickness,
  gripDiameter,
  socketDepth,
  gripsTotal,
}) => {
  const top  = sketchCircle(outerRingDiameter / 2).extrude(topThickness);
  const base = sketchCircle((innerRingDiameter - (gripDiameter / 2)) / 2)
    .loftWith(sketchCircle((innerRingDiameter - (gripDiameter / 2) - 1.0) / 2, new Plane([0, 0, -socketDepth])));
  const baseWithTop = top.fuse(base);
  const withCut = baseWithTop.cut(
    sketchCircle(
      innerRingDiameter / 2 - 2.0,
      new Plane([0, 0, -socketDepth])
    )
    .extrude(socketDepth + topThickness)
  );
  const withTopFillet1 = withCut.fillet(topThickness - 0.01, e => e.containsPoint([0, outerRingDiameter / 2, topThickness]));
  const withTopFillet2 = withTopFillet1.fillet(topThickness / 2, e => e.containsPoint([0, innerRingDiameter / 2 - 2, topThickness]));

  const socket = withTopFillet2;

  const parentRadii = { start: (innerRingDiameter - gripDiameter / 2) / 2, end: ((innerRingDiameter - gripDiameter / 2) - 1.0) / 2 };
  const childRadii = { start: gripDiameter / 2, end: gripDiameter / 2 };

  const grips = getAngles(gripsTotal).map(angle =>
    modelGrip({ sketchCircle, Plane })({ angle, height: socketDepth, parentRadii, childRadii })
  );
  return grips.reduce((acc, s) => acc.fuse(s), socket);
};

const toDegrees = radians => (radians / (Math.PI * 2)) * 360;
const toRadians = angle => (angle / 360) * (Math.PI * 2);

const modelGrip = ({ sketchCircle, Plane }) => ({ angle, height, parentRadii, childRadii }) => {
  const radiusDiff = parentRadii.start - parentRadii.end;

  const parallelAngle = (90 - toDegrees(Math.atan(height / radiusDiff)));
  const grip = sketchCircle(childRadii.start)
  .loftWith(sketchCircle(childRadii.end, new Plane([0, 0, -height])))
  .rotate(parallelAngle, [0,0,0], [Math.cos(toRadians(angle + 90)),Math.sin(toRadians(angle + 90)),0])
  .translate([
    parentRadii.start * Math.cos(toRadians(angle)),
    parentRadii.start * Math.sin(toRadians(angle)),
    0
  ]);
  return grip;
};

const getAngles = pieSlices => new Array(pieSlices).fill(0).map((_, index) => (360 / pieSlices) * index);
lf94 commented 2 years ago

@sgenoud any ideas?

raydeleu commented 2 years ago

I tested this with the bird house example that is on the Replicad.xyz site. Indeed the customizer is not appearing, so I guess the error is not in your code. Strangely enough the customizer does appear if you select the examples directly in the Visualiser. My assumption would be that if you select the example a direct link to the website is opened with a different visualiser. See the images below, the interface looks different.

comparison-visualiser

sgenoud commented 2 years ago

The customiser does not appear in the visualiser, only on shared models (or in the studio gallery). I want to refactor a bit the tools of the visualiser and this should let met have a way to include the customiser. I would like to add the following improvements: