Demos

map points

Install

$ npm install --save shree
or
<script src="https://unpkg.com/shree/dist/shree.js"></script>

Basic Usage

basic 
// vertex shader

attribute vec3 position;
attribute vec4 color;
uniform mat4 pMatrix;
uniform mat4 mvMatrix;
varying vec4 vColor;

void main(void){
  vColor = color;
  gl_Position = pMatrix * mvMatrix * vec4(position, 1.0);
}
// fragment shader

precision mediump float;
varying vec4 vColor;

void main(void){
  gl_FragColor = vColor;
}
// sample.js

var wrapper = document.getElementById('wrapper');

var renderer = new SHREE.Renderer();
renderer.setSize(wrapper.clientWidth, wrapper.clientHeight);
wrapper.appendChild(renderer.domElement);

var camera = new SHREE.Camera();
camera.position.z = 2;

var scene = new SHREE.Scene();

var material = new SHREE.Material({
  vertexShader: document.getElementById('vs').text,
  fragmentShader: document.getElementById('fs').text,
});

var geometry = new SHREE.Geometry();
geometry.addAttribute('position', 3, [
   0.0,  0.5,  0.0,
  -1.0, -0.5,  0.0,
   1.0, -0.5,  0.0,
]);
geometry.addAttribute('color', 4, [
  1.0, 0.0, 0.0, 1.0,
  0.0, 1.0, 0.0, 1.0,
  0.0, 0.0, 1.0, 1.0,
]);
geometry.index = [0, 1, 2];

var mesh = new SHREE.Mesh(geometry, material);
scene.add(mesh);

renderer.render(scene, camera);

API

Renderer

Constructor

Renderer(parameters: object)
  • antialias: boolean - whether to perform antialiasing. Default is false.

Properties

  • pixelRatio: number
  • domElement: HTMLDivElement
  • clearColor: number[]

Methods

  • setSize(width: number, height: number): void
  • render(scene: Scene, camera: Camera): void

Vector3

Constructor

Vector3(x: number = 0, y: number = 0, z: number = 0)

Properties

  • x: number
  • y: number
  • z: number

Quaternion

Constructor

Quaternion(x: number = 0, y: number = 0, z: number = 0, w: number = 0)

Properties

  • x: number
  • y: number
  • z: number
  • w: number

Methods

  • setFromEuler(euler: Vector3): Quaternion

Object3D

Constructor

Object3D()

Properties

  • id: string
  • position: Vector3
  • up: Vector3
  • scale: vector3
  • rotation: Vector3
  • quaternion: Quaternion
  • parent: Object3D | null
  • children: Object3D[]
  • matrix: Matrix4
  • matrixWorld: Matrix4
  • modelViewMatrix: Matrix4

Methods

  • add(obj: Object3D): void
  • updateMatrix(): void
  • updateMatrixWorld(): void

Camera < Object3D

Constructor

Camera()

Properties

  • matrixWorldInverse: Matrix4

Methods

  • updateMatrixWorld(): void

Scene < Object3D

Constructor

Scene()

Properties

  • needsUpdate: boolean

Mesh < Object3D

Constructor

Mesh(geometry: Geometry, material: Material)

Properties

  • geometry: Geometry
  • material: Material

Geometry

Constructor

Geometry()

Properties

  • attribute: { [name: string]: { stride: number; vertices: number[]; } }
  • index: number[]

Methods

  • addAttribute(name: string, stride: number, vertices: number[]): void

Material

Constructor

Material(parameters: object)
  • uniforms: { [name: string]: { type: 'v4' | 't', value: Matrix4 | HTMLImageElement } }
  • vertexShader: string
  • fragmentShader: string
  • transparent: boolean
  • side: 'SIDE_FRONT' | 'SIDE_BACK' | 'SIDE_DOUBLE'

Points < Object3D

Constructor

Points(geometry: Geometry, material: Material)

Properties

  • geometry: Geometry
  • material: Material