360-image-viewer 中文文档教程

发布于 7年前 浏览 25 项目主页 更新于 3年前

360-image-viewer

适用于桌面和移动设备的独立全景 WebGL 图像查看器。 这使用 regl 作为 WebGL 包装器,总共有 140kb uglified 或 46kb gzipped。 如果您需要全景查看器但又不想嵌入所有 ThreeJS(大约 500kb 丑化),这将很有用。

Install

npm install 360-image-viewer --save

Live Demo

单击此处查看此模块的实际演示。 源代码在 demo/index.js 中。

Example

下面的代码设置全屏 360 度图像查看器。 有关更完整的示例,请参阅 demo/index.js

const create360Viewer = require('360-image-viewer');
const canvasFit = require('canvas-fit');

// load your image
const image = new Image();
image.src = 'panosphere.jpg';

image.onload = () => {
  // when the image is loaded, setup the viewer
  const viewer = create360Viewer({
    image: image
  });

  // attach canvas to body
  document.body.appendChild(viewer.canvas);

  // setup fullscreen canvas sizing
  const fit = canvasFit(viewer.canvas, window, window.devicePixelRatio);
  window.addEventListener('resize', fit, false);
  fit();

  // start the render loop
  viewer.start();
};

Usage

viewer = create360Viewer([opt])

使用指定的 opt 选项对象创建并返回一个新的 WebGL 画布查看器。

选项:

  • image — the HTMLImageElement, if not specified it can be set later
  • canvas — a <canvas> tag to use, otherwise creates a new one
  • fov — a field of view, in radians, defaults to 45 degrees
  • rotateSpeed — a scalar for the drag rotation speed, default 0.15
  • damping — a scalar for damping/spring, default 0.275
  • clearColor — a RGBA clear color, default [ 0, 0, 0, 0 ] (ie. transparent)

您还可以传递 orbit-controls 选项,例如 phi 作为初始旋转,或传递 { rotate: fale } 以忽略鼠标/触摸旋转。

image 应该是 DOM Image 或 Video 元素,并且应该已经加载。

viewer.start()

启动 requestAnimationFrame 渲染循环。

viewer.stop()

停止 requestAnimationFrame 渲染循环。

viewer.render()

渲染单帧。 如果您在 requestAnimationFrame 未运行时更改画布大小,这可能很有用。

viewer.enableControls()

启用输入控件,将鼠标/触摸事件附加到画布。 如果控件已启用则无效。

viewer.disableControls()

禁用输入控件,从画布中分离鼠标/触摸事件。 如果控件已被禁用,则无效。

viewer.texture(image)

将当前图像更改为指定的 DOM image。 这可以是图像、视频或 regl#texture() 的选项对象。 默认情况下,minmag 过滤器将使用 'linear' 进行更平滑的过滤。

viewer.destroy()

停止渲染循环,禁用输入控件,并销毁 WebGL 上下文。 在此之后,查看器将不再可用。

viewer.canvas

查看器将渲染到的画布。

viewer.fov

以弧度为单位的透视相机的当前视野。 可以在运行时更改。

viewer.phi

以弧度为单位的当前水平旋转角度。

viewer.theta

以弧度为单位的当前垂直旋转角度。

viewer.on('tick', fn)

将帧侦听器附加到查看器,其中 fn 接受每帧的 dt(增量时间)参数。 您可以使用 viewer.removeListener('tick', fn) 删除它。

License

MIT,详见 LICENSE.md

360-image-viewer

A standalone panorama WebGL image viewer for desktop and mobile. This uses regl as the WebGL wrapper, and comes in at a total of 140kb uglified, or 46kb gzipped. This is useful if you need a panorama viewer but don't want to embed all of ThreeJS (which is around 500kb uglified).

Install

npm install 360-image-viewer --save

Live Demo

Click here to see a demo of this module in action. The source code is in demo/index.js.

Example

The code below sets up a full-screen 360 image viewer. For a more complete example, see demo/index.js.

const create360Viewer = require('360-image-viewer');
const canvasFit = require('canvas-fit');

// load your image
const image = new Image();
image.src = 'panosphere.jpg';

image.onload = () => {
  // when the image is loaded, setup the viewer
  const viewer = create360Viewer({
    image: image
  });

  // attach canvas to body
  document.body.appendChild(viewer.canvas);

  // setup fullscreen canvas sizing
  const fit = canvasFit(viewer.canvas, window, window.devicePixelRatio);
  window.addEventListener('resize', fit, false);
  fit();

  // start the render loop
  viewer.start();
};

Usage

viewer = create360Viewer([opt])

Creates and returns a new WebGL canvas viewer with the specified opt options object.

Options:

  • image — the HTMLImageElement, if not specified it can be set later
  • canvas — a <canvas> tag to use, otherwise creates a new one
  • fov — a field of view, in radians, defaults to 45 degrees
  • rotateSpeed — a scalar for the drag rotation speed, default 0.15
  • damping — a scalar for damping/spring, default 0.275
  • clearColor — a RGBA clear color, default [ 0, 0, 0, 0 ] (ie. transparent)

You can also pass orbit-controls options, for example phi as the initial rotation, or passing { rotate: fale } to ignore mouse/touch rotation.

The image should be a DOM Image or Video element, and should already be loaded.

viewer.start()

Start the requestAnimationFrame render loop.

viewer.stop()

Stop the requestAnimationFrame render loop.

viewer.render()

Render a single frame. This may be useful if, say, you change the canvas size when the requestAnimationFrame is not running.

viewer.enableControls()

Enable the input controls, attaching mouse/touch events to the canvas. Has no effect if the controls are already enabled.

viewer.disableControls()

Disable the input controls, detaching mouse/touch events from the canvas. Has no effect if the controls are already disabled.

viewer.texture(image)

Changes the current image to the specified DOM image. This can be an image, video, or an options object for regl#texture(). By default, min and mag filter will use 'linear' for smoother filtering.

viewer.destroy()

Stop the render loop, disable the input controls, and destroy the WebGL context. The viewer will no longer be usable after this point.

viewer.canvas

The canvas the viewer will render into.

viewer.fov

The current field of view of the perspective camera in radians. Can be altered at run-time.

viewer.phi

The current horizontal rotation angle in radians.

viewer.theta

The current vertical rotation angle in radians.

viewer.on('tick', fn)

Attach a frame listener to the viewer, where fn accepts the dt (delta time) parameter per frame. You can remove this with viewer.removeListener('tick', fn).

License

MIT, see LICENSE.md for details.

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文