BlochSphere

@qbead/bloch-sphere

---

@qbead/bloch-sphere / BlochSphere

Class: BlochSphere

Defined in: src/bloch-sphere.ts:87

A Bloch Sphere Widget

This class is a wrapper around the THREE.js WebGLRenderer and CSS2DRenderer to create a Bloch sphere visualization.

It provides methods to add and remove objects from the scene.

It must be attached to a parent element in the DOM to be visible. It will automatically resize to fit the parent element.

To resize on window resize, you can call the resize method in the window resize event listener.

Example

import { BlochSphere } from 'bloch-sphere'

const blochSphere = new BlochSphere({
 fontSize: 1.25,
})

blochSphere.attach(document.body)
window.addEventListener(
 'resize',
 () => {
  blochSphere.resize()
 },
 { passive: true }
)

// create a qubit display
const qubit = new QubitDisplay(BlochVector.fromAngles(1, 0))
// add the qubit to the Bloch sphere
blochSphere.add(qubit)

Constructors

Constructor

new BlochSphere(options?): BlochSphere

Defined in: src/bloch-sphere.ts:97

Parameters

Parameter	Type
options?	BlochSphereOptions

Returns

BlochSphere

Properties

Property	Type	Defined in
camera	OrthographicCamera	src/bloch-sphere.ts:92
controls	OrbitControls	src/bloch-sphere.ts:93
cssRenderer	CSS2DRenderer	src/bloch-sphere.ts:89
el	HTMLElement	src/bloch-sphere.ts:90
renderer	WebGLRenderer	src/bloch-sphere.ts:88
scene	BlochSphereScene	src/bloch-sphere.ts:91

Accessors

showGrid

Get Signature

get showGrid(): boolean

Defined in: src/bloch-sphere.ts:165

Returns

boolean

Set Signature

set showGrid(value): void

Defined in: src/bloch-sphere.ts:169

Parameters

Parameter	Type
value	boolean

Returns

void

Methods

add()

add(item): void

Defined in: src/bloch-sphere.ts:173

Parameters

Parameter	Type
item	Object3D

Returns

void

---

attach()

attach(parent?): void

Defined in: src/bloch-sphere.ts:202

Attaches the widget to a parent element

Must be called to make the widget visible.

Parameters

Parameter	Type
parent?	HTMLElement

Returns

void

---

clearPlot()

clearPlot(): void

Defined in: src/bloch-sphere.ts:186

Removes all objects from the plot

This will not remove the grid or the sphere.

Returns

void

---

dispose()

dispose(): void

Defined in: src/bloch-sphere.ts:467

Performs cleanup and disposes everything contained in the widget

Returns

void

---

getCameraAngles()

getCameraAngles(): [number, number]

Defined in: src/bloch-sphere.ts:345

Get current camera angles as [theta, phi]

Returns

[number, number]

---

getCameraBlochVector()

getCameraBlochVector(): BlochVector

Defined in: src/bloch-sphere.ts:353

Get the Bloch vector pointing from origin to camera

Returns

BlochVector

---

getCameraZoom()

getCameraZoom(): number

Defined in: src/bloch-sphere.ts:338

Get current camera zoom level

Returns

number

---

interactivity()

interactivity(options?): InteractivityOptions

Defined in: src/bloch-sphere.ts:429

Control user interactivity with the camera

Parameters

Parameter	Type	Description
options?	boolean | InteractivityOptions	Interactivity options or boolean to enable/disable all interactions

Returns

InteractivityOptions

Current interactivity state if no arguments provided

---

remove()

remove(item): void

Defined in: src/bloch-sphere.ts:177

Parameters

Parameter	Type
item	Object3D

Returns

void

---

render()

render(): void

Defined in: src/bloch-sphere.ts:231

Renders the scene

This is called automatically in the animation loop unless that loop is stopped.

Returns

void

---

resize()

resize(width?, height?): void

Defined in: src/bloch-sphere.ts:214

Resizes the widget to fit the parent element

Optionally, you can specify the width and height to resize to.

Parameters

Parameter	Type
width?	number
height?	number

Returns

void

---

scale()

scale(size): void

Defined in: src/bloch-sphere.ts:193

Rescales the sphere

Parameters

Parameter	Type
size	number

Returns

void

---

setCameraAngles()

setCameraAngles(theta, phi, duration?, easing?): void | Promise<void>

Defined in: src/bloch-sphere.ts:391

Set camera position using spherical coordinates

Parameters

Parameter	Type
theta	number
phi	number
duration?	number
easing?	string

Returns

void | Promise<void>

---

setCameraState()

setCameraState(cameraState, duration?, easing?): void | Promise<void>

Defined in: src/bloch-sphere.ts:363

Set camera state (unified method)

Parameters

Parameter	Type
cameraState	CameraState
duration?	number
easing?	string

Returns

void | Promise<void>

---

setCameraToBlochVector()

setCameraToBlochVector(blochVector, duration?, easing?): void | Promise<void>

Defined in: src/bloch-sphere.ts:374

Position camera such that the given Bloch vector points directly at camera

Parameters

Parameter	Type
blochVector	BlochVector
duration?	number
easing?	string

Returns

void | Promise<void>

---

setCameraZoom()

setCameraZoom(zoomLevel, duration?, easing?): void | Promise<void>

Defined in: src/bloch-sphere.ts:409

Set camera zoom level

Parameters

Parameter	Type
zoomLevel	number
duration?	number
easing?	string

Returns

void | Promise<void>

---

setOptions()

setOptions(options?): void

Defined in: src/bloch-sphere.ts:113

Parameters

Parameter	Type
options?	BlochSphereOptions

Returns

void

---

start()

start(): void

Defined in: src/bloch-sphere.ts:244

Starts the animation loop

Automatically started when the widget is attached to a parent element.

This will call the render method automatically.

Returns

void

---

stop()

stop(): void

Defined in: src/bloch-sphere.ts:255

Stops the animation loop

This will stop the render loop

Returns

void