npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

three-screen-quad

v0.2.1

Published

a screen aligned quad for three.js

Downloads

2,011

Readme

three-screen-quad

stable

a screen aligned quad for three.js

ThreeJS element for drawing stuff to screen. It doesn't transform the plane on the cpu and uses the vertex shader to position it on screen. An abstract class controls a couple of uniforms and can figure out sizes in pixels. Setting top:'25px',left:'25px will keep the element anchored to the edge of the canvas. Live.

var THREE = require('three')
var ScreenQuad = require('three-screen-quad')(THREE)

var screenQuad;

function start(gl, width, height) {

    renderer = new THREE.WebGLRenderer({
        canvas: gl.canvas
    });

    scene = new THREE.Scene();
    
    camera = new THREE.PerspectiveCamera(50, width/height, 1, 1000);
    
    camera.position.set( 0 , 0 , -10 );

    camera.lookAt( new THREE.Vector3() )

    //will make a quad thats 25% of the screen size in both directions
    //offset in pixels from top left corner 

    screenQuad = new ScreenQuad({
    	width: 0.25,
    	height: 0.25,
    	top: '25px',
    	left: '25px'
    });

    screenQuad.setScreenSize( renderer.getSize().width , renderer.getSize().height );

    scene.add(screenQuad);

}

function render(gl, width, height) {
    renderer.render(scene, camera)
}

function onWindowResize( width , height ){
	
	//if a value is set in pixels, the canvas size needs to be set on the element
	screenQuad.setScreenSize( width , height );

}

Usage

NPM

ScreenQuad = require('three-screen-quad')(THREE)

This module exports a function which accepts an instance of THREE, and returns a ScreenQuad class. This allows you to use the module with CommonJS, globals, etc.

The returned function has the following constructor pattern, and extends THREE.Mesh. See three-fps-counter for an example on how to make an element that just renders to screen without being added to the graph.

screenQuad = new ScreenQuad({
	width: 	   0.5, 
	height:    '50px',
	top:       0.25, 
	left:      '25px',
    bottom:     0.5,           //top will override bottom if both are present in arguments
    right:      0.5,           //left will override right
    texture:    myTexture,     //to use the default shader
    debug:      false          //true will render UVs of the quad
})

##methods

setWidth( float | string ) - width of the element.

setHeight( float | string ) - height of the element.

setTop( float | string ) - distance from top of the canvas.

setLeft( float | string ) - distance from the left edge of the canvas.

setBottom( float | string ) - distance from bottom of the canvas.

setRight( float | string ) - distance from the right edge of the canvas.

setSize( width , height ) - sets both width and height at the same time

(Each argument can be either a float representing percentage 0.0 - 1.0, or string representing pixel size '25px');

setScreenSize( width , height ) - sets the screensize in pixels, should be called when the canvas resizes, needed if there are any pixel values assigned

testing

Git clone, npm install and then run npm start to spin up a development server. Open localhost:9966 in your browser to see the test.js file in action.

##Todo

  • Expose a better mechanism to attach a material. Right now you can pass a fragmentShader argument, but the uniforms are obscured. You can still access them though with 'myScreenQuadInstance.material.uniforms'. A simple shader that reads the uTexture uniform:

    varying vec2 vUv;
    
    uniform sampler2D uTexture;
    
    void main(){
    
    	gl_FragColor = texture2D( uTexture , vUv );
    
    }
  • ~~Add right, bottom anchors.~~

  • Allow for aspect to be locked when resizing in one axis.

Three module pattern borrowed from: https://github.com/mattdesl/three-orbit-controls