ore-three

three.js wrapper.

Usage

Get Library

link script

Download the library and include in your HTML.

<script src="ore-three.js"></script>

npm

or you can get the library from npm.

$ npm install ore-three-ts

Import

import * as ORE from 'ore-three-ts';

Create Controller

import * as ORE from 'ore-three-ts';
import MainScene from './MainScene';

class APP{
    constructor(){
        this.canvas = document.querySelector("#canvas");
        
        //create controller(canvas,retina: bool)
        this.controller = new ORE.Controller(this.canvas,false);
        
        //crete scene
        this.oreScene = new MainScene(this.controller.renderer);
        
        //set scene
        this.controller.setScene(this.oreScene);
    }
}
window.addEventListener('load',()=>{
    let app = new APP();
})

Create Scene

import * as ORE from 'ore-three-ts';
import * as THREE from 'three';

export default class MainScene extends ORE.BaseScene {
    constructor(renderer) {
        super(renderer);
        this.init();
    }

    init() {
        this.camera.position.set(0,1.5,3);
        this.camera.lookAt(0,0,0);

        var boxGeo = new THREE.BoxGeometry(1,1,1);
        var boXMat = new THREE.MeshNormalMaterial();
        this.box = new THREE.Mesh(boxGeo,boXMat);
        this.scene.add(this.box);

        this.light = new THREE.DirectionalLight();
        this.light.position.y = 10;
        this.scene.add(this.light);
    }

    animate() {
        this.box.rotateY(0.02);
        this.renderer.render(this.scene,this.camera);
    }

    onResize(width,height){
        super.onResize(width,height);
    }
}

Use utility

if you want add GPU fish...

this.fish = new ORE.Fish(this.renderer,1000,10);
this.scene.add(this.fish);

and update fish

animate(){
    if(this.fish){
        this.fish.update(this.time);
    }
}