aframe-click-drag-component
aframe-click-drag-component copied to clipboard
jesstelford
Not working from CDN
HI Jesstel, I am trying out the component from the CDN link, however its not working. It gives following exceptions: Uncaught ReferenceError: exports is not defined Uncaught ReferenceError: registerAframeClickDragComponent is not defined
I tried webpack on the script from CDN and then it gives just Uncaught ReferenceError: registerAframeClickDragComponent is not defined
Please let me know how to use it. Thanks and regards, Quais Husain
If you install it using NPM you will find compiled version which is working under:
node_modules/aframe-click-drag-component/dist/aframe-click-drag-component.min.js
I hope this helps :)
Thanks Jess for this awesome script!
How can I use it withoust using npm. I am trying with aframe using javascript links in my html code. But not able to get any click and drag response. Any help with that?
@arpit2050 That's been the problem. It seems that the code that is correct comes from npm.
I'd also like this to be available with javascript and no npm install!
Hey can you provide a sample code as I am not able to drag and drop a component.Following is my code
<a-scene > <a-sky id="room" src="../assets/imgs/room_360.jpg" rotation="360 180 360"></a-sky> <a-sphere click-drag position="-1 1.2 -1" radius="0.25" color="#EF2D5E"></a-sphere> </a-scene>
Please let me know what I am doing wrong.
@jesstelford This plugin is not working when called from cdn. I get the following reference error:
Uncaught ReferenceError: exports is not defined
at unpkg.com/[email protected]/lib/index.js:3
Please help as I am stuck on it from days
@TitikshaDaga Yes the CDN isn't working. What we've done is to download the package via npm and add it to our .js file.
@superjose what did u write in ur .js file? I have an ionic cordova project. A-frame works via cdn but A-frame drag and drop component doesn't. What should I do?
@TitikshaDaga Sure! Ask me anything.
First step: Install it with NPM
npm install aframe-click-drag-component
Second, you have to import it using Webpack or Browserify:
import registerClickDrag from 'aframe-click-drag-component';
Third: Register A-Frame. Since you said that you were using A-Frame through a CDN (Recommended), then you have to pass the current A-Frame object, which can be accessed through window.AFRAME
registerClickDrag(window.AFRAME);
If we wrap everything that I've said: (I'm assuming you're using either Webpack or Browserify)
In your main index.html file:
<head>
<title>My A-Frame Scene</title>
<script src="https://aframe.io/releases/0.7.1/aframe.min.js"></script>
</head>
<body>
<a-scene>
</a-scene>
<!-- Bundle.js from Webpack or Browserify -->
<script src="./bundle.js"> </script>
</body>
Inside bundle.js:
// Put these where you put the imports, it doesn't matter as long
// as aframe is loaded first.
`import registerClickDrag from 'aframe-click-drag-component';
`registerClickDrag(window.AFRAME);`
// Continue with your code
If you need anything else, let me know.
If you're using Webpack or Browserify you would usually have one .js entry file (Your main .js) where you perform a series of imports and requires:
@superjose So this is my code and let me know where should I make the changes. I have installed aframe and aframe-click-drag-component using npm. //index.html `
`//home.html
<a-scene> <a-sky src="assets/imgs/room.jpg" ></a-sky> <a-sphere click-drag position="0 0 0" radius="1.25" id="sphere" color="#EF2D5E"></a-sphere> </a-scene>
//home.ts `import registerClickDrag from 'aframe-click-drag-component'; import aframe from 'aframe';
var af = new aframe(); registerClickDrag(af); `
//app.module.ts I have added the following
import { ErrorHandler, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
and then in @NgModule
schemas: [CUSTOM_ELEMENTS_SCHEMA]
Please help!!
@TitikshaDga: In home.ts, don't include A-Frame, since you're already loading it from the center
Do the following:
home.ts `import registerClickDrag from 'aframe-click-drag-component'; registerClickDrag(window.AFRAME);
I am getting the following error on window.AFRAME Property 'AFRAME' does not exist on type 'Window'
Try:
import registerClickDrag from 'aframe-click-drag-component'; document.addEventListener('DOMContentLoaded', () => { registerClickDrag(window.AFRAME); }
OR:
import registerClickDrag from 'aframe-click-drag-component'; document.addEventListener('loaded', () => { registerClickDrag(window.AFRAME); }
I am still getting the following error Property 'AFRAME' does not exist on type 'Window'
On Visual Studio Code it is showing an error but when I run it the app is running but I can't drag and drop the sphere.
:/. The body tags just go stripped. (I'm still on mobile).
Include the home.js file before the closing body tag in index.html
Ooooohhh. Wait, you are getting the error from TypeScript and not A-Frame! Yes, the problem is that AFRAME is a global variable. What you need to do is add this (preferably in a index.d.ts file, but you can include it in home.ts (Can be anywhere; I recommend you after or before the imports):
(Now I got back to my laptop):
import registerClickDrag from 'aframe-click-drag-component';
declare var window: {
AFRAME;
};
registerClickDrag(window.AFRAME);
Thanks that issue got resolved but I am still not able to click and drag the sphere. When i try to click and drag it the a-sky image is moving
I'm looking into the issue right now.
I know this goes off topic, but you can also try super hands component: https://github.com/wmurphyrd/aframe-super-hands-component
Which is way easier to setup, and works from the CDN.
So the plugin works when there is no a-sky but when there is an a-sky element the a-sky image is clicked and dragged instead of the object.
@TitikshaDaga Interesting. Because I'm currently using the environment component and it definitely uses a custom skybox. Probably the sky element itself is causing some issues.
Anyways, for those who are still looking at this. I recommend to take a look at super-hand-components.
On the other hand, here's a small tutorial on how to install it from NPM:
- Run:
npm install aframe-click-drag-component(this works with yarn as well). - You will need Browserify or Webpack to use this, since the module is wrapped in an export. Require it:
const aframeClick = require('../my-relative-path-to-root/node_modules/aframe-click-drag-component/dist/aframe-click-drag-component.min.js');
The name of the constant doesn't matter, as long as you use the same name for step 3.
- Register the component with A-Frame:
aframeClick(window.AFRAME)
Note: If you're a typescript user, you have to declare as a global variable window.AFRAME:
declare var window: {
AFRAME;
} ;
This should set it up and running, and you should be able to go. Please note that using the traditional import or the require without specifying the path will not work. This is because there's no main JavaScript file inside the folder (It's kind of broken), so we have to manually look for it, inside the dist folder.
@superjose I want to add my image in the environment="preset: " instead of using their environment="preset: " in aframe-environment-component. -Thanks.
@superjose Can you also help with the click event of changing position of object like when I click on the object and then on the screen it changes it's position without using aframe-click-drag-component. -Thanks.
@superjose For 360 degree view I used cube map and it works fine and I am able to click and drag a-box in this view but not .obj model. I have implemented click and drag by the click-drag-component. Please help!!!!
@TitikshaDaga Oh shoot I thought I answered you before. I noticed that the environment component doesn't use images, but a gradient as a background with THREE.Color, so that could be a possibility why it's not conflicting.
@TitikshaDaga For changing the position of an element onclick, you are going to need to use the raycaster from raycaster component, a-cursor element, cursor component or from super-hand-components (any of those work fine).
An example with a-cursor: https://aframe.io/docs/0.7.0/components/cursor.html
<a-scene>
<a-camera>
<a-entity cursor="fuse: true; fuseTimeout: 500"
position="0 0 -1"
geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03"
material="color: black; shader: flat">
</a-entity>
</a-camera>
<a-box id="js-box"></a-box>
</a-scene>
<script>
document.getElementById('js-box').addEventListener('click', (elem) => {
elem.detail.target.setAttribute('position', '1 2 3');
});
</script>
It was a dirty quick way of writing. Try that to see if it works.
Hi, I am able to click and drag a box via super hands component but the problem comes when I replace it with an object image. Here is the code that is not working
<a-scene>
<a-entity cubemap="folder: assets/imgs/"></a-entity>
<a-assets>
<a-asset-item id="lamp" src="assets/imgs/Lamp.obj"></a-asset-item>
</a-assets>
<a-assets></a-assets>
<a-entity progressive-controls="objects: a-entity"></a-entity>
<a-entity dynamic-body="mass:5;gravity:0;linearDamping:0.01;angularDamping:0.01;shape:auto;" width="1" height="1" depth="1" hoverable stretchable draggable dropppable clickable obj-model="obj:#lamp" scale="0.001 0.001 0.001" position="0 -1 -2"></a-entity>
</a-scene>
@superjose When dragging an entity - in the console - will you see the position attribute for that entity update the x, y and z values? I ask because I'd like to set those values permanently in my code.
@frankangelone You can read its current position with the event! And would you kindly elaborate on what you mean by "setting those value permanently in my code"?
@superjose Thanks for the reply and sorry for the delay in my response. I actually went in a different direction so please disregard my question.
I am having trouble with some of this. For some reason none of these methods are working for me in 2020. Any ideas what could be causing problems? I have followed the instructions to the T.
@ericmoore123 Sorry for taking so long to reply. It's been a while since I've worked with A-Frame. Last time it was 0.8.0, and they're already in version 1.0.3!!! (Which is awesome!!! I didn't know they break the 1.0 barrier!)
I don't know if any of these packages have any breaking changes in them that they haven't been exposed.
How to use it in Angular project? Aframe is included in the polyfills. But the same way doesn't work for this plugin.
Hey folks, I haven't used Aframe for many years, and it looks like this plug-in has gotten out of date.
If anyone is kind enough to open a PR, I'll happily merge it to get things working again 👍
