sawa-zen / shree

lite three.js

Shree.js

lite three.js

docs

Install

$ npm install --save shree

or

<script src="https://unpkg.com/shree/dist/shree.js"></script>

Usage

// 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);

Licence

MIT

Author

sawa-zen

shree's Issues

"Basic Usage"で何も表示されない

DocsのBasic Usageを試させていただいたのですが、そのままでは何も表示されませんでした。

geometry.addAttribute('position', 3, [
  0.0, 1.5, 0.0,
  1.0, 0.0, 1.0,
  1.0, 0.0, -1.0,
]);

のところですが、正しくは

geometry.addAttribute('position', 3, [
  0.0, 0.5, 0.0,
  -1.0, -0.5, 0.0,
  1.0, -0.5, 0.0,
]);

ではないでしょうか。

（画像クリックで開くサンプルでは上のようになっており、正しく表示されています。）

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Warning

These dependencies are deprecated:

Datasource	Name	Replacement PR?
npm	codecov
npm	tslint

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

• fix(deps): update dependency eventemitter3 to v3.1.2
• chore(deps): update circleci/node docker tag to v10.24.1
• chore(deps): update circleci/node docker tag to v17
• chore(deps): update dependency fork-ts-checker-webpack-plugin to v9
• chore(deps): update dependency husky to v9
• chore(deps): update dependency lint-staged to v15
• chore(deps): update dependency prettier to v3
• chore(deps): update dependency ts-loader to v9
• chore(deps): update dependency tslint to v6
• chore(deps): update dependency typescript to v5
• chore(deps): update dependency webpack to v5 (webpack, @types/webpack)
• chore(deps): update dependency webpack-cli to v5
• chore(deps): update dependency webpack-merge to v6
• chore(deps): update jest monorepo to v29 (major) (@types/jest, jest, ts-jest)
• fix(deps): update dependency eventemitter3 to v5
• 🔐 Create all rate-limited PRs at once 🔐

Edited/Blocked

These updates have been manually edited so Renovate will no longer make changes. To discard all commits and start over, click on a checkbox.

• chore(deps): update dependency codecov to v3.7.1 [security]
• chore(deps): update dependency webpack-cli to v3.3.12
• chore(deps): update dependency webpack-merge to v4.2.2
• chore(deps): update dependency fork-ts-checker-webpack-plugin to v1.6.0
• chore(deps): update dependency husky to v2.7.0
• chore(deps): update dependency jest-canvas-mock to v2.5.2
• chore(deps): update dependency prettier to v1.19.1
• chore(deps): update dependency ts-jest to v24.3.0
• chore(deps): update dependency ts-loader to v6.2.2
• chore(deps): update dependency tslint to v5.20.1
• chore(deps): update dependency tslint-plugin-prettier to v2.3.0
• chore(deps): update dependency typescript to v3.9.10
• chore(deps): update dependency uglifyjs-webpack-plugin to v2.2.0

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): update dependency webpack to v4.47.0 (webpack, @types/webpack)
• chore(deps): update jest monorepo (@types/jest, jest)

Detected dependencies

circleci

.circleci/config.yml

• circleci/node 10.16.0
• circleci/node 10.16.0
• circleci/node 10.16.0

npm

package.json

• eventemitter3 ^3.1.0
• @types/jest 24.0.15
• @types/webpack 4.4.32
• codecov 3.5.0
• fork-ts-checker-webpack-plugin 1.3.7
• husky 2.4.1
• jest 24.7.1
• jest-canvas-mock 2.1.0
• lint-staged 8.2.1
• prettier 1.18.2
• ts-jest 24.0.2
• ts-loader 6.0.2
• tslint 5.17.0
• tslint-config-prettier 1.18.0
• tslint-plugin-prettier 2.0.1
• typescript 3.5.2
• uglifyjs-webpack-plugin 2.1.3
• webpack 4.34.0
• webpack-cli 3.3.4
• webpack-merge 4.2.1

---

• Check this box to trigger a request for Renovate to run again on this repository

Cannot compile shader

Love this project and the initiative, thank you so much for it.

But I have a problem where I'm getting a 'cannot compile shader' error every time one of my 'stars' is created, you can see what happens here:

https://codepen.io/Overbord/pen/mdOPeqY

This is my code:

` //Declare shree.js variables
var $instance = $(this),camera, scene, renderer, stars=[];
//assign shree.js objects to each variable
function init(){
var $width = document.querySelector('.intergalactic').offsetWidth;
var $height = document.querySelector('.intergalactic').offsetHeight;
//camera
camera = new SHREE.Camera(80, $width / $height, 1, 4000 );
camera.position.z = 1000;

	//scene
	scene = new SHREE.Scene();
	 
	//renderer
	renderer = new SHREE.Renderer();
	//set the size of the renderer
	renderer.setSize( $width, $height );
	 
	//add the renderer to the html document body
	document.querySelector('.intergalactic').appendChild( renderer.domElement );

}

function addSphere(){

			// The loop will move from z position of -1000 to z position 1000, adding a random particle at each position. 
			for ( var z= -1000; z < 1000; z+=3 ) {
	
				// Make a sphere (exactly the same as before). 
				var geometry   = new SHREE.Geometry(0.5, 32, 32)
				var material = new SHREE.Material( {color: 0x7e00dd} );
				var sphere = new SHREE.Mesh(geometry, material)
	
				// This time we give the sphere random x and y positions between -500 and 500
				sphere.position.x = Math.random() * 1000 - 500;
				sphere.position.y = Math.random() * 1000 - 500;
	
				// Then set the z position to where it is in the loop (distance of camera)
				sphere.position.z = z;
	
				// scale it up a bit
				sphere.scale.x = sphere.scale.y = 2.5;
	
				//add the sphere to the scene
				scene.add( sphere );
	
				//finally push it to the stars array 
				stars.push(sphere); 
			}
}

function animateStars() { 
			
	// loop through each star
	for(var i=0; i<stars.length; i++) {
		
		star = stars[i]; 
			
		// and move it forward dependent on the mouseY position. 
		star.position.z +=  2;
			
		// if the particle is too close move it to the back
		if(star.position.z>1000) star.position.z-=2000; 
		
	}

}

function render() {
	//get the frame
	requestAnimationFrame( render );

	//render the scene
	renderer.render( scene, camera );
		animateStars();

}

init();
addSphere();
render();

		function updateRendererSize() {
			if (camera) {
      	var $width = document.querySelector('.intergalactic').offsetWidth;

var $height = document.querySelector('.intergalactic').offsetHeight;
camera.aspect = $width / $height;
camera.updateProjectionMatrix();
renderer.setSize( $width, $height );
}
}

window.onresize = updateRendererSize;`

Here is it working with three.js:
https://codepen.io/Overbord/pen/jOVWXvp

Typescript Definition File

Love the simplicity and lightness of the library! Is it possible to share the typescript definition on npm as well so we can enjoy vscode intellisense?