Web3D/trois
1
0
Fork 0
mirror of https://github.com/troisjs/trois.git synced 2024-11-24 04:12:02 +08:00
Code Issues Projects Releases Wiki Activity

update handlers

Browse Source
This commit is contained in:
Kevin Levron 2020-09-15 21:33:13 +02:00
parent fafd1338dc
commit d40c46d2a3
2 changed files with 40 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/core/Renderer.vue
View File

@ -26,7 +26,7 @@ export default {
default: false, default: false,
}, },
mouseMove: { mouseMove: {
type: Boolean, type: [Boolean, String],
default: false, default: false,
}, },
mouseRaycast: { mouseRaycast: {
@ -43,7 +43,6 @@ export default {
setup(props) { setup(props) {
return { return {
three: useThree(), three: useThree(),
beforeRender: [],
raf: true, raf: true,
}; };
}, },
@ -72,17 +71,17 @@ export default {
}, },
beforeUnmount() { beforeUnmount() {
this.raf = false; this.raf = false;
this.beforeRender.splice(0);
this.three.dispose(); this.three.dispose();
}, },
methods: { methods: {
onBeforeRender(callback) { onBeforeRender(callback) {
this.beforeRender.push(callback); this.three.onBeforeRender(callback);
},
onAfterResize(callback) {
this.three.onAfterResize(callback);
}, },
onAfterResize() {},
animate() { animate() {
if (this.raf) requestAnimationFrame(this.animate); if (this.raf) requestAnimationFrame(this.animate);
this.beforeRender.forEach(c => c());
this.three.render(); this.three.render();
}, },
}, },

41
src/core/useThree.js
View File

@ -32,6 +32,10 @@ export default function useThree() {
ratio: 0, ratio: 0,
}; };
// handlers
const afterResizeHandlers = [];
const beforeRenderHandlers = [];
// mouse tracking // mouse tracking
const mouse = new Vector2(); const mouse = new Vector2();
const mouseV3 = new Vector3(); const mouseV3 = new Vector3();
@ -52,6 +56,8 @@ export default function useThree() {
dispose, dispose,
render, render,
setSize, setSize,
onAfterResize,
onBeforeRender,
}; };
/** /**
@ -64,8 +70,6 @@ export default function useThree() {
} }
} }
obj.renderer = new WebGLRenderer({ canvas: conf.canvas, antialias: conf.antialias, alpha: conf.alpha });
if (!obj.scene) { if (!obj.scene) {
console.error('Missing Scene'); console.error('Missing Scene');
return; return;
@ -76,6 +80,8 @@ export default function useThree() {
return; return;
} }
obj.renderer = new WebGLRenderer({ canvas: conf.canvas, antialias: conf.antialias, alpha: conf.alpha });
if (conf.orbit_ctrl) { if (conf.orbit_ctrl) {
obj.orbitCtrl = new OrbitControls(obj.camera, obj.renderer.domElement); obj.orbitCtrl = new OrbitControls(obj.camera, obj.renderer.domElement);
if (conf.orbit_ctrl instanceof Object) { if (conf.orbit_ctrl instanceof Object) {
@ -93,8 +99,13 @@ export default function useThree() {
} }
if (conf.mouse_move) { if (conf.mouse_move) {
obj.renderer.domElement.addEventListener('mousemove', onMousemove); if (conf.mouse_move === 'body') {
obj.renderer.domElement.addEventListener('mouseleave', onMouseleave); obj.mouse_move_element = document.body;
} else {
obj.mouse_move_element = obj.renderer.domElement;
}
obj.mouse_move_element.addEventListener('mousemove', onMousemove);
obj.mouse_move_element.addEventListener('mouseleave', onMouseleave);
} }
return obj; return obj;
@ -105,16 +116,26 @@ export default function useThree() {
*/ */
function render() { function render() {
if (obj.orbitCtrl) obj.orbitCtrl.update(); if (obj.orbitCtrl) obj.orbitCtrl.update();
beforeRenderHandlers.forEach(c => c());
obj.renderer.render(obj.scene, obj.camera); obj.renderer.render(obj.scene, obj.camera);
} }
/**
* add before render handler
*/
function onBeforeRender(callback) {
beforeRenderHandlers.push(callback);
}
/** /**
* remove listeners * remove listeners
*/ */
function dispose() { function dispose() {
window.removeEventListener('resize', onResize); window.removeEventListener('resize', onResize);
obj.renderer.domElement.removeEventListener('mousemove', onMousemove); if (obj.mouse_move_element) {
obj.renderer.domElement.removeEventListener('mouseleave', onMouseleave); obj.mouse_move_element.removeEventListener('mousemove', onMousemove);
obj.mouse_move_element.removeEventListener('mouseleave', onMouseleave);
}
} }
/** /**
@ -156,6 +177,14 @@ export default function useThree() {
} else { } else {
setSize(conf.resize.clientWidth, conf.resize.clientHeight); setSize(conf.resize.clientWidth, conf.resize.clientHeight);
} }
afterResizeHandlers.forEach(c => c());
}
/**
* add after resize handler
*/
function onAfterResize(callback) {
afterResizeHandlers.push(callback);
} }
/** /**