Skip to content

Commit

Permalink
Don't import Foo from 'three' into component Foo, import `Foo as …
Browse files Browse the repository at this point in the history 
…THREE_Foo` from 'three' instead (#161)

- I've chosen `THREE_` as prefix, may change in future, but I like it so far.
- Also: currently `Scene` and `Object3D` three.js classes and types are always being imported `as THREE_Foo`, but this is actually not always neccessary -> may change before `1.0.0-next.1`
  • Loading branch information
Vatroslav Vrbanic committed Sep 9, 2022
1 parent 9cfba65 commit eac6c99
Show file tree
Hide file tree
Showing 16 changed files with 220 additions and 201 deletions.
25 changes: 13 additions & 12 deletions src/lib/components/AmbientLight.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ svelthree uses svelte-accmod, where accessors are always `true`, regardless of `
AmbientLight cannot be used to cast shadows as it doesn't have a direction. Position is also irrelevant. See https://threejs.org/docs/#api/en/lights/AmbientLight.
[ tbd ] Link to Docs. -->
<script lang="ts">
import type { Scene } from "three"
import type { Scene as THREE_Scene } from "three"
import { beforeUpdate, onMount, afterUpdate, onDestroy, getContext, setContext } from "svelte"
import { get_current_component } from "svelte/internal"
Expand All @@ -27,9 +27,10 @@ AmbientLight cannot be used to cast shadows as it doesn't have a direction. Posi
import { SvelthreeAnimation } from "../ani"
import type { SvelthreeAnimationFunction } from "../types/types-extra"
import { AmbientLight } from "three"
import { AmbientLight as THREE_AmbientLight } from "three"
import type { AmbientLightProperties } from "../types/types-comp-props"
import type { Color, Vector3, Object3D } from "three"
import type { Color, Vector3 } from "three"
import type { Object3D as THREE_Object3D } from "three"
import { get_root_scene } from "../utils/SceneUtils"
/**
Expand All @@ -55,7 +56,7 @@ AmbientLight cannot be used to cast shadows as it doesn't have a direction. Posi
export let log_lc: { [P in keyof LogLC]: LogLC[P] } = log_all ? { all: true } : undefined
export let log_mau: boolean = log_all
let scene: Scene = getContext("scene")
let scene: THREE_Scene = getContext("scene")
const sti: number = getContext("store_index")
/** [ **feature**: allow providing (_injection_) of (_already created_) threejs object instances ].
Expand All @@ -65,7 +66,7 @@ AmbientLight cannot be used to cast shadows as it doesn't have a direction. Posi
let create = false
/** The (three) instance that was shared to this component as it's 'parent' which can be either another instance / object or a scene / root scene. */
let our_parent: Object3D = undefined
let our_parent: THREE_Object3D = undefined
/** Shadow DOM element generated by our parent scene / root scene. Used as fallback if this component has no non-`Scene` component as parent. */
let scene_shadow_dom_el: SvelthreeShadowDOMElement = getContext("scene_shadow_dom_el")
Expand All @@ -79,7 +80,7 @@ AmbientLight cannot be used to cast shadows as it doesn't have a direction. Posi
export const get_shadow_dom_el = (): SvelthreeShadowDOMElement => shadow_dom_el
/** Returns the `light` instance created by the component & allows providing (_injection_) of (_already created / premade_) `THREE.AmbientLight` instances. */
export let light: AmbientLight = undefined
export let light: THREE_AmbientLight = undefined
let light_uuid: string = undefined
/** Sets the `name` property of the created / injected three.js instance. */
Expand Down Expand Up @@ -127,13 +128,13 @@ AmbientLight cannot be used to cast shadows as it doesn't have a direction. Posi
}
/** Initializes `AmbientLight` with provided constructor parameters.*/
export let params: ConstructorParameters<typeof AmbientLight> = undefined
export let params: ConstructorParameters<typeof THREE_AmbientLight> = undefined
$: if (!light && create) {
if (params) {
light = new AmbientLight(...params)
light = new THREE_AmbientLight(...params)
} else {
light = new AmbientLight()
light = new THREE_AmbientLight()
}
set_initial_userdata(light, self)
Expand Down Expand Up @@ -221,7 +222,7 @@ AmbientLight cannot be used to cast shadows as it doesn't have a direction. Posi
function handle_instance_change(): void {
if ((light_uuid && light.uuid !== light_uuid) || !light_uuid) {
const uuid_to_remove: string = light_uuid || light.uuid
const old_instance: Object3D = find_in_canvas($svelthreeStores[sti].scenes, uuid_to_remove)
const old_instance: THREE_Object3D = find_in_canvas($svelthreeStores[sti].scenes, uuid_to_remove)
remove_instance(old_instance, "light", light, self)
Expand Down Expand Up @@ -297,7 +298,7 @@ AmbientLight cannot be used to cast shadows as it doesn't have a direction. Posi
$: if (ani && currentSceneActive !== undefined) ani.onCurrentSceneActiveChange(currentSceneActive)
/** The root scene -> `scene.parent = null`. */
let root_scene: Scene | null = undefined
let root_scene: THREE_Scene | null = undefined
let root_scene_obj = { value: undefined }
$: if (root_scene === undefined) {
Expand All @@ -321,7 +322,7 @@ AmbientLight cannot be used to cast shadows as it doesn't have a direction. Posi
export const remove = remove_instance_from_parent
/** Returns the (three) instance of the object created by the component. */
export const get_instance = (): AmbientLight => light
export const get_instance = (): THREE_AmbientLight => light
/** Returns the `animation` object. */
export const get_animation = (): any => ani.getAnimation()
Expand Down
36 changes: 19 additions & 17 deletions src/lib/components/CubeCamera.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ svelthree uses svelte-accmod, where accessors are always `true`, regardless of `
Renders a `CubeMap` which can be used with **non-PBR** materials having an `.envMap` property. `CubeCamera` is currently not working with PBR materials like `MeshStandardMaterial` (see [22236](https://github.com/mrdoob/three.js/issues/22236)).
[ tbd ] Link to Docs. -->
<script lang="ts">
import type { Scene } from "three"
import type { Scene as THREE_Scene } from "three"
import { beforeUpdate, onMount, afterUpdate, onDestroy, getContext, setContext } from "svelte"
import { get_current_component } from "svelte/internal"
Expand All @@ -21,15 +21,17 @@ Renders a `CubeMap` which can be used with **non-PBR** materials having an `.env
import { if$_instance_change } from "../logic/if$"
import { remove_instance, recreate_shadow_dom_el, set_initial_userdata, find_in_canvas } from "../logic/shared"
import type { Euler, Matrix4, Object3D, Quaternion } from "three"
import type { Euler, Matrix4, Quaternion } from "three"
import type { Object3D as THREE_Object3D } from "three"
import { svelthreeStores } from "svelthree/stores"
import { PropUtils, SvelthreeProps } from "../utils"
import { SvelthreeAnimation } from "../ani"
import type { SvelthreeAnimationFunction } from "../types/types-extra"
import { CubeCamera, WebGLCubeRenderTarget } from "three"
import { CubeCamera as THREE_CubeCamera } from "three"
import { WebGLCubeRenderTarget } from "three"
import type { CubeCameraProperties, WebGLCubeRenderTargetProperties } from "../types/types-comp-props"
// custom CubeCameraHelper
import { CubeCameraHelper } from "../utils"
Expand Down Expand Up @@ -80,7 +82,7 @@ Renders a `CubeMap` which can be used with **non-PBR** materials having an `.env
/** `CubeCamera` instances are always added to the `root_scene`
* no matter which component the `CubeCamera` component was added to. */
let root_scene: Scene | null = undefined
let root_scene: THREE_Scene | null = undefined
let root_scene_obj = { value: undefined }
$: if (root_scene === undefined) {
Expand All @@ -92,7 +94,7 @@ Renders a `CubeMap` which can be used with **non-PBR** materials having an `.env
* ☝️ The `pos` shorthand attribute will override `bind_pos`! _Alternatively (standard)_:
* add the `CubeCamera` component as a child to either a `Mesh` or an `Object3D`/`Group` component,
* in this case `CubeCamera`'s position will be bound to it's parent / object (three) instance. */
export let bind_pos: MeshSvelthreeComponent<any> | Object3DSvelthreeComponent | Object3D = undefined
export let bind_pos: MeshSvelthreeComponent<any> | Object3DSvelthreeComponent | THREE_Object3D = undefined
$: if (camera && $svelthreeStores[sti].renderer && bind_pos && !bind_pos_offset && !dynamic) update_cubecam()
/** Adjust `CubeCamera`'s position by setting an offset relative to the pivot of the object specified by `bind_pos`. */
Expand All @@ -103,7 +105,7 @@ Renders a `CubeMap` which can be used with **non-PBR** materials having an `.env
* Default: `CubeCamera`'s parent component's object (three) instance will be hidden.
* -> ☝️ If you add `CubeCamera` as a direct child of a `Scene` component without specifying some other object / objects to be hidden,
* the **root scene** will be hidden during the 'envMap'-texture rendering and your 'envMap' texture will be blank! */
export let hide: (MeshSvelthreeComponent<any> | Object3DSvelthreeComponent | Object3D)[] = undefined
export let hide: (MeshSvelthreeComponent<any> | Object3DSvelthreeComponent | THREE_Object3D)[] = undefined
/** Binds the texture generated by the `CubeCamera` to some `Mesh`-component's `.material`(_currently non PBR + has `.envMap`_).
* This is the opposite of / alternative to binding the material's `.envMap` property to `[CubeCamera component reference].texture` */
Expand All @@ -119,7 +121,7 @@ Renders a `CubeMap` which can be used with **non-PBR** materials having an `.env
/** Set to `true` for correct **floor reflections** (_default: `false`_). */
export let is_floor: boolean = false
let scene: Scene = getContext("scene")
let scene: THREE_Scene = getContext("scene")
const sti: number = getContext("store_index")
/** [ **feature**: allow providing (_injection_) of (_already created_) threejs object instances ].
Expand All @@ -129,7 +131,7 @@ Renders a `CubeMap` which can be used with **non-PBR** materials having an `.env
let create = false
/** The (three) instance that was shared to this component as it's 'parent' which can be either another instance / object or a scene / root scene. */
let our_parent: Object3D = undefined
let our_parent: THREE_Object3D = undefined
/** Shadow DOM element generated by our parent scene / root scene. Used as fallback if this component has no non-`Scene` component as parent. */
let scene_shadow_dom_el: SvelthreeShadowDOMElement = getContext("scene_shadow_dom_el")
Expand All @@ -143,7 +145,7 @@ Renders a `CubeMap` which can be used with **non-PBR** materials having an `.env
export const get_shadow_dom_el = (): SvelthreeShadowDOMElement => shadow_dom_el
/** Returns the `camera` instance created by the component & allows providing (_injection_) of (_already created / premade_) `THREE.CubeCamera` instances. */
export let camera: CubeCamera = undefined
export let camera: THREE_CubeCamera = undefined
/** Returns the `renderTarget` instance created by the component & allows providing (_injection_) of (_already created / premade_) `THREE.WebGLCubeRenderTarget` instances. */
export let renderTarget: WebGLCubeRenderTarget = undefined
Expand Down Expand Up @@ -205,7 +207,7 @@ Renders a `CubeMap` which can be used with **non-PBR** materials having an `.env
export let renderTargetParams: ConstructorParameters<typeof WebGLCubeRenderTarget> = undefined
/** Initializes `camera` with provided constructor parameters -> `renderTarget` is not needed (assigned internally). */
export let params: RemoveLast<ConstructorParameters<typeof CubeCamera>> = undefined
export let params: RemoveLast<ConstructorParameters<typeof THREE_CubeCamera>> = undefined
// create 'renderTarget' first
// SVELTEKIT SSR
Expand All @@ -226,7 +228,7 @@ Renders a `CubeMap` which can be used with **non-PBR** materials having an `.env
$: if (!camera && renderTarget && create) {
// leave any parameter errors handling to threejs
if (params) {
camera = new CubeCamera(...params, renderTarget)
camera = new THREE_CubeCamera(...params, renderTarget)
} else {
throw new Error(
`SVELTHREE > ${c_name} : You need to specify 'params' attribute in order to create 'camera' `
Expand Down Expand Up @@ -325,7 +327,7 @@ Renders a `CubeMap` which can be used with **non-PBR** materials having an `.env
function handle_instance_change(): void {
if ((camera_uuid && camera.uuid !== camera_uuid) || !camera_uuid) {
const uuid_to_remove: string = camera_uuid || camera.uuid
const old_instance: Object3D = find_in_canvas($svelthreeStores[sti].scenes, uuid_to_remove)
const old_instance: THREE_Object3D = find_in_canvas($svelthreeStores[sti].scenes, uuid_to_remove)
// update 'index_in_x'
index_in_cubecameras = old_instance.userData.index_in_cubecameras
Expand Down Expand Up @@ -370,7 +372,7 @@ Renders a `CubeMap` which can be used with **non-PBR** materials having an `.env
let bound_pos: typeof bind_pos = bind_pos || our_parent
let to_hide: typeof hide | typeof bind_pos = hide || bound_pos
let renderer: WebGLRenderer = $svelthreeStores[sti].renderer
let active_scene: Scene = $svelthreeStores[sti].activeScene
let active_scene: THREE_Scene = $svelthreeStores[sti].activeScene
if (pos === undefined) {
// the floor hack -> see https://jsfiddle.net/3mprbLc9/
Expand Down Expand Up @@ -425,7 +427,7 @@ Renders a `CubeMap` which can be used with **non-PBR** materials having an `.env
| Object3DSvelthreeComponent
o.get_instance().visible = val
} else {
let o: Object3D = obj as Object3D
let o: THREE_Object3D = obj as THREE_Object3D
o.visible = val
}
}
Expand All @@ -434,7 +436,7 @@ Renders a `CubeMap` which can be used with **non-PBR** materials having an `.env
let wp: Vector3 = new Vector3()
if (typeof obj["getWorldPosition"] === "function") {
let o: Object3D = obj as Object3D
let o: THREE_Object3D = obj as THREE_Object3D
o.getWorldPosition(wp)
} else {
let o: MeshSvelthreeComponent<any> | Object3DSvelthreeComponent = obj as
Expand Down Expand Up @@ -564,7 +566,7 @@ Renders a `CubeMap` which can be used with **non-PBR** materials having an `.env
}
/** */
export let lookAt: Vector3 | Parameters<Vector3["set"]> | Object3D = undefined
export let lookAt: Vector3 | Parameters<Vector3["set"]> | THREE_Object3D = undefined
$: !matrix && camera && lookAt ? set_lookat() : lookAt && camera ? console.warn(w_sh.lookAt) : null
function set_lookat() {
if (verbose && log_rs) console.debug(...c_rs(c_name, "lookAt", lookAt))
Expand Down Expand Up @@ -629,7 +631,7 @@ Renders a `CubeMap` which can be used with **non-PBR** materials having an `.env
export const remove = remove_instance_from_parent
/** Returns the (three) instance of the object created by the component. */
export const get_instance = (): CubeCamera => camera
export const get_instance = (): THREE_CubeCamera => camera
/** Returns the `animation` object. */
export const get_animation = (): any => ani.getAnimation()
Expand Down
29 changes: 15 additions & 14 deletions src/lib/components/DirectionalLight.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ svelthree uses svelte-accmod, where accessors are always `true`, regardless of `
[ tbd ] Link to Docs.
-->
<script lang="ts">
import type { Scene } from "three"
import type { Scene as THREE_Scene } from "three"
import { beforeUpdate, onMount, afterUpdate, onDestroy, getContext, setContext } from "svelte"
import { get_current_component } from "svelte/internal"
Expand All @@ -34,9 +34,10 @@ svelthree uses svelte-accmod, where accessors are always `true`, regardless of `
import type { Targetable } from "../types/types-extra"
import { LightTarget } from "../utils"
import { Object3D } from "three"
import { Object3D as THREE_Object3D } from "three"
import { DirectionalLight, DirectionalLightHelper } from "three"
import { DirectionalLight as THREE_DirectionalLight } from "three"
import { DirectionalLightHelper } from "three"
import type { DirectionalLightProperties } from "../types/types-comp-props"
import type { DirectionalLightShadow } from "three"
import type { Color } from "three"
Expand Down Expand Up @@ -66,7 +67,7 @@ svelthree uses svelte-accmod, where accessors are always `true`, regardless of `
export let log_lc: { [P in keyof LogLC]: LogLC[P] } = log_all ? { all: true } : undefined
export let log_mau: boolean = log_all
let scene: Scene = getContext("scene")
let scene: THREE_Scene = getContext("scene")
const sti: number = getContext("store_index")
/** [ **feature**: allow providing (_injection_) of (_already created_) threejs object instances ].
Expand All @@ -76,7 +77,7 @@ svelthree uses svelte-accmod, where accessors are always `true`, regardless of `
let create = false
/** The (three) instance that was shared to this component as it's 'parent' which can be either another instance / object or a scene / root scene. */
let our_parent: Object3D = undefined
let our_parent: THREE_Object3D = undefined
/** Shadow DOM element generated by our parent scene / root scene. Used as fallback if this component has no non-`Scene` component as parent. */
let scene_shadow_dom_el: SvelthreeShadowDOMElement = getContext("scene_shadow_dom_el")
Expand All @@ -90,7 +91,7 @@ svelthree uses svelte-accmod, where accessors are always `true`, regardless of `
export const get_shadow_dom_el = (): SvelthreeShadowDOMElement => shadow_dom_el
/** Returns the `light` instance created by the component & allows providing (_injection_) of (_already created / premade_) `THREE.DirectionalLight` instances. */
export let light: DirectionalLight = undefined
export let light: THREE_DirectionalLight = undefined
let light_uuid: string = undefined
/** Sets the `name` property of the created / injected three.js instance. */
Expand Down Expand Up @@ -138,13 +139,13 @@ svelthree uses svelte-accmod, where accessors are always `true`, regardless of `
}
/** Initializes `DirectionalLight` with provided constructor parameters.*/
export let params: ConstructorParameters<typeof DirectionalLight> = undefined
export let params: ConstructorParameters<typeof THREE_DirectionalLight> = undefined
$: if (!light && create) {
if (params) {
light = new DirectionalLight(...params)
light = new THREE_DirectionalLight(...params)
} else {
light = new DirectionalLight()
light = new THREE_DirectionalLight()
}
set_initial_userdata(light, self)
Expand Down Expand Up @@ -232,7 +233,7 @@ svelthree uses svelte-accmod, where accessors are always `true`, regardless of `
function handle_instance_change(): void {
if ((light_uuid && light.uuid !== light_uuid) || !light_uuid) {
const uuid_to_remove: string = light_uuid || light.uuid
const old_instance: Object3D = find_in_canvas($svelthreeStores[sti].scenes, uuid_to_remove)
const old_instance: THREE_Object3D = find_in_canvas($svelthreeStores[sti].scenes, uuid_to_remove)
remove_instance(old_instance, "light", light, self)
Expand Down Expand Up @@ -308,7 +309,7 @@ svelthree uses svelte-accmod, where accessors are always `true`, regardless of `
light.target.parent.remove(light.target)
}
// recreate / reset target
light.target = new Object3D()
light.target = new THREE_Object3D()
}
}
}
Expand Down Expand Up @@ -352,7 +353,7 @@ svelthree uses svelte-accmod, where accessors are always `true`, regardless of `
/** With components / objects having a `target` property like `DirectionalLight`, `lookAt` is used to specify a **point (coordinates) in world space** and cannot be set to an `Object3D`!
* By setting `LookAt` to some value, you're basically moving the built-in 'blank' `Object3D` used as a point in space to look at.
* ☝️ _In order to update the `DirectionalLightHelper` correctly, the `target: boolean` attribute needs to be set / set to `true` (**default**)!_ */
export let lookAt: Vector3 | Parameters<Vector3["set"]> | Object3D = undefined
export let lookAt: Vector3 | Parameters<Vector3["set"]> | THREE_Object3D = undefined
$: !matrix && light && lookAt ? set_lookat() : lookAt && light ? console.warn(w_sh.lookAt) : null
function set_lookat() {
if (verbose && log_rs) console.debug(...c_rs(c_name, "lookAt", lookAt))
Expand Down Expand Up @@ -438,7 +439,7 @@ svelthree uses svelte-accmod, where accessors are always `true`, regardless of `
$: if (ani && currentSceneActive !== undefined) ani.onCurrentSceneActiveChange(currentSceneActive)
/** The root scene -> `scene.parent = null`. */
let root_scene: Scene | null = undefined
let root_scene: THREE_Scene | null = undefined
let root_scene_obj = { value: undefined }
$: if (root_scene === undefined) {
Expand All @@ -464,7 +465,7 @@ svelthree uses svelte-accmod, where accessors are always `true`, regardless of `
export const remove = remove_instance_from_parent
/** Returns the (three) instance of the object created by the component. */
export const get_instance = (): DirectionalLight => light
export const get_instance = (): THREE_DirectionalLight => light
/** Returns the `animation` object. */
export const get_animation = (): any => ani.getAnimation()
Expand Down
Loading

0 comments on commit eac6c99

Please sign in to comment.