Common Properties

ThreeAuto application instance ThreeInstance, cannot initialize multiple ThreeAuto instances on a single container.

instance

The ThreeAuto constructor can accept two parameters

constructor

constructor(canvas?: HTMLCanvasElement, config)

• canvas

Instance container, which is a canvas element with width and height. You can omit this parameter, and it will automatically identify the DOM element in the current page based on config.id in the second parameter. ::: danger Error If neither is provided, an error canvas has already been initialized. will be thrown :::

• config

Configuration parameter. For details, please see Configuration Manual.

import * as AUTO from "./src/index";
const instance = new AUTO.ThreeAuto();

The instance also has many properties and methods required by three.js, which we can access directly through the instance.

instance.scene

THREE.Scene

Three.js Scene class.

Scene allows you to set up what and where three.js is to render. This is where you place objects, lights and cameras.

instance._canvas

HTMLCanvasElement

Instance container, which is a canvas element with width and height, used for internal inspection.

instance._camera

THREE.Camera

Instance property generated by the Camera class encapsulated internally by ThreeAuto, used to generate Three.js cameras.

Currently supports two cameras PerspectiveCamera and OrthographicCamera, more camera types will be available in the future.

You can directly change the properties of Camera after generation through configuration options.

For details, please see the configuration manual: camera.

Usage is the same as three.js camera property:

instance._camera.position.x = 6;

instance._renderer

THREE.Renderer

Instance property generated by the Renderer class encapsulated internally by ThreeAuto, used to generate Three.js renderers.

Currently only supports one renderer WebGLRenderer, more renderer types will be available in the future.

You can directly change the properties of WebGLRenderer after generation through configuration options.

For details, please see the configuration manual: renderer.

Usage is the same as three.js renderer property:

instance._renderer.setClearColor("#ffffff", 0.1);

instance.time

Time

Instance property generated by the Time class encapsulated internally by ThreeAuto, used to control the entire loop, with the core being recursive calls to requestAnimationFrame to ensure the renderer can trigger every frame.

For details, please see the common class: Time.

instance.delta

Number

Interval time (milliseconds) when each frame is triggered.

instance.onTick(() => {
  console.log("Interval time when each frame is triggered:", instance.delta, "milliseconds"); 
});

instance.elapsedTime

Number

Elapsed time (seconds)

instance.time.on("tick", () => {
  console.log("Elapsed time", instance.elapsedTime, "(seconds)"); 
});

instance.lerpValue

Number

Experimental feature not updated...

instance.sizes

Sizes

Instance property generated by the Sizes class encapsulated internally by ThreeAuto, used to monitor container size changes and real-time change the renderer size.

It can select the container size to monitor through global configuration options, defaulting to monitoring window size changes.

For details, please see the common class: Sizes.

Note

You can change configuration options to select the mode for monitoring parent container size changes. For details, see the configuration manual size.

instance.width

Number

Get the current container width.

instance.height

Number

Get the current container height.

instance.pixelRatio

Number

Get the current screen pixel ratio.

instance.onResize(() => {
  console.log(instance.pixelRatio); 
});

instance.mousemove

MouseMoveTracker

Instance property generated by the MouseMoveTracker class encapsulated internally by ThreeAuto, used to monitor mouse movement and generate current screen coordinates (x,y) of the mouse, mainly serving ray detection.

For details, please see the common class: MouseMoveTracker.

instance.eventOffset

THREE.Vector2

Returns current screen coordinates (pixels px)

instance.onMousemove(() => {
  console.log(instance.eventOffset); 
});

instance.mouse

THREE.Vector2

Returns current normalized coordinates (range 0.0~1.0)

instance.onMousemove(() => {
  console.log(instance.mouse); 
});