常用属性

ThreeAuto 应用实例ThreeInstance,不能在单个容器上初始化多个 ThreeAuto 实例。

instance

ThreeAuto的构造函数可以接受两个参数

constructor

constructor(canvas?: HTMLCanvasElement, config)

• canvas

实例容器，是一个具有高宽的 canvas 元素。可以不传入这时候会根据第二个参数中config.id来自动识别当前页面中的 dom 元素。

错误

如果都没有，就会抛出错误 canvas has already been initialized.

• config

配置项参数。具体请见配置项手册。

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

实例上还有许多 three.js 需要的属性和方法，我们可以通过实例直接访问它们。

instance.scene

THREE.Scene

Three.js 的Scene类。

Scene 允许您设置 three.js 要渲染的内容和位置。这是您放置对象、灯光和相机的地方。

instance._canvas

HTMLCanvasElement

实例容器，是一个具有高宽的 canvas 元素，用户内部检查。

instance._camera

THREE.Camera

ThreeAuto内部封装Camera类生成的实例属性，用来生成 Three.js 的相机。

现在支持两种相机PerspectiveCamera和OrthographicCamera，后续会开放更多相机类型。

可以通过配置项直接更改Camera生成后的属性。

具体请见配置项手册：camera。

使用方法和 three.js 的 camera 属性一样：

instance._camera.position.x = 6;

instance._renderer

THREE.Renderer

ThreeAuto内部封装Renderer类生成的实例属性，用来生成 Three.js 的渲染器。

现在只支持一种渲染器WebGLRenderer，后续会开放更多渲染器类型。

可以通过配置项直接更改WebGLRenderer生成后的属性。

具体请见配置项手册：renderer。

使用方法和three.js的renderer属性一样：

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

instance.time

Time

由ThreeAuto内部封装Time类生成的实例属性，用来控住整个循环loop，核心是requestAnimationFrame的递归调用，来保证渲染器每一帧都能触发。

具体请见通用类：Time。

instance.delta

Number

每一帧触发时的间隔时间（毫秒）。

instance.onTick(() => {
  console.log("每一帧触发时的间隔时间:", instance.delta, "毫秒"); 
});

instance.elapsedTime

Number

已经用了的时间（秒）

instance.time.on("tick", () => {
  console.log("已经用了的时间", instance.elapsedTime, "（秒）"); 
});

instance.lerpValue

Number

实验功能未更新...

instance.sizes

Sizes

由ThreeAuto内部封装Sizes类生成的实例属性，用来监听容器尺寸变化，来实时改变渲染器的尺寸大小。

它可以通过全局配置项来选定监听的容器尺寸，默认监听 window 尺寸变化。

具体请见通用类：Sizes。

注意

可以更改配置项来选择监听父容器尺寸变化的模式具体见配置项手册size。

instance.width

Number

获得当前的容器宽度。

instance.height

Number

获得当前的容器高度。

instance.pixelRatio

Number

获得当前的屏幕像素比。

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

instance.mousemove

MouseMoveTracker

ThreeAuto内部封装MouseMoveTracker类生成的实例属性，用来监听鼠标移动生成鼠标当前的屏幕坐标（x,y），主要为射线检测服务。

具体请见通用类：MouseMoveTracker。

instance.eventOffset

THREE.Vector2

返回当前的屏幕坐标（像素 px）

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

instance.mouse

THREE.Vector2

返回当前的归一化坐标（范围 0.0~1.0）

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