aframe | 易学教程

No movement on ios - aframe.io example runs, same(?) code not? What's the different?

阅读更多关于 No movement on ios - aframe.io example runs, same(?) code not? What's the different?

Under IOS, the solution no longer reacts to movements. My solution has worked and now is no longer working. Also the "hello world" example with the source code of Glitsch (see below) doesn't work anymore, but if you call the example from the a-frame start page ( https://aframe.io/examples/showcase/helloworld/ ), it works. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Hello, WebVR!Test VR</title> <meta name="description" content="Test VR"> <script src="https://aframe.io/aframe/dist/aframe-master.min.js" ></script> </head> <body> <a-scene background="color: yellow"> <a-box position

Alpha Animation in Aframe for a-object-model

阅读更多关于 Alpha Animation in Aframe for a-object-model

问题 I have one 3d object with its obj and mtl file which is displayed using in Aframe. I want to apply animation on it which change its Alpha value gradually for Fade out effect. I went through AFrame doc. but couldn't find anything related to 3d object alpha animation. 回答1: The built-in material component primarily works with primitives, so material="opacity: 0.5" and similarly opacity="0.5" will not work here. You'll need to modify the THREE.js materials created by your model, using a custom

aframe embeded scene with cursor mouse ray-origin

阅读更多关于 aframe embeded scene with cursor mouse ray-origin

问题 There seems to be a bug with the embedded scene and the option of mouse cursor (cursor='rayOrigin: mouse'), i've put an mouseenter and mouseleave event on a box to change it's size. It works fine as long as the page is contained in the browser, but when the page is "scrollable" the events get messed up ( like showed in the gif, link bellow). I don't know if I messed up somewhere but it seems that it comes from Aframe. There's a link bellow for the github issue ( more details on it). GIF :

AFrame: How to render a camera to a texture

阅读更多关于 AFrame: How to render a camera to a texture

I'm trying to have a second camera to show a "from the sky" view of an AFrame scene. I've learned how to do it using a 2D canvas for rendering, following this example : But I wonder if this could be done without using a external <div> , something like rendering directly to some asset, or maybe directly to the texture... My current code is: <html> <head> <script src="//aframe.io/releases/0.8.2/aframe.min.js"></script> <script> // Original code: // https://wirewhiz.com/how-to-use-a-cameras-output-as-a-texture-in-aframe/ // AFRAME.registerComponent('view',{ 'schema': { canvas: { type: 'string',

CORS error when I load image from another server inside a-sky tag

阅读更多关于 CORS error when I load image from another server inside a-sky tag

I am trying to to use a texture from my own hosted webserver but putting it into the asset-item tag I get the following error. > Access to Image at 'http://192.168.137.1:3000/cat2.jpg' from origin > 'http://localhost' has been blocked by CORS policy: No > 'Access-Control-Allow-Origin' header is present on the requested > resource. Origin 'http://localhost' is therefore not allowed access. The picture is accessible, since I can see it in the webinspector. It works perfectly in a simple image tag. Does anyone know what to do here? Thanks! Update: My code you could find below: <script src="https:

Calculate the position of an element inside a photosphere

阅读更多关于 Calculate the position of an element inside a photosphere

Im using an a-sky element to display a 360° photosphere. My problem is that I have to place inside the photosphere some elements that must act like 'markers'; but I do not understand how to calculate the x-y-z position of those elements. For example, lets say that I have a picture with size 4096x2048 and I want to place a simple box at 169,1349. I know the radius of the sphere (5000), i know the size of the box (I can choose a convenient size), I only know how to retrieve the position of that "pixel position" (169,1349) inside the sphere. Any hints? If you want to calculate position on the a

Why does my OBJ / MTL model material show up as black?

阅读更多关于 Why does my OBJ / MTL model material show up as black?

Why does my OBJ model have has no material and display as black? I have an OBJ: <a-obj-model id="gorilla" src="#gorilla-obj" mtl="#gorilla-mtl"></a-obj-model> I can see the geometry, but the material shows up as black. If you check your MTL, you might notice it is trying to use TGA or some other sort of textures that aren't plain images. In this case, you need to include additional three.js loaders. You could try including all the necessary loaders like including https://github.com/mrdoob/three.js/blob/dev/examples/js/loaders/TGALoader.js and THREE.Loader.Handlers.add( /\.tga$/i, new THREE

How to load a new scene in A-Frame?

阅读更多关于 How to load a new scene in A-Frame?

I am using A-Frame (JavaScript library). I would like to load a new scene when user clicks into a certain component in the current scene. How can I achieve this? ngokevin Check out the A-Frame Template Component . Notably the Swapping Example . You can either define your separate scenes within script tags or within separate files. Here is an example with script tag templating: <a-scene>  <a-assets> <script id="scene1" type="text/html"> <a-box></a-box> </script> <script id="scene2" type="text/html"> <a-sphere></a-sphere> </script> </a-assets> <a-entity template="src: #box"><

How to load a new scene in A-Frame?

阅读更多关于 How to load a new scene in A-Frame?

问题 I am using A-Frame (JavaScript library). I would like to load a new scene when user clicks into a certain component in the current scene. How can I achieve this? 回答1: Check out the A-Frame Template Component. Notably the Swapping Example. You can either define your separate scenes within script tags or within separate files. Here is an example with script tag templating: <a-scene>  <a-assets> <script id="scene1" type="text/html"> <a-box></a-box> </script> <script id="scene2

Preventing camera from going 'through' aframe object

阅读更多关于 Preventing camera from going 'through' aframe object

问题 Lets say I have a cylinder model that I load into my webvr scene. How can I make the object solid? I.e. the user (camera view) cannot take any position within the object or move 'through' the object. How can I achieve this? <a-scene> <a-assets> <a-asset-item id="cube-obj" src="cube.obj"></a-asset-item> </a-assets> <a-entity id="cameraWrapper" position="0 2 10" rotation="0 0 0"> <a-camera near="0.1" user-height="0" id="camera" listener></a-camera> </a-entity> <a-entity obj-model="obj: #cube