Not working from CDN - Githubissues

quaisHusain commented 7 years ago

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

A-Kojic commented 7 years ago

The same thing with me ...

Looking forward to any solutions. Thanks!

A-Kojic commented 7 years ago

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!

dunatotatos commented 7 years ago

Does not work anymore with the new version (0.5.0) of A-Frame.

superjose commented 7 years ago

I'm using A-Frame 0.6.0 and it's working with A-Kojic's suggestion.

pubaayaam commented 7 years ago

Yes, it works superjose!

arpit2050 commented 7 years ago

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?

superjose commented 7 years ago

@arpit2050 That's been the problem. It seems that the code that is correct comes from npm.

gabrieljbaker commented 7 years ago

I'd also like this to be available with javascript and no npm install!

paulacodes commented 6 years ago

Is there any javascript solution for this yet?

TitikshaDaga commented 6 years ago

Hey can you provide a sample code as I am not able to drag and drop a component.Following is my code `

` Please let me know what I am doing wrong.

TitikshaDaga commented 6 years ago

@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/aframe-click-drag-component@3.0.1/lib/index.js:3

Please help as I am stuck on it from days

superjose commented 6 years ago

@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.

TitikshaDaga commented 6 years ago

@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?

superjose commented 6 years ago

@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:

TitikshaDaga commented 6 years ago

@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 `

` //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!!

superjose commented 6 years ago

@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);

superjose commented 6 years ago

(I'm sorry. I'm on mobile right now. It's not center it's CDN)

TitikshaDaga commented 6 years ago

I am getting the following error on window.AFRAME Property 'AFRAME' does not exist on type 'Window'

superjose commented 6 years ago

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); }

TitikshaDaga commented 6 years ago

I am still getting the following error Property 'AFRAME' does not exist on type 'Window'

superjose commented 6 years ago

@TitikshaDaga

Are you including home.ts after A-Frame is loaded?

TitikshaDaga commented 6 years ago

where should I include it?

TitikshaDaga commented 6 years ago

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.

superjose commented 6 years ago

Include it before the closing body tag:

//index.html

` //home.html

superjose commented 6 years ago

:/. The body tags just go stripped. (I'm still on mobile).

Include the home.js file before the closing body tag in index.html

superjose commented 6 years ago

Can you upload a screenshot of the error un VS Code?

TitikshaDaga commented 6 years ago

screenshot from 2018-02-02 11-20-49

TitikshaDaga commented 6 years ago

screenshot from 2018-02-02 11-21-51

TitikshaDaga commented 6 years ago

I included it in index.html but getting the same error.

superjose commented 6 years ago

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);

TitikshaDaga commented 6 years ago

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

superjose commented 6 years ago

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.

TitikshaDaga commented 6 years ago

Thank you so much this plugin works perfectly. :)

TitikshaDaga commented 6 years ago

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.

superjose commented 6 years ago

@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:

1) Run: npm install aframe-click-drag-component (this works with yarn as well). 2) 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.

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.

TitikshaDaga commented 6 years ago

@superjose I want to add my image in the environment="preset: " instead of using their environment="preset: " in aframe-environment-component. -Thanks.

TitikshaDaga commented 6 years ago

@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.

TitikshaDaga commented 6 years ago

@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!!!!

superjose commented 6 years ago

@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.

superjose commented 6 years ago

@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.

TitikshaDaga commented 6 years ago

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>

frankangelone commented 6 years ago

@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.

superjose commented 6 years ago

@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"?

frankangelone commented 6 years ago

@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.

ericmoore123 commented 4 years ago

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.

superjose commented 4 years ago

@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.

neverlose-lv commented 2 years ago

How to use it in Angular project? Aframe is included in the polyfills. But the same way doesn't work for this plugin.

jesstelford commented 2 years ago

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 👍

jesstelford / aframe-click-drag-component

Not working from CDN #17