0

In my .ts file, I am importing three classes. But they're all done in different ways.

import * as THREE from 'three'
import Stats from 'three/examples/jsm/libs/stats.module'
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls'

I come from a c#/lua background, and don't understand what the differences are here. My questions are:

  1. How can I know which import style to use?
  2. What does the * do, and why doesn't that first line need any path -- 'three' is not in my root directory.
  3. Why does OrbitControls need to be inside an object? I can construct it like new OrbitControls(camera, renderer.domElement );, but I don't understand why. Does it add OrbitControls to the global space? If so, why is the { } needed in the import line?

I understand the Stats import -- that seems normal. It's returning a Stats object, and there's a relative path there.

Catlard
  • 853
  • 6
  • 13
  • 30

1 Answers1

2

Ok so in general if you do this:

// in styles.js
const RED = "red"
export const PINK = "pink"
const BLUE = "blue"
export {
  BLUE
}
export default RED


//in other file
import lalal (it doesnt matter how you call it if its the default export),{BLUE, PINK as REALY_PINK (renaming the exported var) } from "./styles"
console.log(lalal) //=>red
Shahar Eliyahu
  • 116
  • 1
  • 3
  • Ok, so in your example, why would anyone have `export const` in addition to an `export default`, and also export a value in `{ }`? I understand it's an example, but could you tell me the advantages of each method? Thanks! – Catlard Sep 06 '21 at 16:13
  • 1
    Sure, you for one you can do only one export default per file, also export const is better in my opinion for anything that is not react component because you can do barrel file - check it out https://medium.com/@klauskpm/do-a-barrel-export-aa5b79b76b05 – Shahar Eliyahu Sep 07 '21 at 13:22