Research
Security News
Malicious npm Package Targets Solana Developers and Hijacks Funds
A malicious npm package targets Solana developers, rerouting funds in 2% of transactions to a hardcoded address.
By Socket Research Team - Dec 02, 2024
Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
aframe-custom-canvas
Advanced tools
aframe-custom-canvas
A web framework for building virtual reality experiences. (CHANGES: force aframe to use a custom canvas)
Changes from the original library
In order to use this library with g-maps library with webgl option, we changed from aframe next points:
- instead of create a canvas, find the available canvas
- don't renderer the scene/entities. This is handled outside, inside a function that executes when the g-maps ondraw triggers
- added public option to force configuration into the THREE.WebGLRenderer
- all of this is optional by configuring the a-scene use-external-canvas attribute:
<a-scene use-external-canvas="true"> // <== tries to find and use the canvas by html tag name
<a-scene use-external-canvas="{{css selector}}"> // <== tries to find and use the canvas with the css selector
<a-scene use-external-canvas="false"> // <== AFrame normal behaviour (ie. creates a canvas internally)
<a-scene> // <== AFrame normal behaviour (ie. creates a canvas internally)
Note: you could find changes with between the annotations "[INTERATICA-BEGIN]" & "[INTERATICA-END]".
Interatica Team
A-Frame
A web framework for building virtual reality experiences.
Examples
Find more examples on the homepage, A Week of A-Frame, and WebVR Directory.
Features
:eyeglasses: Virtual Reality Made Simple: A-Frame handles the 3D and WebXR
boilerplate required to get running across platforms including mobile, desktop, and all headsets (compatible with a WebXR capable browser) just by dropping in <a-scene>.
:heart: Declarative HTML: HTML is easy to read and copy-and-paste. Since A-Frame can be used from HTML, A-Frame is accessible to everyone: web developers, VR and AR enthusiasts, educators, artists, makers, kids.
:electric_plug: Entity-Component Architecture: A-Frame is a powerful framework on top of three.js, providing a declarative, composable, reusable entity-component structure for three.js. While A-Frame can be used from HTML, developers have unlimited access to JavaScript, DOM APIs, three.js, WebXR, and WebGL.
:zap: Performance: A-Frame is a thin framework on top of three.js. Although A-Frame uses the DOM, A-Frame does not touch the browser layout engine. Performance is a top priority, being battle-tested on highly interactive WebXR experiences.
:globe_with_meridians: Cross-Platform: Build VR and AR applications for any headset compatible with a WebXR capable browser. Don't have a headset or controllers? No problem! A-Frame still works on standard desktop and smartphones.
:mag: Visual Inspector: A-Frame provides a built-in visual 3D inspector
with a workflow similar to a browser's developer tools and interface similar to
Unity. Open up any A-Frame scene and hit <ctrl> + <alt> + i.
:runner: Features: Hit the ground running with A-Frame's built-in components such as geometries, materials, lights, animations, models, raycasters, shadows, positional audio, tracked controllers. Get even further with community components such as particle systems, physics, multiuser, oceans, mountains, speech recognition, or teleportation!
Usage
Example
Build VR and AR scenes in the browser with just a few lines of HTML! To start playing and publishing now, remix the starter example on:
<html>
<head>
<script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
<a-cylinder
position="1 0.75 -3"
radius="0.5"
height="1.5"
color="#FFC65D"
></a-cylinder>
<a-plane
position="0 0 -4"
rotation="-90 0 0"
width="4"
height="4"
color="#7BC8A4"
></a-plane>
<a-sky color="#ECECEC"></a-sky>
</a-scene>
</body>
</html>
With A-Frame's entity-component architecture, we can drop in community components from the ecosystem (e.g., ocean, physics) and plug them into our objects straight from HTML:
<html>
<head>
<script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-particle-system-component@1.0.x/dist/aframe-particle-system-component.min.js"></script>
<script src="https://unpkg.com/aframe-extras.ocean@%5E3.5.x/dist/aframe-extras.ocean.min.js"></script>
<script src="https://unpkg.com/aframe-gradient-sky@1.5.0/dist/gradientsky.min.js"></script>
</head>
<body>
<a-scene>
<a-entity
id="rain"
particle-system="preset: rain; color: #24CAFF; particleCount: 5000"
></a-entity>
<a-entity
id="sphere"
geometry="primitive: sphere"
material="color: #EFEFEF; shader: flat"
position="0 0.15 -5"
light="type: point; intensity: 5"
animation="property: position; easing: easeInOutQuad; dir: alternate; dur: 1000; to: 0 -0.10 -5; loop: true"
></a-entity>
<a-entity
id="ocean"
ocean="density: 20; width: 50; depth: 50; speed: 4"
material="color: #9CE3F9; opacity: 0.75; metalness: 0; roughness: 1"
rotation="-90 0 0"
></a-entity>
<a-entity
id="sky"
geometry="primitive: sphere; radius: 5000"
material="shader: gradient; topColor: 235 235 245; bottomColor: 185 185 210"
scale="-1 1 1"
></a-entity>
<a-entity id="light" light="type: ambient; color: #888"></a-entity>
</a-scene>
</body>
</html>
Builds
To use the latest stable build of A-Frame, include aframe.min.js:
<head>
<script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
</head>
To check out the stable and master builds, see the dist/ folder.
npm
npm install --save aframe
# Or yarn add aframe
require("aframe"); // e.g., with Browserify or Webpack.
Local Development
git clone https://github.com/aframevr/aframe.git # Clone the repository.
cd aframe && npm install # Install dependencies.
npm start # Start the local development server.
And open in your browser http://localhost:9000.
Generating Builds
npm run dist
Questions
For questions and support, ask on StackOverflow.
Stay in Touch
- To hang out with the community, join the A-Frame Slack.
- Follow
A Week of A-Frameon the A-Frame blog. - Follow @aframevr on Twitter.
- Subscribe to the Newsletter.
And get in touch with the maintainers!
Contributing
Get involved! Check out the Contributing Guide for how to get started.
You can also support development by buying a gorgeous A-Frame t-shirt with exclusive designs
License
This program is free software and is distributed under an MIT License.
FAQs
A web framework for building virtual reality experiences. (CHANGES: force aframe to use a custom canvas)
We found that aframe-custom-canvas demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Package last updated on 05 Mar 2024
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Related posts
Security News
Research
Typosquatting Cryptographic Libraries: Malicious npm Packages Threaten Crypto Developers with Keylogging and Wallet Theft
Socket researchers have discovered malicious npm packages targeting crypto developers, stealing credentials and wallet data using spyware delivered through typosquats of popular cryptographic libraries.
By Kirill Boychenko - Nov 27, 2024
Security News
Weekly Downloads Now Available in npm Package Search Results
Socket's package search now displays weekly downloads for npm packages, helping developers quickly assess popularity and make more informed decisions.
By Sarah Gooding - Nov 26, 2024