Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

three-orbit-viewer

Package Overview
Dependencies
Maintainers
1
Versions
18
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

three-orbit-viewer

quick harness for viewing a mesh with orbit viewer

  • 69.3.1
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
6.5K
decreased by-11%
Maintainers
1
Weekly downloads
 
Created
Source

three-orbit-viewer

stable

(click for demo)

Quick harness to create a runnable demo for ThreeJS scenes. For a demo, see demo/test.js or three-gl-state-example.

var createOrbitViewer = require('three-orbit-viewer')(THREE)

var app = createOrbitViewer({
    clearColor: 0x000000,
    clearAlpha: 1.0,
    fov: 65,
    position: new THREE.Vector3(1, 1, -2)
})

var geo = new THREE.BoxGeometry(1,1,1)
var mat = new THREE.MeshBasicMaterial({ wireframe: true, color: 0xffffff })
var box = new THREE.Mesh(geo, mat)
app.scene.add(box)

app.on('tick', function(dt) {
    //.. handle pre-render updates    
})

Usage

NPM

viewer = createViewer(THREE)([options])

This module exports a function which accepts the THREE instance, and returns a new function which creates the orbit viewer with the specified options.

  • fov field of view, defaults to 50
  • near the near z depth for the camera, defaults to 0.1
  • far the far z depth for the camera, defaults to 1000
  • clearColor the THREE.Color or hex code, default black
  • clearAlpha the alpha, default 0
  • position THREE.Vector3 for the initial camera position, defaults to [1, 1, -2]
  • target THREE.Vector3 for the initial orbit controller's target
  • other options that could be passed into canvas-app
viewer.on('tick')

Listens for tick events before render, dispatched with dt as the first and only parameter. Alternatively, you can use on('render') for events called after the renderer has finished.

viewer.on('resize')

Listens for resize events, dispatched with width, height as parameters. Camera aspect, renderer viewport, and canvas retina scaling is already taken into account.

viewer.renderer

Instance of THREE.WebGLRenderer

viewer.scene

Instance of THREE.Scene

viewer.camera

Instance of THREE.PerspectiveCamera

viewer.controller

Instance of three-orbit-controller.

viewer.engine

Instance of canvas-app which you can call stop() and start() on, or access for current width/height/fps/etc.

Running the Demo

To build and run the demo, git clone this repo then:

cd three-orbit-viewer
npm install
npm test

And open localhost:9966 in your browser.

Building / Testing

To build from source, git clone and npm install local dependencies, then run npm start to run a development server on localhost:9966 or npm run build to create a compressed bundle of the demo source.

Versioning

This uses an unusual versioning system to better support ThreeJS's (lack of) versioning. The major version of this repo will line up with ThreeJS releases (69.0.0 => r69). The minor will be reserved for any new features, and patch for bug fixes and documentation/readme updates. In some rare cases, a minor feature may introduce a breaking change; so it's generally safest to use tilde or save-exact for this module.

License

MIT, see LICENSE.md for details.

Keywords

FAQs

Package last updated on 06 Sep 2016

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc