aframe-extras
Version:
Add-ons and examples for A-Frame VR.
278 lines (242 loc) • 7.61 kB
JavaScript
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory();
else if(typeof define === 'function' && define.amd)
define([], factory);
else {
var a = factory();
for(var i in a) (typeof exports === 'object' ? exports : root)[i] = a[i];
}
})(self, () => {
return /******/ (() => { // webpackBootstrap
/******/ var __webpack_modules__ = ({
/***/ "./src/primitives/a-grid.js":
/*!**********************************!*\
!*** ./src/primitives/a-grid.js ***!
\**********************************/
/***/ ((module) => {
/**
* Flat grid.
*
* Defaults to 75x75.
*/
module.exports = AFRAME.registerPrimitive('a-grid', {
defaultComponents: {
geometry: {
primitive: 'plane',
width: 75,
height: 75
},
rotation: {x: -90, y: 0, z: 0},
material: {
src: 'url(https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras@v1.16.3/assets/grid.png)',
repeat: '75 75'
}
},
mappings: {
width: 'geometry.width',
height: 'geometry.height',
src: 'material.src'
}
});
/***/ }),
/***/ "./src/primitives/a-ocean.js":
/*!***********************************!*\
!*** ./src/primitives/a-ocean.js ***!
\***********************************/
/***/ ((module) => {
/**
* Flat-shaded ocean primitive.
*
* Based on a Codrops tutorial:
* http://tympanus.net/codrops/2016/04/26/the-aviator-animating-basic-3d-scene-threejs/
*/
module.exports.Primitive = AFRAME.registerPrimitive('a-ocean', {
defaultComponents: {
ocean: {},
rotation: {x: -90, y: 0, z: 0}
},
mappings: {
width: 'ocean.width',
depth: 'ocean.depth',
density: 'ocean.density',
amplitude: 'ocean.amplitude',
amplitudeVariance: 'ocean.amplitudeVariance',
speed: 'ocean.speed',
speedVariance: 'ocean.speedVariance',
color: 'ocean.color',
opacity: 'ocean.opacity'
}
});
module.exports.Component = AFRAME.registerComponent('ocean', {
schema: {
// Dimensions of the ocean area.
width: {default: 10, min: 0},
depth: {default: 10, min: 0},
// Density of waves.
density: {default: 10},
// Wave amplitude and variance.
amplitude: {default: 0.1},
amplitudeVariance: {default: 0.3},
// Wave speed and variance.
speed: {default: 1},
speedVariance: {default: 2},
// Material.
color: {default: '#7AD2F7', type: 'color'},
opacity: {default: 0.8}
},
/**
* Use play() instead of init(), because component mappings – unavailable as dependencies – are
* not guaranteed to have parsed when this component is initialized.
*/
play: function () {
const el = this.el;
const data = this.data;
let material = el.components.material;
const geometry = new THREE.PlaneGeometry(data.width, data.depth, data.density, data.density);
this.waves = [];
const posAttribute = geometry.getAttribute('position');
for (let i = 0; i < posAttribute.count; i++) {
this.waves.push({
z: posAttribute.getZ(i),
ang: Math.random() * Math.PI * 2,
amp: data.amplitude + Math.random() * data.amplitudeVariance,
speed: (data.speed + Math.random() * data.speedVariance) / 1000 // radians / frame
});
}
if (!material) {
material = {};
material.material = new THREE.MeshPhongMaterial({
color: data.color,
transparent: data.opacity < 1,
opacity: data.opacity,
flatShading: true,
});
}
this.mesh = new THREE.Mesh(geometry, material.material);
el.setObject3D('mesh', this.mesh);
},
remove: function () {
this.el.removeObject3D('mesh');
},
tick: function (t, dt) {
if (!dt) return;
const posAttribute = this.mesh.geometry.getAttribute('position');
for (let i = 0; i < posAttribute.count; i++){
const vprops = this.waves[i];
const value = vprops.z + Math.sin(vprops.ang) * vprops.amp;
posAttribute.setZ(i, value);
vprops.ang += vprops.speed * dt;
}
posAttribute.needsUpdate = true;
}
});
/***/ }),
/***/ "./src/primitives/a-tube.js":
/*!**********************************!*\
!*** ./src/primitives/a-tube.js ***!
\**********************************/
/***/ ((module) => {
/**
* Tube following a custom path.
*
* Usage:
*
* ```html
* <a-tube path="5 0 5, 5 0 -5, -5 0 -5" radius="0.5"></a-tube>
* ```
*/
module.exports.Primitive = AFRAME.registerPrimitive('a-tube', {
defaultComponents: {
tube: {},
},
mappings: {
path: 'tube.path',
segments: 'tube.segments',
radius: 'tube.radius',
'radial-segments': 'tube.radialSegments',
closed: 'tube.closed'
}
});
module.exports.Component = AFRAME.registerComponent('tube', {
schema: {
path: {default: []},
segments: {default: 64},
radius: {default: 1},
radialSegments: {default: 8},
closed: {default: false}
},
init: function () {
const el = this.el,
data = this.data;
let material = el.components.material;
if (!data.path.length) {
console.error('[a-tube] `path` property expected but not found.');
return;
}
const curve = new THREE.CatmullRomCurve3(data.path.map(function (point) {
point = point.split(' ');
return new THREE.Vector3(Number(point[0]), Number(point[1]), Number(point[2]));
}));
const geometry = new THREE.TubeGeometry(
curve, data.segments, data.radius, data.radialSegments, data.closed
);
if (!material) {
material = {};
material.material = new THREE.MeshPhongMaterial();
}
this.mesh = new THREE.Mesh(geometry, material.material);
this.el.setObject3D('mesh', this.mesh);
},
update: function (prevData) {
if (!Object.keys(prevData).length) return;
this.remove();
this.init();
},
remove: function () {
if (this.mesh) this.el.removeObject3D('mesh');
}
});
/***/ })
/******/ });
/************************************************************************/
/******/ // The module cache
/******/ var __webpack_module_cache__ = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/ // Check if module is in cache
/******/ var cachedModule = __webpack_module_cache__[moduleId];
/******/ if (cachedModule !== undefined) {
/******/ return cachedModule.exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = __webpack_module_cache__[moduleId] = {
/******/ // no module.id needed
/******/ // no module.loaded needed
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/************************************************************************/
var __webpack_exports__ = {};
// This entry needs to be wrapped in an IIFE because it needs to be isolated against other modules in the chunk.
(() => {
/*!*********************************!*\
!*** ./src/primitives/index.js ***!
\*********************************/
__webpack_require__(/*! ./a-grid */ "./src/primitives/a-grid.js");
__webpack_require__(/*! ./a-ocean */ "./src/primitives/a-ocean.js");
__webpack_require__(/*! ./a-tube */ "./src/primitives/a-tube.js");
})();
/******/ return __webpack_exports__;
/******/ })()
;
});
//# sourceMappingURL=aframe-extras.primitives.js.map