Three js : Drag & Snap Tutorial

Table of contents

Part 1 - Introduction

Part 2 - Create basic scene

Part 3 - Let's add controls: OrbitControls

Part 4 - Let's add controls: DragControls w/custom plane

Part 5 - Instantiate objects with RayCasting

Part 6 (Final) - Plug & snap objects

Project Setup

# install dependencies
$ yarn install

# serve with hot reload at localhost:3000
$ yarn dev

Credit

Inspiration from osorina's 3D Headphones Configurator.

Libraries & Frameworks:

Nuxt.js web framework.
Vuetify UI framework.
Three.js web 3D library.