three视口助手的three-viewport-gizmo使用

three视口助手的three-viewport-gizmo使用，类似于blender右上角的方向控件.

Three Viewport Gizmo官方Three.js视口助手的高度可定制的独立交互式版本，它可以单独使用，也可以与OrbitControls，TrackballControls或自定义摄像机控制器 (如 @ yomotsu/camera-controls) 结合使用。

例子

• Configuration
• Standalone
• OrbitControls
• TrackBallControls
• @yomotsu/camera-controls

安装

npm install three-viewport-gizmo

用法

单独使用

将其与相机和渲染器实例一起使用，容器是包含画布的HTMLElement。

import {
    ViewportGizmo } from "three-viewport-gizmo";

const container = document.body;
const viewportGizmo = new ViewportGizmo(camera, renderer, options);

// Animation loop
function animate() {
   
  viewportGizmo.render();

  // ... Your animation logic
  renderer.render(scene, camera);
}

混合 OrbitControls or TrackBallControls使用

要正确使用OrbitControls或TrackballControls，您需要按如下方式设置事件侦听器和动画循环。

import {
    ViewportGizmo } from "three-viewport-gizmo";

const container = document.body;
const viewportGizmo = new ViewportGizmo(camera, renderer, options);
const controls = new OrbitControls(camera, container);

viewportGizmo.target = controls.target;

// listeners
viewportGizmo.addEventListener("start", () => (controls.enabled = false));
viewportGizmo.addEventListener("end", () => (controls.enabled = true));

controls.addEventListener("change", () => {
   
  viewportGizmo.update();
});

// Animation loop
function animate() {
   
  viewportGizmo.render(