diff --git a/src/components/liquid/LiquidPlane.js b/src/components/liquid/LiquidPlane.js index 37d29bf..dcb5505 100644 --- a/src/components/liquid/LiquidPlane.js +++ b/src/components/liquid/LiquidPlane.js @@ -1,7 +1,7 @@ import { DoubleSide, Mesh, MeshStandardMaterial, PlaneGeometry } from 'three'; import { watch } from 'vue'; import Object3D from '../../core/Object3D.js'; -import { bindProps } from '../../tools.js'; +import { bindProps } from '../../tools'; import LiquidEffect from './LiquidEffect.js'; export default { diff --git a/src/components/sliders/Slider1.vue b/src/components/sliders/Slider1.vue index 86836e2..fcb947e 100644 --- a/src/components/sliders/Slider1.vue +++ b/src/components/sliders/Slider1.vue @@ -14,7 +14,7 @@ import Camera from '../../core/PerspectiveCamera.js'; import Renderer from '../../core/Renderer.js'; import Scene from '../../core/Scene.js'; -import { lerp } from '../../tools.js'; +import { lerp } from '../../tools'; import AnimatedPlane from './AnimatedPlane.js'; import useTextures from '../../use/useTextures'; diff --git a/src/components/sliders/Slider2.vue b/src/components/sliders/Slider2.vue index be3d5ef..b277ba1 100644 --- a/src/components/sliders/Slider2.vue +++ b/src/components/sliders/Slider2.vue @@ -13,7 +13,7 @@ import OrthographicCamera from '../../core/OrthographicCamera.js'; import Renderer from '../../core/Renderer.js'; import Scene from '../../core/Scene.js'; -import { lerp, lerpv2 } from '../../tools.js'; +import { lerp, lerpv2 } from '../../tools'; import ZoomBlurImage from './ZoomBlurImage.js'; import useTextures from '../../use/useTextures.js'; diff --git a/src/core/Camera.js b/src/core/Camera.js new file mode 100644 index 0000000..659af02 --- /dev/null +++ b/src/core/Camera.js @@ -0,0 +1,11 @@ +// import Object3D from '../core/Object3D.js'; + +export default { + // TODO: eventually extend Object3D, for now: error 'injection "scene" not found' + // because camera is a sibling of scene in Trois + // extends: Object3D, + inject: ['three'], + render() { + return this.$slots.default ? this.$slots.default() : []; + }, +} \ No newline at end of file diff --git a/src/core/Object3D.js b/src/core/Object3D.js index a5506c8..773108f 100644 --- a/src/core/Object3D.js +++ b/src/core/Object3D.js @@ -1,20 +1,38 @@ +import { Vector2 } from 'three'; import { watch } from 'vue'; -import { bindProp } from '../tools.js'; +import { bindProp } from '../tools/index.js'; export default { name: 'Object3D', inject: ['three', 'scene', 'rendererComponent'], - emits: ['created', 'ready'], + emits: ['created', 'ready', 'pointerEnter', 'pointerOver', 'pointerLeave', 'click'], props: { position: { 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 } }, lookAt: { type: Object, default: null }, + onPointerEnter: { type: Function, default: null }, + onPointerOver: { type: Function, default: null }, + onPointerLeave: { type: Function, default: null }, + onClick: { type: Function, default: null }, + usePointerEvents: { type: Boolean, default: false }, + pointerObjects: { type: [Boolean, Array], default: null } + }, + data() { + return { + pointerOver: null + } }, // can't use setup because it will not be used in sub components // setup() {}, unmounted() { if (this._parent) this._parent.remove(this.o3d); + + // teardown listeners + this.three.offBeforeRender(this.pointerHandler); + if (this.three.mouse_move_element) { + this.three.mouse_move_element.removeEventListener('mouseleave', this.renderElementLeaveHandler) + } }, methods: { initObject3D(o3d) { @@ -29,6 +47,24 @@ 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.usePointerEvents + || this.onPointerEnter + || this.onPointerOver + || this.onPointerLeave + || this.onClick) { + this.three.onBeforeRender(this.pointerHandler); + } + if (this.onPointerLeave) { + // we need to wait a tick so the mouse_move_element is created + // TODO: more robust fix + this.$nextTick(() => this.three.mouse_move_element.addEventListener('mouseleave', this.renderElementLeaveHandler)); + } + if (this.onClick) { + window.addEventListener('click', this.clickHandler); + // TODO: touch + } + + // find first viable parent let parent = this.$parent; while (parent) { if (parent.add) { @@ -43,6 +79,103 @@ export default { }, add(o) { this.o3d.add(o); }, remove(o) { this.o3d.remove(o); }, + pointerHandler() { + this.three.raycaster.setFromCamera(this.three.mouse, this.three.camera); + + // determine what we're raycasting against + let objectsToCastAgainst = this.pointerObjects; + if (objectsToCastAgainst) { + // cast against all objects in scene if prop is `true` + if (objectsToCastAgainst === true) { + objectsToCastAgainst = this.three.scene.children; + } + } else { + // default: just cast against this object + objectsToCastAgainst = [this.o3d]; + } + + // find all intersects + const intersects = this.three.raycaster.intersectObjects(objectsToCastAgainst); + // determine if the first intersect is this object + const match = intersects.length && + intersects[0].object.uuid === this.o3d.uuid + ? intersects[0] + : null; + + // if so, let's start the callback process + if (match) { + // pointer is newly over o3d + if (!this.pointerOver) { + this.pointerOver = true; + + if (this.onPointerEnter) { + + this.onPointerEnter({ + object: this.o3d, + intersect: match + }); + + if (this.usePointerEvents) { + this.$emit('pointerEnter', { + object: this.o3d, + intersect: match + }); + } + } + } + // pointer is still over o3d + else if (this.onPointerOver) { + this.onPointerOver({ + object: this.o3d, + intersect: match + }); + + if (this.usePointerEvents) { + this.$emit('pointerOver', { + object: this.o3d, + intersect: match + }); + } + } + } else { + // pointer is not over o3d + + // pointer has just left o3d + if (this.pointerOver) { + this.pointerOver = false; + if (this.onPointerLeave) { + this.onPointerLeave({ object: this.o3d }); + } + + if (this.usePointerEvents) { + this.$emit('pointerLeave', { + object: this.o3d + }); + } + } + } + }, + clickHandler(evt) { + if (this.pointerOver) { + // cast a ray so we can provide hit info + this.three.raycaster.setFromCamera(this.three.mouse, this.three.camera); + const [intersect] = this.three.raycaster.intersectObjects([this.o3d]); + + // callbacks and events + if (this.onClick) { + this.onClick({ object: this.o3d, intersect }); + } + if (this.usePointerEvents) { + this.$emit('click', { object: this.o3d, intersect }); + } + } + }, + renderElementLeaveHandler() { + // since the mouse is off the renderer, we'll set its values to an unreachable number + this.three.mouse.x = this.three.mouse.y = Infinity; + // then run the normal pointer handler with these updated mouse values + this.pointerHandler(); + } }, render() { return this.$slots.default ? this.$slots.default() : []; diff --git a/src/core/OrthographicCamera.js b/src/core/OrthographicCamera.js index 14dc5e2..c5bb443 100644 --- a/src/core/OrthographicCamera.js +++ b/src/core/OrthographicCamera.js @@ -1,8 +1,10 @@ import { OrthographicCamera } from 'three'; import { watch } from 'vue'; -import { bindProp } from '../tools.js'; +import { bindProp } from '../tools'; +import Camera from './Camera.js'; export default { + extends: Camera, name: 'OrthographicCamera', inject: ['three'], props: { @@ -28,6 +30,5 @@ export default { this.three.camera = this.camera; }, - render() { return []; }, __hmrId: 'OrthographicCamera', }; diff --git a/src/core/PerspectiveCamera.js b/src/core/PerspectiveCamera.js index 7ba8e6c..0ece470 100644 --- a/src/core/PerspectiveCamera.js +++ b/src/core/PerspectiveCamera.js @@ -1,8 +1,10 @@ import { PerspectiveCamera } from 'three'; import { watch } from 'vue'; -import { bindProp } from '../tools.js'; +import { bindProp } from '../tools'; +import Camera from './Camera.js'; export default { + extends: Camera, name: 'PerspectiveCamera', inject: ['three'], props: { @@ -29,6 +31,5 @@ export default { this.three.camera = this.camera; }, - render() { return []; }, __hmrId: 'PerspectiveCamera', }; diff --git a/src/core/Raycaster.js b/src/core/Raycaster.js new file mode 100644 index 0000000..3f5f9a1 --- /dev/null +++ b/src/core/Raycaster.js @@ -0,0 +1,166 @@ +import { Raycaster, Vector2 } from 'three' + +export default { + name: 'Raycaster', + inject: ['three'], + props: { + onBeforeRender: { + type: Function, + default: null + }, + onPointerEnter: { + type: Function, + default: null + }, + onPointerLeave: { + type: Function, + default: null + }, + onPointerOver: { + type: Function, + default: null + }, + onClick: { + type: Function, + default: null + }, + scene: { + type: Object, + default: null + }, + // user-provided camera. defaults to first parent camera + camera: { + type: Object, + default: null + }, + intersects: { + type: Array, + default: null + } + }, + setup() { + const raycaster = new Raycaster(); + const pointer = new Vector2(); + + return { pointer, raycaster } + }, + data() { + return { + raycasterCamera: null + } + }, + mounted() { + // add update method + this.three.onBeforeRender(this.update); + + // if we have a custom onBeforeRender method, assume + // the user is handling everything and exit setup + if (this.onBeforeRender) return; + + + // prep non-reactive list of intersections + this._intersects = []; + + // save camera if we don't already have one + if (!this.camera) { + let parent = this.$parent; + while (parent && !this.raycasterCamera) { + this.raycasterCamera = parent.camera; + parent = parent.$parent; + } + } else { + this.raycasterCamera = this.camera; + } + + // add event listeners + window.addEventListener('mousemove', this.onMouseMove); + window.addEventListener('touchmove', this.onTouchMove); + if (this.onClick) { + window.addEventListener('click', this.clickHandler); + } + // TODO: touch + }, + methods: { + update() { + // custom callback + if (this.onBeforeRender) { + this.onBeforeRender(this.raycaster); + return; + } + + // save scene + const scene = this.scene || this.three.scene; + if (!scene) { + console.log('No scene detected'); + return; + } + + // run standard camera-based raycaster... + this.raycaster.setFromCamera(this.pointer, this.raycasterCamera); + const intersects = this.raycaster.intersectObjects( + // ...against either our predefined objects or all objects in scene + this.intersects || scene.children + ); + + // capture expired intersects + if (this.onPointerLeave) { + const newObjects = intersects.map(intersect => { + return { + object: intersect.object, + instanceId: intersect.instanceId + } + }); + // TODO: optimize + const expiredIntersects = this._intersects.filter(intersect => !newObjects.find(val => val.object === intersect.object && val.instanceId === intersect.instanceId)); + if (expiredIntersects.length) { + this.onPointerLeave(expiredIntersects); + } + } + + // capture new intersects + if (this.onPointerEnter) { + const old = this._intersects.map(intersect => { + return { + object: intersect.object, + instanceId: intersect.instanceId + } + }); + // TODO: optimize + const newIntersects = intersects.filter(intersect => !old.find(val => val.object === intersect.object && val.instanceId === intersect.instanceId)); + if (newIntersects.length) { + this.onPointerEnter(newIntersects); + } + } + + // capture current intersects + if (this.onPointerOver) { + this.onPointerOver(intersects); + } + + // save internal intersect list + this._intersects = intersects; + }, + onMouseMove(evt) { + const { top: canvasTop, left: canvasLeft } = this.three.mouse_move_element.getBoundingClientRect(); + this.pointer.x = ((evt.x - canvasLeft) / this.three.size.width) * 2 - 1; + this.pointer.y = - ((evt.y - canvasTop) / this.three.size.height) * 2 + 1; + }, + clickHandler(evt) { + // if we have any intersects, fire onclick method + if (this._intersects && this._intersects.length) { + this.onClick(this._intersects); + } + } + }, + render() { + return this.$slots.default ? this.$slots.default() : []; + }, + unmounted() { + window.removeEventListener('mousemove', this.onMouseMove); + window.removeEventListener('touchstart', this.onTouchMove); + window.removeEventListener('click', this.clickHandler); + + // TODO: touch + }, + __hmrId: 'Raycaster', +}; diff --git a/src/core/Renderer.js b/src/core/Renderer.js index 0a39747..c9ec58d 100644 --- a/src/core/Renderer.js +++ b/src/core/Renderer.js @@ -7,10 +7,11 @@ 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 }, - click: { 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 }, shadow: Boolean, @@ -38,10 +39,11 @@ export default { alpha: this.alpha, autoClear: this.autoClear, orbit_ctrl: this.orbitCtrl, - mouse_move: this.mouseMove, - mouse_raycast: this.mouseRaycast, - mouse_over: this.mouseOver, - click: this.click, + // 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, height: this.height, diff --git a/src/core/index.js b/src/core/index.js index 4428c1e..93be142 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -5,3 +5,4 @@ export { default as Camera } from './PerspectiveCamera.js'; export { default as Group } from './Group.js'; export { default as Scene } from './Scene.js'; export { default as Object3D } from './Object3D.js'; +export { default as Raycaster } from './Raycaster.js'; \ No newline at end of file diff --git a/src/core/useThree.js b/src/core/useThree.js index dc982e9..90b9973 100644 --- a/src/core/useThree.js +++ b/src/core/useThree.js @@ -19,10 +19,11 @@ export default function useThree() { alpha: false, autoClear: true, orbit_ctrl: false, - mouse_move: false, - mouse_raycast: false, - mouse_over: false, - click: false, + // mouse_move: false, + // mouse_raycast: false, + // mouse_over: false, + use_pointer: true, + // click: false, resize: true, width: 0, height: 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,20 +111,23 @@ 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') { - obj.mouse_move_element = document.body; - } else { + // conf.mouse_move = conf.mouse_move || conf.mouse_over; + if (conf.use_pointer) { + if (conf.use_pointer === true) { + // use renderer element as mousemove by default obj.mouse_move_element = obj.renderer.domElement; + } else { + // use custom element as mousemove element + obj.mouse_move_element = conf.use_pointer; } obj.mouse_move_element.addEventListener('mousemove', onMousemove); obj.mouse_move_element.addEventListener('mouseleave', onMouseleave); + // TODO: touch } - if (conf.click) { - obj.renderer.domElement.addEventListener('click', onClick); - } + // if (conf.click) { + // obj.renderer.domElement.addEventListener('click', onClick); + // } afterInitCallbacks.forEach(c => c()); @@ -211,7 +216,8 @@ export default function useThree() { obj.mouse_move_element.removeEventListener('mousemove', onMousemove); obj.mouse_move_element.removeEventListener('mouseleave', onMouseleave); } - obj.renderer.domElement.removeEventListener('click', onClick); + // obj.renderer.domElement.removeEventListener('click', onClick); + // TODO: touch if (obj.orbitCtrl) obj.orbitCtrl.dispose(); this.renderer.dispose(); } @@ -219,75 +225,37 @@ export default function useThree() { /** */ function updateMouse(e) { - const rect = e.target.getBoundingClientRect(); - mouse.x = ((e.clientX - rect.left) / size.width) * 2 - 1; - mouse.y = -((e.clientY - rect.top) / size.height) * 2 + 1; + const rect = obj.mouse_move_element.getBoundingClientRect(); + mouse.x = ((e.x - rect.left) / size.width) * 2 - 1; + mouse.y = -((e.y - rect.top) / size.height) * 2 + 1; } /** * click listener */ - function onClick(e) { - updateMouse(e); - raycaster.setFromCamera(mouse, obj.camera); - const objects = raycaster.intersectObjects(intersectObjects); - for (let i = 0; i < objects.length; i++) { - const o = objects[i].object; - if (o.onClick) o.onClick(e); - } - } + // function onClick(e) { + // updateMouse(e); + // raycaster.setFromCamera(mouse, obj.camera); + // const objects = raycaster.intersectObjects(intersectObjects); + // for (let i = 0; i < objects.length; i++) { + // const o = objects[i].object; + // if (o.onClick) o.onClick(e); + // } + // } /** * mousemove listener */ function onMousemove(e) { updateMouse(e); - onMousechange(e); } /** * mouseleave listener */ function onMouseleave(e) { - // mouse.x = 0; - // mouse.y = 0; - onMousechange(e); - } - - /** - * mouse change - */ - function onMousechange(e) { - 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_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); - } - } - } - } + mouse.x = Infinity; + mouse.y = Infinity; } /** diff --git a/src/effects/TiltShiftPass.js b/src/effects/TiltShiftPass.js index e60b7d9..26a2fa8 100644 --- a/src/effects/TiltShiftPass.js +++ b/src/effects/TiltShiftPass.js @@ -3,7 +3,7 @@ import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass.js'; import { watch } from 'vue'; import EffectPass from './EffectPass.js'; import TiltShift from '../shaders/TiltShift.js'; -import { bindProp } from '../tools.js'; +import { bindProp } from '../tools'; export default { extends: EffectPass, diff --git a/src/effects/ZoomBlurPass.js b/src/effects/ZoomBlurPass.js index 910aa84..b6786af 100644 --- a/src/effects/ZoomBlurPass.js +++ b/src/effects/ZoomBlurPass.js @@ -1,7 +1,7 @@ import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass.js'; import EffectPass from './EffectPass.js'; import ZoomBlur from '../shaders/ZoomBlur.js'; -import { bindProp } from '../tools.js'; +import { bindProp } from '../tools'; export default { extends: EffectPass, diff --git a/src/index.js b/src/index.js index c648fae..87dd77d 100644 --- a/src/index.js +++ b/src/index.js @@ -8,4 +8,4 @@ export * from './effects/index.js'; // export * from './components/index.js'; -export * from './tools.js'; +export * from './tools'; diff --git a/src/lights/Light.js b/src/lights/Light.js index 73dcf3c..d42dacd 100644 --- a/src/lights/Light.js +++ b/src/lights/Light.js @@ -1,6 +1,6 @@ import { watch } from 'vue'; import Object3D from '../core/Object3D.js'; -import { bindProp, setFromProp } from '../tools.js'; +import { bindProp, setFromProp } from '../tools'; export default { extends: Object3D, diff --git a/src/materials/BasicMaterial.js b/src/materials/BasicMaterial.js index 6a82eca..d0183a2 100644 --- a/src/materials/BasicMaterial.js +++ b/src/materials/BasicMaterial.js @@ -1,5 +1,5 @@ import { MeshBasicMaterial } from 'three'; -import { bindProps, propsValues } from '../tools.js'; +import { bindProps, propsValues } from '../tools'; import Material, { wireframeProps } from './Material'; export default { diff --git a/src/materials/LambertMaterial.js b/src/materials/LambertMaterial.js index 7e33e35..b29c605 100644 --- a/src/materials/LambertMaterial.js +++ b/src/materials/LambertMaterial.js @@ -1,5 +1,5 @@ import { MeshLambertMaterial } from 'three'; -import { bindProps, propsValues } from '../tools.js'; +import { bindProps, propsValues } from '../tools'; import Material, { wireframeProps } from './Material'; export default { diff --git a/src/materials/MatcapMaterial.js b/src/materials/MatcapMaterial.js index 6595aed..0f4349a 100644 --- a/src/materials/MatcapMaterial.js +++ b/src/materials/MatcapMaterial.js @@ -1,6 +1,6 @@ import { MeshMatcapMaterial, TextureLoader } from 'three'; // import { watch } from 'vue'; -import { propsValues, getMatcapUrl } from '../tools.js'; +import { propsValues, getMatcapUrl } from '../tools'; import Material from './Material'; export default { diff --git a/src/materials/PhongMaterial.js b/src/materials/PhongMaterial.js index 2a0258a..9585a96 100644 --- a/src/materials/PhongMaterial.js +++ b/src/materials/PhongMaterial.js @@ -1,6 +1,6 @@ import { MeshPhongMaterial } from 'three'; import { watch } from 'vue'; -import { bindProps, propsValues } from '../tools.js'; +import { bindProps, propsValues } from '../tools'; import Material, { wireframeProps } from './Material'; export default { diff --git a/src/materials/PhysicalMaterial.js b/src/materials/PhysicalMaterial.js index d8dca76..84edc6a 100644 --- a/src/materials/PhysicalMaterial.js +++ b/src/materials/PhysicalMaterial.js @@ -1,5 +1,5 @@ import { MeshPhysicalMaterial } from 'three'; -import { propsValues } from '../tools.js'; +import { propsValues } from '../tools'; import StandardMaterial from './StandardMaterial'; export default { diff --git a/src/materials/ShaderMaterial.js b/src/materials/ShaderMaterial.js index 1677b10..d9d14af 100644 --- a/src/materials/ShaderMaterial.js +++ b/src/materials/ShaderMaterial.js @@ -1,6 +1,6 @@ import { ShaderMaterial } from 'three'; import { watch } from 'vue'; -import { propsValues, defaultFragmentShader, defaultVertexShader } from '../tools.js'; +import { propsValues, defaultFragmentShader, defaultVertexShader } from '../tools'; export default { inject: ['three', 'mesh'], diff --git a/src/materials/StandardMaterial.js b/src/materials/StandardMaterial.js index 1c39a0d..3e18406 100644 --- a/src/materials/StandardMaterial.js +++ b/src/materials/StandardMaterial.js @@ -1,6 +1,6 @@ import { MeshStandardMaterial } from 'three'; import { watch } from 'vue'; -import { bindProp, bindProps, propsValues } from '../tools.js'; +import { bindProp, bindProps, propsValues } from '../tools'; import Material, { wireframeProps } from './Material'; const props = { diff --git a/src/materials/Texture.js b/src/materials/Texture.js index 7797089..c7c3033 100644 --- a/src/materials/Texture.js +++ b/src/materials/Texture.js @@ -1,6 +1,6 @@ import { ClampToEdgeWrapping, LinearFilter, LinearMipmapLinearFilter, TextureLoader, UVMapping } from 'three'; import { watch } from 'vue'; -import { bindProp } from '../tools.js'; +import { bindProp } from '../tools'; export default { inject: ['material'], diff --git a/src/materials/ToonMaterial.js b/src/materials/ToonMaterial.js index f790edd..b87d4a1 100644 --- a/src/materials/ToonMaterial.js +++ b/src/materials/ToonMaterial.js @@ -1,5 +1,5 @@ import { MeshToonMaterial } from 'three'; -import { bindProps, propsValues } from '../tools.js'; +import { bindProps, propsValues } from '../tools'; import Material, { wireframeProps } from './Material'; export default { diff --git a/src/meshes/Gem.js b/src/meshes/Gem.js index 71f90f1..9d33be1 100644 --- a/src/meshes/Gem.js +++ b/src/meshes/Gem.js @@ -8,7 +8,7 @@ import { WebGLCubeRenderTarget, } from 'three'; import Mesh from './Mesh.js'; -import { bindProp } from '../tools.js'; +import { bindProp } from '../tools'; export default { extends: Mesh, diff --git a/src/meshes/InstancedMesh.js b/src/meshes/InstancedMesh.js index d038dd2..a5a0bca 100644 --- a/src/meshes/InstancedMesh.js +++ b/src/meshes/InstancedMesh.js @@ -1,6 +1,6 @@ import { InstancedMesh } from 'three'; import Object3D from '../core/Object3D.js'; -import { bindProp } from '../tools.js'; +import { bindProp } from '../tools'; export default { extends: Object3D, diff --git a/src/meshes/RefractionMesh.js b/src/meshes/RefractionMesh.js index 431a5f4..ce0a443 100644 --- a/src/meshes/RefractionMesh.js +++ b/src/meshes/RefractionMesh.js @@ -6,7 +6,7 @@ import { WebGLCubeRenderTarget, } from 'three'; import Mesh from './Mesh.js'; -import { bindProp } from '../tools.js'; +import { bindProp } from '../tools'; export default { extends: Mesh, diff --git a/src/plugin.js b/src/plugin.js index bdee5f3..b1a4352 100644 --- a/src/plugin.js +++ b/src/plugin.js @@ -7,6 +7,7 @@ export const TroisJSVuePlugin = { 'Camera', 'OrthographicCamera', 'PerspectiveCamera', + 'Raycaster', 'Renderer', 'Scene', 'Group', diff --git a/src/tools.js b/src/tools/index.js similarity index 100% rename from src/tools.js rename to src/tools/index.js