Skip to content

Latest commit

 

History

History
57 lines (33 loc) · 1.82 KB

README.md

File metadata and controls

57 lines (33 loc) · 1.82 KB
Raw

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