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

wip on per-object raycasting - starting raycaster at vec2(infinity, infinity) to prevent false positive on init

Browse Source
This commit is contained in:
Sander Moolin 2021-03-23 13:32:30 -04:00
parent cc16eae503
commit e622bedc6d
3 changed files with 76 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/core/Object3D.js
View File

@ -10,6 +10,7 @@ export default {
rotation: { type: Object, default: { x: 0, y: 0, z: 0 } },
scale: { type: Object, default: { x: 1, y: 1, z: 1 } },
lookAt: { type: Object, default: null },
onPointerEnter: { type: Function, default: null }
},
// can't use setup because it will not be used in sub components
// setup() {},
@ -29,6 +30,11 @@ export default {
if (this.lookAt) this.o3d.lookAt(this.lookAt.x, this.lookAt.y, this.lookAt.z);
watch(() => this.lookAt, (v) => { this.o3d.lookAt(v.x, v.y, v.z); }, { deep: true });
if (this.onPointerEnter) {
this.three.onBeforeRender(this.raycastEnter)
}
// find first viable parent
let parent = this.$parent;
while (parent) {
if (parent.add) {
@ -43,6 +49,15 @@ export default {
},
add(o) { this.o3d.add(o); },
remove(o) { this.o3d.remove(o); },
raycastEnter() {
this.three.raycaster.setFromCamera(this.three.mouse, this.three.camera)
const intersects = this.three.raycaster.intersectObjects([this.o3d])
if (intersects.length) {
console.log(intersects[0].distance)
this.onPointerEnter(intersects[0])
}
}
},
render() {
return this.$slots.default ? this.$slots.default() : [];

14
src/core/Renderer.js
View File

@ -7,9 +7,10 @@ export default {
antialias: Boolean,
alpha: Boolean,
autoClear: { type: Boolean, default: true },
mouseMove: { type: [Boolean, String], default: false },
mouseRaycast: { type: Boolean, default: false },
mouseOver: { type: Boolean, default: false },
// mouseMove: { type: [Boolean, String], default: false },
// mouseRaycast: { type: Boolean, default: false },
// mouseOver: { type: Boolean, default: false },
usePointer: { type: Boolean, default: true },
click: { type: Boolean, default: false },
orbitCtrl: { type: [Boolean, Object], default: false },
resize: { type: [Boolean, String], default: false },
@ -38,9 +39,10 @@ export default {
alpha: this.alpha,
autoClear: this.autoClear,
orbit_ctrl: this.orbitCtrl,
mouse_move: this.mouseMove,
mouse_raycast: this.mouseRaycast,
mouse_over: this.mouseOver,
// mouse_move: this.mouseMove,
// mouse_raycast: this.mouseRaycast,
// mouse_over: this.mouseOver,
use_pointer: this.usePointer,
click: this.click,
resize: this.resize,
width: this.width,

84
src/core/useThree.js
View File

@ -19,9 +19,10 @@ export default function useThree() {
alpha: false,
autoClear: true,
orbit_ctrl: false,
mouse_move: false,
mouse_raycast: false,
mouse_over: false,
// mouse_move: false,
// mouse_raycast: false,
// mouse_over: false,
use_pointer: true,
click: false,
resize: true,
width: 0,
@ -41,7 +42,7 @@ export default function useThree() {
let beforeRenderCallbacks = [];
// mouse tracking
const mouse = new Vector2();
const mouse = new Vector2(Infinity, Infinity);
const mouseV3 = new Vector3();
const mousePlane = new Plane(new Vector3(0, 0, 1), 0);
const raycaster = new Raycaster();
@ -59,6 +60,7 @@ export default function useThree() {
scene: null,
size,
mouse, mouseV3,
raycaster,
init,
dispose,
render,
@ -109,15 +111,17 @@ export default function useThree() {
setSize(conf.width | 300, conf.height | 150);
}
conf.mouse_move = conf.mouse_move || conf.mouse_over;
if (conf.mouse_move) {
if (conf.mouse_move === 'body') {
// conf.mouse_move = conf.mouse_move || conf.mouse_over;
if (conf.use_pointer) {
if (conf.use_pointer === true) {
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);
obj.mouse_move_element.addEventListener('touchstart', onTouchstart);
obj.mouse_move_element.addEventListener('touchmove', onTouchmove)
}
if (conf.click) {
@ -258,36 +262,50 @@ export default function useThree() {
* mouse change
*/
function onMousechange(e) {
if (conf.mouse_over || conf.mouse_raycast) {
raycaster.setFromCamera(mouse, obj.camera);
// if (conf.mouse_over || conf.mouse_raycast) {
// raycaster.setFromCamera(mouse, obj.camera);
if (conf.mouse_raycast) {
// get mouse 3d position
obj.camera.getWorldDirection(mousePlane.normal);
mousePlane.normal.normalize();
raycaster.ray.intersectPlane(mousePlane, mouseV3);
// if (conf.mouse_raycast) {
// // get mouse 3d position
// obj.camera.getWorldDirection(mousePlane.normal);
// mousePlane.normal.normalize();
// raycaster.ray.intersectPlane(mousePlane, mouseV3);
// }
// if (conf.mouse_over) {
// const onObjects = raycaster.intersectObjects(intersectObjects);
// const offObjects = [...intersectObjects];
// for (let i = 0; i < onObjects.length; i++) {
// const o = onObjects[i].object;
// if (!o.hover && o.onHover) {
// o.hover = true;
// o.onHover(true);
// }
// offObjects.splice(offObjects.indexOf(o), 1);
// }
// for (let i = 0; i < offObjects.length; i++) {
// const o = offObjects[i];
// if (o.hover && o.onHover) {
// o.hover = false;
// o.onHover(false);
// }
// }
// }
// }
}
if (conf.mouse_over) {
const onObjects = raycaster.intersectObjects(intersectObjects);
const offObjects = [...intersectObjects];
for (let i = 0; i < onObjects.length; i++) {
const o = onObjects[i].object;
if (!o.hover && o.onHover) {
o.hover = true;
o.onHover(true);
}
offObjects.splice(offObjects.indexOf(o), 1);
}
for (let i = 0; i < offObjects.length; i++) {
const o = offObjects[i];
if (o.hover && o.onHover) {
o.hover = false;
o.onHover(false);
}
}
}
/**
* touch start
*/
function onTouchstart(evt) {
console.log('TODO: touchstart', evt)
}
/**
* touch move
*/
function onTouchmove(evt) {
console.log('TODO: touchmove', evt)
}
/**