Creating Custom CAD Tools on the Web with ThreeJS

Rate this content
Bookmark

3d content creation tools don't have to be complex- sometimes what you need is a special-purpose tool that solves a specific problem and gives you exactly the model you need. Building such tools using modern web technologies is easier than you think. In this talk, we'll walk through the basics of writing a custom web-based tool that can export 3d models.

Adrian Herbez
Adrian Herbez
8 min
28 Sep, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Today we're going to be talking about creating custom CAD tools on the web with 3JS. We'll explore the reasons why you should make web-based tools, including their novice-friendly nature and their suitability for user-generated content. We'll learn how to create custom and parametric geometry using Three.js, set up geometry and material in Three.js, and improve visibility by adding normals to the geometry.

Available in Español

1. Introduction to Creating Custom CAD Tools with 3JS

Short description:

Today we're going to be talking about creating custom CAD tools on the web with 3JS. We'll explore the reasons why you should make web-based tools, including their novice-friendly nature and their suitability for user-generated content. I'll also share an example of a tool I made using Three.js, a fantastic library that simplifies the process of creating 3D models.

♪♪ Hi, everybody. My name is Adrian Herbez and today we're going to be talking about creating custom CAD tools on the web with 3JS. I'm a web developer and a game developer and I also make toys, 3D printed stuff mainly for action videos. As such, I've used a lot of 3D tools over the years and I generally love them all except they're really complicated. So I think you should make some new ones.

Now why would you want to do that? There's a lot of reasons, but the most significant ones to me are that you can make truly novice-friendly tools and you can make tools that are great for user-generated content. It's also not as hard as you might think. So why make a web-based tool? Well, because the web's the best platform. It's easy to distribute, it's inherently cross-platform, and again, this all goes to being very approachable for novices.

So here's an example of the kind of thing I mean. I wanted to make it easy to make Reebly's, sci-fi panels of stuff, and so I made this tool that runs in a browser and instead of moving points or vertices or polygons around, you just draw a rectangle on the surface of the base shape and you can add a parametric feature of a few different types. You can add extrusions, you can add arrays of buttons, you can add handles of the type you might see on rack-mounted equipment, and you can add dials. And none of this requires any conventional 3D modeling skills, so it's very approachable. And I made this with Three.js. Three.js is a fantastic library. It's a wrapper around WebGL. It's got a lot of great qualities. It's been around for about 13 years, so it has a really rich ecosystem. It works well with React and other frameworks. And I, at least personally, feel it has a great level of abstraction.

2. Creating a Cube and Defining Geometry

Short description:

Today we're gonna make a cube and learn how to create custom and parametric geometry using Three.js. Geometry consists of vertices and faces, which allow us to build shapes. We'll start by ordering the vertices and specifying their positions. Then, we'll set up our vertex data using a one-dimensional array. Finally, we'll define the faces by referencing the vertices in the desired order.

So today we're gonna make a cube and we're gonna take this sort of slightly roundabout way to get there, but in doing so, we'll learn everything we need to know to make custom and parametric geometry of your own.

But before that, there is a little bit of boilerplate. So I know this code is probably too small to see. I'll have a link to a GitHub repo at the end, but what I wanna impress upon you is this is all that you need to set up a scene in Three.js. There's only about 30 lines here. It's all very straightforward.

So having gotten that out of the way, let's talk about geometry. So geometry can contain a lot of data, but the two most important types are vertices, so points that are positioned in 3D space, and then faces, surfaces that link those points together. There's a lot of other stuff that we won't have time to talk about today, but with vertices and faces we can make geometry.

So here's a cube. Let's take away its skin, and we'll see that we have eight points. So let's start by giving those points an order. So we'll just give them some numbers, zero to seven, to lay them out in some order. And then once we've done that, let's specify where they are in space. So to keep it simple, we're just using negative ones and ones, that'll give us a two unit cube centered at the origin, which is great. So having done all that, we can specify our vertex data. So to do that, I'm just gonna set up an array and I'm gonna push numbers into it for the X, Y, and Z coordinates of each vertex. Note that this is a one dimensional array. I'm not pushing a full set of a triplet at a time, and this just ends up being one dimensional, which is important later.

So that's our vertex data. Now we're ready to set up our faces. So faces are specified by giving a sequence of vertices in order. So what we do is instead of having actual data, we just reference the data that already exists in the vertex list. So the way the order in which we specify the vertices matters a lot. So in 3D graphics, a big part of getting things to be performant is to not draw things you don't need to see. And one of the ways that we do that is by only drawing one side of faces by default. So faces only really exist from one direction. And the way we specify which direction that is is the order in which we specify the vertices. So it's important that we specify our vertices in counter-clockwise order. So this blue triangle, for example, involves the vertices zero, four, and three.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Optimizing HTML5 Games: 10 Years of Learnings
JS GameDev Summit 2022JS GameDev Summit 2022
33 min
Optimizing HTML5 Games: 10 Years of Learnings
Top Content
The open source PlayCanvas game engine is built specifically for the browser, incorporating 10 years of learnings about optimization. In this talk, you will discover the secret sauce that enables PlayCanvas to generate games with lightning fast load times and rock solid frame rates.
Building Fun Experiments with WebXR & Babylon.js
JS GameDev Summit 2022JS GameDev Summit 2022
33 min
Building Fun Experiments with WebXR & Babylon.js
Top Content
During this session, we’ll see a couple of demos of what you can do using WebXR, with Babylon.js. From VR audio experiments, to casual gaming in VR on an arcade machine up to more serious usage to create new ways of collaboration using either AR or VR, you should have a pretty good understanding of what you can do today.
Check the article as well to see the full content including code samples: article. 
Making Awesome Games with LittleJS
JS GameDev Summit 2022JS GameDev Summit 2022
34 min
Making Awesome Games with LittleJS
LittleJS is a super lightweight game engine that is easy to use and powerfully fast. The developer will talk about why he made it, what it does, and how you can use it to create your own games. The talk will include a demonstration of how to build a small game from scratch with LittleJS.
How Not to Build a Video Game
React Summit 2023React Summit 2023
32 min
How Not to Build a Video Game
In this talk we'll delve into the art of creating something meaningful and fulfilling. Through the lens of my own journey of rediscovering my passion for coding and building a video game from the ground up with JavaScript and React, we will explore the trade-offs between easy solutions and fast performance. You will gain valuable insights into rapid prototyping, test infrastructure, and a range of CSS tricks that can be applied to both game development and your day-to-day work.
Boost the Performance of Your WebGL Unity Games!
JS GameDev Summit 2023JS GameDev Summit 2023
7 min
Boost the Performance of Your WebGL Unity Games!
Unity, when deployed on the web, faces three critical challenges: build size, memory usage, and overall performance. This lecture delves deep into advanced optimization techniques to help you address each of these issues. Attendees will gain insights into:
- Effective strategies for optimizing textures, audio, and models.- A detailed analysis of our ASTC experimentation with Unity, shedding light on the unexpected results despite Unity's claims.- A comprehensive guide to Unity's memory profiling tool and its implications.- An exploration of lesser-known Unity settings that remain underutilized by many developers.
Additionally, we'll introduce our proprietary tool designed specifically for Unity optimization. We will also showcase CrazyGames' developer dashboard, our platform that enables developers to monitor and enhance the performance of their web-based games seamlessly. 
Join us to equip yourself with the latest strategies and tools to elevate your Unity web gaming projects.

Workshops on related topic

Make a Game With PlayCanvas in 2 Hours
JSNation 2023JSNation 2023
116 min
Make a Game With PlayCanvas in 2 Hours
Featured WorkshopFree
Steven Yau
Steven Yau
In this workshop, we’ll build a game using the PlayCanvas WebGL engine from start to finish. From development to publishing, we’ll cover the most crucial features such as scripting, UI creation and much more.
Table of the content:- Introduction- Intro to PlayCanvas- What we will be building- Adding a character model and animation- Making the character move with scripts- 'Fake' running- Adding obstacles- Detecting collisions- Adding a score counter- Game over and restarting- Wrap up!- Questions
Workshop levelFamiliarity with game engines and game development aspects is recommended, but not required.
PlayCanvas End-to-End : the quick version
JS GameDev Summit 2022JS GameDev Summit 2022
121 min
PlayCanvas End-to-End : the quick version
Top Content
WorkshopFree
João Ruschel
João Ruschel
In this workshop, we’ll build a complete game using the PlayCanvas engine while learning the best practices for project management. From development to publishing, we’ll cover the most crucial features such as asset management, scripting, audio, debugging, and much more.
Introduction to WebXR with Babylon.js
JS GameDev Summit 2022JS GameDev Summit 2022
86 min
Introduction to WebXR with Babylon.js
Workshop
Gustavo Cordido
Gustavo Cordido
In this workshop, we'll introduce you to the core concepts of building Mixed Reality experiences with WebXR and Balon.js.
You'll learn the following:- How to add 3D mesh objects and buttons to a scene- How to use procedural textures- How to add actions to objects- How to take advantage of the default Cross Reality (XR) experience- How to add physics to a scene
For the first project in this workshop, you'll create an interactive Mixed Reality experience that'll display basketball player stats to fans and coaches. For the second project in this workshop, you'll create a voice activated WebXR app using Balon.js and Azure Speech-to-Text. You'll then deploy the web app using Static Website Hosting provided Azure Blob Storage.