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 } }, rotation: { type: Object, default: { x: 0, y: 0, z: 0 } },
scale: { type: Object, default: { x: 1, y: 1, z: 1 } }, scale: { type: Object, default: { x: 1, y: 1, z: 1 } },
lookAt: { type: Object, default: null }, lookAt: { type: Object, default: null },
onPointerEnter: { type: Function, default: null }
}, },
// can't use setup because it will not be used in sub components // can't use setup because it will not be used in sub components
// setup() {}, // setup() {},
@ -29,6 +30,11 @@ export default {
if (this.lookAt) this.o3d.lookAt(this.lookAt.x, this.lookAt.y, this.lookAt.z); 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 }); 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; let parent = this.$parent;
while (parent) { while (parent) {
if (parent.add) { if (parent.add) {
@ -43,6 +49,15 @@ export default {
}, },
add(o) { this.o3d.add(o); }, add(o) { this.o3d.add(o); },
remove(o) { this.o3d.remove(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() { render() {
return this.$slots.default ? this.$slots.default() : []; return this.$slots.default ? this.$slots.default() : [];

14
src/core/Renderer.js
View File

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

88
src/core/useThree.js
View File

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