<commit_before># three-onEvent
Add an EventListener for Object3d (Mesh,Group) in your three.js project.

## Installation

    $ npm install three-onevent --save
    # or
    $ yarn add three-onevent
    # or add onEvent.js with '<script>' tag


## Get Started
It can be loaded as:

-   ``require ('three-onevent.js')`` or ``import 'three-onevent.js'`` as a module in webpack or rollup
-   use [onEvent.js]('https://github.com/YorkChan94/three-onEvent/blob/master/onEvent.js') in browser ``<script src ='three-onevent/onEvent.js'>`` 

## Tutorial
* make sure you have import three.js.  See [examples](https://yorkchan94.github.io/three-onEvent/example.html)
1. Init onEvent 
```
var scene = new THREE.Scene()
var camera = new THREE.PerspectiveCamera(fov,window.innerWidth/window.innerHeight,0.1,10000);
camera.position.set( 0, 0, 0 );
scene.add(camera);
// init your events container before render
// Require THREE.scene and THREE.camera as param
THREE.onEvent(scene,camera);
```
2. Add eventListener with 'on'

> object3d.on(method:string,callback:function)

```
var geo = new THREE.CubeGeometry(5,5,5);
var mat = new THREE.MeshBasicMaterial({color:0x00aadd});
var mesh = new THREE.Mesh(geo,mat);
mesh.on('click',function(m) {
  m.scale.set(2,2,2); // m is link to mesh
})
myScene.add(mesh);
```
3. Remove event with 'off' from Object3d
```
mesh.off('click'); // remove click event from mesh
mesh.off(); // remove all events from mesh
```
4. Remove all events
```
var onEvent = THREE.onEvent(scene,camera);
...
//remove all events from all Object3d
onEvent.removeAll();
```
## More Method

> method: string 'click','hover',['gaze'](https://yorkchan94.github.io/webvr-webpack2-boilerplate/dist/)

```
// hover eventLisener 
mesh.on('hover',function(m) {
  // mouse enter the mesh
  m.scale.set(2,2,2); 
},function(m) {
  // mouse leave out the mesh
  m.scale.set(1,1,1);
});

// webvr gaze eventListener
mesh.on('gaze',function(m) {
  // mesh is gazed in
  m.material.color = 0x00ddaa;
},function(m) {
  // mesh is gazed out
  m.material.color = 0x00aadd;
})
```
## Need Help?

Ask questions [here](https://github.com/yorkchan94/three-onEvent/issues).

## Any advise?

PR welcome [here](https://github.com/yorkchan94/three-onEvent/pulls).

## Contributors

YorkChan <<EMAIL>>

## License

MIT

Please Star this Project if you like it! Following would also be appreciated!


# three-onEvent中文文档
一款实用的three.js监听事件插件，支持3d物体点击、悬停、凝视事件绑定。
## 安装

    $ npm install three-onevent --save
    # 或者
    $ yarn add three-onevent
    # 或直接在页面 '<script>' 中引用onEvent.js



## 开始
### 引用方式

-   1.node：webpack或者rollup模块引入：``require ('three-onevent.js')`` 或者 ``import 'three-onevent.js'``
-   2.浏览器：在html引入[onEvent.js]('https://github.com/YorkChan94/three-onEvent/blob/master/onEvent.js') ``<script src ='three-onevent/onEvent.js'>`` 

### 初始化
* 请确保已经引用three.js.  See [examples](https://yorkchan94.github.io/three-onEvent/example.html)
> 使用方法：THREE.onEvent(scene:THREE.Scene,camera:THREE.Camera);
```
// 在render渲染之前初始化
// 传入场景和相机
var scene = new THREE.Scene()
var camera = new THREE.PerspectiveCamera(fov,window.innerWidth/window.innerHeight,0.1,10000);
camera.position.set( 0, 0, 0 );
scene.add(camera);
THREE.onEvent(scene,camera);
...Render渲染...
```
### 绑定事件 "on"

> object3d.on(method:string,callback:function) 这里的object3d指的是THREE.Object3d的实例
```
// 给一个立方体绑定点击事件
var geo = new THREE.CubeGeometry(5,5,5);<commit_msg>change readme<commit_after># three-onEvent
Add an EventListener for Object3d (Mesh,Group) in your three.js project.

## Installation

    $ npm install three-onevent --save
    # or
    $ yarn add three-onevent
    # or add onEvent.js with '<script>' tag


## Get Started
It can be loaded as:

-   ``require ('three-onevent.js')`` or ``import 'three-onevent.js'`` as a module in webpack or rollup
-   use [onEvent.js]('https://github.com/YorkChan94/three-onEvent/blob/master/onEvent.js') in browser ``<script src ='three-onevent/onEvent.js'>`` 

## Tutorial
* make sure you have import three.js.  See [examples](https://yorkchan94.github.io/three-onEvent/example.html)
1. Init onEvent 
```
var scene = new THREE.Scene()
var camera = new THREE.PerspectiveCamera(fov,window.innerWidth/window.innerHeight,0.1,10000);
camera.position.set( 0, 0, 0 );
scene.add(camera);
// init your events container before render
// Require THREE.scene and THREE.camera as param
THREE.onEvent(scene,camera);
```
2. Add eventListener with 'on'

> object3d.on(method:string,callback:function)

```
var geo = new THREE.CubeGeometry(5,5,5);
var mat = new THREE.MeshBasicMaterial({color:0x00aadd});
var mesh = new THREE.Mesh(geo,mat);
mesh.on('click',function(m) {
  m.scale.set(2,2,2); // m is link to mesh
})
myScene.add(mesh);
```
3. Remove event with 'off' from Object3d
```
mesh.off('click'); // remove click event from mesh
mesh.off(); // remove all events from mesh
```
4. Remove all events
```
var onEvent = THREE.onEvent(scene,camera);
...
//remove all events from all Object3d
onEvent.removeAll();
```
## More Method

> method: string 'click','hover',['gaze'](https://yorkchan94.github.io/webvr-webpack2-boilerplate/dist/)

```
// hover eventLisener 
mesh.on('hover',function(m) {
  // mouse enter the mesh
  m.scale.set(2,2,2); 
},function(m) {
  // mouse leave out the mesh
  m.scale.set(1,1,1);
});

// webvr gaze eventListener
mesh.on('gaze',function(m) {
  // mesh is gazed in
  m.material.color = 0x00ddaa;
},function(m) {
  // mesh is gazed out
  m.material.color = 0x00aadd;
})
```
## Need Help?

Ask questions [here](https://github.com/yorkchan94/three-onEvent/issues).

## Any advise?

PR welcome [here](https://github.com/yorkchan94/three-onEvent/pulls).

## Contributors

YorkChan <<EMAIL>>

## License

MIT

Please Star this Project if you like it! Following would also be appreciated!


# three-onEvent中文文档
一款实用的three.js监听事件插件，支持3d物体（mesh,group）点击、悬停、凝视事件绑定。

## 安装

    $ npm install three-onevent --save
    # 或者
    $ yarn add three-onevent
    # 或者在页面引入 '<script type="javascript "src="onEvent.js">'


## 开始

### 引用方式

-   1.node：webpack或者rollup模块引入：``require ('three-onevent.js')`` 或者 ``import 'three-onevent.js'``
-   2.浏览器：在html引入[onEvent.js]('https://github.com/YorkChan94/three-onEvent/blob/master/onEvent.js') ``<script src ='three-onevent/onEvent.js'>`` 

### 初始化
* 请确保已经引用three.js.  See [examples](https://yorkchan94.github.io/three-onEvent/example.html)
> 使用方法：THREE.onEvent(scene:THREE.Scene,camera:THREE.Camera);
```
// 在render渲染之前初始化
// 传入场景和相机
var scene = new THREE.Scene()
var camera = new THREE.PerspectiveCamera(fov,window.innerWidth/window.innerHeight,0.1,10000);
camera.position.set( 0, 0, 0 );
scene.add(camera);
THREE.onEvent(scene,camera);
...Render渲染...
```
### 绑定事件 "on"

> object3d.on(method:string,callback:function) 这里的object3d指的是THREE.Object3d的实例
```
// 给一个立方体绑定点击事件
var geo = new THREE.CubeGeometry(5,5,5);
{'fraction_non_alphanumeric': 0.16805616498464238, 'fraction_numerical': 0.02135439520257423, 'mean_word_length': 4.333853354134165, 'pattern_counts': {'":': 0, '<': 15, '<?xml version=': 0, '>': 23, 'https://': 14, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3764188', 'n_tokens_mistral': 2776, 'n_tokens_neox': 2659, 'n_words': 543}