iPhone Case Creator

What does it do : Create iPhone case with Japanese traditional pattern

My application is iPhone case creator. The pattern is a traditional Japanese pattern called Asanoha coming from hemp leaf.

Asanoha pattern

How does it work : Create 3D geometry with parameters. User can select 2D or 3D pattern.

Who is it intended for : For who using iPhone and interested in customizing own iPhone case.

Parameters are color, rotation, size, and height. It is for people who want to customize their own iPhone case design.


This is my app!!

Code Overview

Html : Html is simple. Mainly just for inputs.

Java script for GH definition

Java script is mainly loading the Grasshopper definition, the value of the inputs, detecting changes, and calling an app server to execute the definition.

Java script for three.js

The application is designed to run on three.js, so it also needs to be configured for that purpose.

Rhino geometry coming from grasshopper should be converted into three.js objects.

Main Challenges for Creating App

The main challenge for creating app was getting the Grasshopper definition to work smoothly on the web.

During the development phase, if a single component took 5 seconds to define, it would time out when loaded in the browser and an error was observed.

Big issue was happening at Boolean cutter

Further Possibilities

  1. By placing the Grasshopper file once on the server, it will automatically generate the html file. From there, it was quite difficult to make the application the way I wanted it. Even people who can’t write code can easily proceed up to the halfway point, but there seemed to be room for improvement in the workflow from there.
  2. It is a technology that can connect data and objects more deeply, not only through services on the browser, but also through applications such as 3D printers.

A part that I couldn’t really see

We would make this button for 3d printing!



iPhone Case Creator is a project of IAAC, Institute for Advanced Architecture of Catalonia developed in the Master In Advanced Computation For Architecture & Design 2021/22 by Student: Takeaki Sakakibara | Faculty: David Andrés León and Hesham Shawqy