Skip to content

omarkawach/threejs_grid

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Three.js (r121) Starter Guide

This repo demonstrates my learning process in preperation for the October 2020 online AEC Hackathon. I experimented with scenes, cameras, renders, geometries, groups, etc. Unfortunately, AutoDesk Forge Viewer v7 restricts users to Three.js r71 (outdated), which means some of the practice won't apply directly.

Getting Started

Installations

Quickstart

Task: Visualize group of Point Cloud Box Geometries

  • Open the repo in VS Code
  • At the bottom right corner, select "Go Live"
  • You should see the following display:

Development

For the sake of learning how to translate objects onto specific x,y,z positions, a grid helper is in each file. Also, I've chosen BoxGeoemtry for each file for consistency, but you can change to any geometry you like. Also, be aware that BoxGeometry is less performance friendly than BoxBufferGeometry when rendering. You can convert between the two types using .fromGeometry and .fromBufferGeometry (source). The code in this repo does not explore such actions.

/index.js

Material:

  • THREE.PointsMaterial(params)

Output:

/boxesInGrid.js

Material:

  • THREE.MeshBasicMaterial(params)

Output:

/particlesInGridScrap.js

Material: - THREE.MeshBasicMaterial(params) - THREE.PointsMaterial(params)

Output:

Resources

JavaScript

Three.js

About

A starter guide for three.js r121 to play with geometries

Topics

Resources

License

Stars

Watchers

Forks