Three.js 通用库

基于 Three.js 提供集成3D环境与基础控制功能。

Stage3D

通用3D环境，将常用功能进行统一封装，包含Scene场景、Camera镜头、Renderer渲染器等，提供标准resize、capture方法。
同时，Stage3D中已内置交互、渲染管理器，可基于标准体系提供物件的鼠标交互支持。

import {
  Timer
} from '@jusfoun-vis/common';
import {
  Stage3D,
  InteractiveMesh
} from '@jusfoun-vis/threejs-common';

const stage3d = new Stage3D();
stage3d.camera.position.set(0, 0, 100);
document.body.appendChild(stage3d.domElement);

const controls = new THREE.OrbitControls(stage3d.camera, stage3d.domElement);
controls.update();

const boxBufferGeometry = new THREE.BoxBufferGeometry(10, 10, 10);
const meshNormalMaterial = new THREE.MeshNormalMaterial();
const meshBasicMaterial = new THREE.MeshBasicMaterial({
  color: 0xFFFF00
});
for (let i = 0; i < 100; i++) {
  let mesh = new InteractiveMesh(boxBufferGeometry, meshNormalMaterial);
  mesh.interactive = true;
  mesh.buttonMode = true;
  mesh.mouseOut = function (e) {
    this.material = meshNormalMaterial;
  };
  mesh.mouseOver = function (e) {
    this.material = meshBasicMaterial;
  };
  mesh.position.set(
    -100 + Math.random() * 200,
    -100 + Math.random() * 200,
    -100 + Math.random() * 200
  );
  mesh.rotation.set(
    Math.random() * DP,
    Math.random() * DP,
    Math.random() * DP
  );
  stage3d.addObject(mesh);
}

const timer = new Timer(Timer.REQUEST_ANIMATION_FRAME);
timer.on('timer', function () {
  stage3d.render();
});
timer.start();

window.onresize = function () {
  stage3d.resize(window.innerWidth - 8, window.innerHeight - 8);
};
window.onresize();

InteractiveObjects

• InteractiveObject : Basic class 基类
  • interactive getter/setter boolean : 指示此物件是否具备交互能力（接受鼠标事件）
  • buttonMode getter/setter boolean : 指示此物件是否在具备鼠标焦点时显示手型
  • renderable getter/setter boolean : 指示此物件是否参与帧频渲染，参与帧频渲染的物件，引擎会以帧频调用其上的render方法（如果可用）
  • addObject(object3d) : 在此物件（容器）中添加子物件
  • removeObject(object3d) : 从此物件（容器）中删除子物件
• InteractiveGroup
• InteractiveLine
• InteractiveLineSegments
• InteractiveMesh
• InteractiveSprite
• InteractiveObject3D