mirror of
https://github.com/troisjs/trois.git
synced 2024-11-24 04:12:02 +08:00
3197 lines
101 KiB
JavaScript
3197 lines
101 KiB
JavaScript
import { h, toRef, watch, resolveComponent, openBlock, createBlock, withCtx, createVNode, renderSlot } from 'vue';
|
||
import { Vector2, Vector3, Plane as Plane$1, Raycaster, WebGLRenderer, PerspectiveCamera as PerspectiveCamera$1, Scene as Scene$1, Color, TextureLoader, CubeTextureLoader, BoxBufferGeometry, CircleBufferGeometry, ConeBufferGeometry, CylinderBufferGeometry, DodecahedronBufferGeometry, IcosahedronBufferGeometry, LatheBufferGeometry, OctahedronBufferGeometry, PolyhedronBufferGeometry, RingBufferGeometry, SphereBufferGeometry, TetrahedronBufferGeometry, TorusBufferGeometry, TorusKnotBufferGeometry, Curve, TubeBufferGeometry, AmbientLight as AmbientLight$1, DirectionalLight as DirectionalLight$1, PointLight as PointLight$1, SpotLight as SpotLight$1, FrontSide, MeshBasicMaterial, MeshLambertMaterial, MeshPhongMaterial, MeshStandardMaterial, MeshPhysicalMaterial, ShaderChunk, UniformsUtils, ShaderLib, ShaderMaterial as ShaderMaterial$1, MeshToonMaterial, Mesh as Mesh$1, PlaneBufferGeometry, FontLoader, TextBufferGeometry, WebGLCubeRenderTarget, RGBFormat, LinearMipmapLinearFilter, CubeCamera, BackSide, DoubleSide, InstancedMesh as InstancedMesh$1, CubeRefractionMapping, SpriteMaterial, Sprite as Sprite$1, Object3D, Geometry as Geometry$1, Face3, BufferGeometry, MathUtils, InstancedBufferAttribute } from 'three';
|
||
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
|
||
import { EffectComposer as EffectComposer$1 } from 'three/examples/jsm/postprocessing/EffectComposer.js';
|
||
import { RenderPass as RenderPass$1 } from 'three/examples/jsm/postprocessing/RenderPass.js';
|
||
import { BokehPass as BokehPass$1 } from 'three/examples/jsm/postprocessing/BokehPass.js';
|
||
import { FilmPass as FilmPass$1 } from 'three/examples/jsm/postprocessing/FilmPass.js';
|
||
import { HalftonePass as HalftonePass$1 } from 'three/examples/jsm/postprocessing/HalftonePass.js';
|
||
import { SAOPass as SAOPass$1 } from 'three/examples/jsm/postprocessing/SAOPass.js';
|
||
import { UnrealBloomPass as UnrealBloomPass$1 } from 'three/examples/jsm/postprocessing/UnrealBloomPass.js';
|
||
import { gsap, Power4 } from 'gsap';
|
||
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
|
||
|
||
/**
|
||
* Three.js helper
|
||
*/
|
||
function useThree() {
|
||
// default conf
|
||
var conf = {
|
||
canvas: null,
|
||
antialias: true,
|
||
alpha: false,
|
||
autoClear: true,
|
||
orbit_ctrl: false,
|
||
mouse_move: false,
|
||
mouse_raycast: false,
|
||
resize: 'window',
|
||
width: 0,
|
||
height: 0,
|
||
};
|
||
|
||
// size
|
||
var size = {
|
||
width: 0, height: 0,
|
||
wWidth: 0, wHeight: 0,
|
||
ratio: 0,
|
||
};
|
||
|
||
// handlers
|
||
var afterInitCallbacks = [];
|
||
var afterResizeCallbacks = [];
|
||
var beforeRenderCallbacks = [];
|
||
|
||
// mouse tracking
|
||
var mouse = new Vector2();
|
||
var mouseV3 = new Vector3();
|
||
var mousePlane = new Plane$1(new Vector3(0, 0, 1), 0);
|
||
var raycaster = new Raycaster();
|
||
|
||
// returned object
|
||
var obj = {
|
||
conf: conf,
|
||
renderer: null,
|
||
camera: null,
|
||
cameraCtrl: null,
|
||
materials: {},
|
||
scene: null,
|
||
size: size,
|
||
mouse: mouse, mouseV3: mouseV3,
|
||
init: init,
|
||
dispose: dispose,
|
||
render: render,
|
||
renderC: renderC,
|
||
setSize: setSize,
|
||
onAfterInit: onAfterInit,
|
||
onAfterResize: onAfterResize, offAfterResize: offAfterResize,
|
||
onBeforeRender: onBeforeRender, offBeforeRender: offBeforeRender,
|
||
};
|
||
|
||
/**
|
||
* init three
|
||
*/
|
||
function init(params) {
|
||
if (params) {
|
||
Object.entries(params).forEach(function (ref) {
|
||
var key = ref[0];
|
||
var value = ref[1];
|
||
|
||
conf[key] = value;
|
||
});
|
||
}
|
||
|
||
if (!obj.scene) {
|
||
console.error('Missing Scene');
|
||
return;
|
||
}
|
||
|
||
if (!obj.camera) {
|
||
console.error('Missing Camera');
|
||
return;
|
||
}
|
||
|
||
obj.renderer = new WebGLRenderer({ canvas: conf.canvas, antialias: conf.antialias, alpha: conf.alpha });
|
||
obj.renderer.autoClear = conf.autoClear;
|
||
|
||
if (conf.orbit_ctrl) {
|
||
obj.orbitCtrl = new OrbitControls(obj.camera, obj.renderer.domElement);
|
||
if (conf.orbit_ctrl instanceof Object) {
|
||
Object.entries(conf.orbit_ctrl).forEach(function (ref) {
|
||
var key = ref[0];
|
||
var value = ref[1];
|
||
|
||
obj.orbitCtrl[key] = value;
|
||
});
|
||
}
|
||
}
|
||
|
||
if (conf.width && conf.height) {
|
||
setSize(conf.width, conf.height);
|
||
} else if (conf.resize) {
|
||
onResize();
|
||
window.addEventListener('resize', onResize);
|
||
}
|
||
|
||
if (conf.mouse_move) {
|
||
if (conf.mouse_move === 'body') {
|
||
obj.mouse_move_element = document.body;
|
||
} else {
|
||
obj.mouse_move_element = obj.renderer.domElement;
|
||
}
|
||
obj.mouse_move_element.addEventListener('mousemove', onMousemove);
|
||
obj.mouse_move_element.addEventListener('mouseleave', onMouseleave);
|
||
}
|
||
|
||
afterInitCallbacks.forEach(function (c) { return c(); });
|
||
|
||
return true;
|
||
}
|
||
/**
|
||
* add after init callback
|
||
*/
|
||
function onAfterInit(callback) {
|
||
afterInitCallbacks.push(callback);
|
||
}
|
||
|
||
/**
|
||
* add after resize callback
|
||
*/
|
||
function onAfterResize(callback) {
|
||
afterResizeCallbacks.push(callback);
|
||
}
|
||
|
||
/**
|
||
* remove after resize callback
|
||
*/
|
||
function offAfterResize(callback) {
|
||
afterResizeCallbacks = afterResizeCallbacks.filter(function (c) { return c !== callback; });
|
||
}
|
||
|
||
/**
|
||
* add before render callback
|
||
*/
|
||
function onBeforeRender(callback) {
|
||
beforeRenderCallbacks.push(callback);
|
||
}
|
||
|
||
/**
|
||
* remove before render callback
|
||
*/
|
||
function offBeforeRender(callback) {
|
||
beforeRenderCallbacks = beforeRenderCallbacks.filter(function (c) { return c !== callback; });
|
||
}
|
||
|
||
/**
|
||
* default render
|
||
*/
|
||
function render() {
|
||
if (obj.orbitCtrl) { obj.orbitCtrl.update(); }
|
||
beforeRenderCallbacks.forEach(function (c) { return c(); });
|
||
obj.renderer.render(obj.scene, obj.camera);
|
||
}
|
||
|
||
/**
|
||
* composer render
|
||
*/
|
||
function renderC() {
|
||
if (obj.orbitCtrl) { obj.orbitCtrl.update(); }
|
||
beforeRenderCallbacks.forEach(function (c) { return c(); });
|
||
obj.composer.render();
|
||
}
|
||
|
||
/**
|
||
* remove listeners
|
||
*/
|
||
function dispose() {
|
||
beforeRenderCallbacks = [];
|
||
window.removeEventListener('resize', onResize);
|
||
if (obj.mouse_move_element) {
|
||
obj.mouse_move_element.removeEventListener('mousemove', onMousemove);
|
||
obj.mouse_move_element.removeEventListener('mouseleave', onMouseleave);
|
||
}
|
||
if (obj.orbitCtrl) { obj.orbitCtrl.dispose(); }
|
||
this.renderer.dispose();
|
||
}
|
||
|
||
/**
|
||
* mousemove listener
|
||
*/
|
||
function onMousemove(e) {
|
||
mouse.x = (e.clientX / size.width) * 2 - 1;
|
||
mouse.y = -(e.clientY / size.height) * 2 + 1;
|
||
updateMouseV3();
|
||
}
|
||
|
||
/**
|
||
* mouseleave listener
|
||
*/
|
||
function onMouseleave(e) {
|
||
mouse.x = 0;
|
||
mouse.y = 0;
|
||
updateMouseV3();
|
||
}
|
||
|
||
/**
|
||
* get 3d mouse position
|
||
*/
|
||
function updateMouseV3() {
|
||
if (conf.mouse_raycast) {
|
||
obj.camera.getWorldDirection(mousePlane.normal);
|
||
mousePlane.normal.normalize();
|
||
raycaster.setFromCamera(mouse, obj.camera);
|
||
raycaster.ray.intersectPlane(mousePlane, mouseV3);
|
||
}
|
||
}
|
||
|
||
/**
|
||
* resize listener
|
||
*/
|
||
function onResize() {
|
||
if (conf.resize === 'window') {
|
||
setSize(window.innerWidth, window.innerHeight);
|
||
} else {
|
||
setSize(conf.resize.clientWidth, conf.resize.clientHeight);
|
||
}
|
||
afterResizeCallbacks.forEach(function (c) { return c(); });
|
||
}
|
||
|
||
/**
|
||
* update renderer size and camera
|
||
*/
|
||
function setSize(width, height) {
|
||
size.width = width;
|
||
size.height = height;
|
||
size.ratio = width / height;
|
||
|
||
obj.renderer.setSize(width, height, false);
|
||
obj.camera.aspect = size.ratio;
|
||
obj.camera.updateProjectionMatrix();
|
||
|
||
if (obj.composer) {
|
||
obj.composer.setSize(width, height);
|
||
}
|
||
|
||
var wsize = getCameraSize();
|
||
size.wWidth = wsize[0]; size.wHeight = wsize[1];
|
||
}
|
||
|
||
/**
|
||
* calculate camera visible area size
|
||
*/
|
||
function getCameraSize() {
|
||
var vFOV = (obj.camera.fov * Math.PI) / 180;
|
||
var h = 2 * Math.tan(vFOV / 2) * Math.abs(obj.camera.position.z);
|
||
var w = h * obj.camera.aspect;
|
||
return [w, h];
|
||
}
|
||
|
||
return obj;
|
||
}
|
||
|
||
var Renderer = {
|
||
props: {
|
||
antialias: {
|
||
type: Boolean,
|
||
default: true,
|
||
},
|
||
alpha: {
|
||
type: Boolean,
|
||
default: false,
|
||
},
|
||
autoClear: {
|
||
type: Boolean,
|
||
default: true,
|
||
},
|
||
shadow: {
|
||
type: Boolean,
|
||
default: false,
|
||
},
|
||
orbitCtrl: {
|
||
type: [Boolean, Object],
|
||
default: false,
|
||
},
|
||
mouseMove: {
|
||
type: [Boolean, String],
|
||
default: false,
|
||
},
|
||
mouseRaycast: {
|
||
type: Boolean,
|
||
default: false,
|
||
},
|
||
resize: {
|
||
type: [Boolean, String, Element],
|
||
default: 'window',
|
||
},
|
||
width: String,
|
||
height: String,
|
||
},
|
||
setup: function setup() {
|
||
return {
|
||
three: useThree(),
|
||
raf: true,
|
||
onMountedCallbacks: [],
|
||
};
|
||
},
|
||
provide: function provide() {
|
||
return {
|
||
three: this.three,
|
||
// renderer: this.three.renderer,
|
||
rendererComponent: this,
|
||
};
|
||
},
|
||
mounted: function mounted() {
|
||
var params = {
|
||
canvas: this.$refs.canvas,
|
||
antialias: this.antialias,
|
||
alpha: this.alpha,
|
||
autoClear: this.autoClear,
|
||
orbit_ctrl: this.orbitCtrl,
|
||
mouse_move: this.mouseMove,
|
||
mouse_raycast: this.mouseRaycast,
|
||
resize: this.resize,
|
||
width: this.width,
|
||
height: this.height,
|
||
};
|
||
|
||
if (this.three.init(params)) {
|
||
this.three.renderer.shadowMap.enabled = this.shadow;
|
||
if (this.three.composer) { this.animateC(); }
|
||
else { this.animate(); }
|
||
}
|
||
this.onMountedCallbacks.forEach(function (c) { return c(); });
|
||
},
|
||
beforeUnmount: function beforeUnmount() {
|
||
this.raf = false;
|
||
this.three.dispose();
|
||
},
|
||
methods: {
|
||
onMounted: function onMounted(callback) {
|
||
this.onMountedCallbacks.push(callback);
|
||
},
|
||
onBeforeRender: function onBeforeRender(callback) {
|
||
this.three.onBeforeRender(callback);
|
||
},
|
||
onAfterResize: function onAfterResize(callback) {
|
||
this.three.onAfterResize(callback);
|
||
},
|
||
animate: function animate() {
|
||
if (this.raf) { requestAnimationFrame(this.animate); }
|
||
this.three.render();
|
||
},
|
||
animateC: function animateC() {
|
||
if (this.raf) { requestAnimationFrame(this.animateC); }
|
||
this.three.renderC();
|
||
},
|
||
},
|
||
render: function render() {
|
||
return h(
|
||
'canvas',
|
||
{ ref: 'canvas' },
|
||
this.$slots.default()
|
||
);
|
||
},
|
||
};
|
||
|
||
function setFromProp(o, prop) {
|
||
if (prop instanceof Object) {
|
||
Object.entries(prop).forEach(function (ref) {
|
||
var key = ref[0];
|
||
var value = ref[1];
|
||
|
||
o[key] = value;
|
||
});
|
||
}
|
||
}
|
||
function propsValues(props, exclude) {
|
||
var values = {};
|
||
Object.entries(props).forEach(function (ref) {
|
||
var key = ref[0];
|
||
var value = ref[1];
|
||
|
||
if (!exclude || (exclude && !exclude.includes(key))) {
|
||
values[key] = value;
|
||
}
|
||
});
|
||
return values;
|
||
}
|
||
function lerp(value1, value2, amount) {
|
||
amount = amount < 0 ? 0 : amount;
|
||
amount = amount > 1 ? 1 : amount;
|
||
return value1 + (value2 - value1) * amount;
|
||
}
|
||
function lerpv3(v1, v2, amount) {
|
||
v1.x = lerp(v1.x, v2.x, amount);
|
||
v1.y = lerp(v1.y, v2.y, amount);
|
||
v1.z = lerp(v1.z, v2.z, amount);
|
||
}
|
||
function limit(val, min, max) {
|
||
return val < min ? min : (val > max ? max : val);
|
||
}
|
||
|
||
function useBindProp(comp, prop, object) {
|
||
if (comp[prop]) {
|
||
var ref = toRef(comp, prop);
|
||
setFromProp(object, ref.value);
|
||
watch(ref, function () {
|
||
setFromProp(object, ref.value);
|
||
}, { deep: true });
|
||
}
|
||
}
|
||
|
||
var PerspectiveCamera = {
|
||
inject: ['three'],
|
||
props: {
|
||
aspect: {
|
||
type: Number,
|
||
default: 1,
|
||
},
|
||
far: {
|
||
type: Number,
|
||
default: 2000,
|
||
},
|
||
fov: {
|
||
type: Number,
|
||
default: 50,
|
||
},
|
||
near: {
|
||
type: Number,
|
||
default: 0.1,
|
||
},
|
||
position: {
|
||
type: [Object, Vector3],
|
||
default: { x: 0, y: 0, z: 0 },
|
||
},
|
||
},
|
||
created: function created() {
|
||
var this$1 = this;
|
||
|
||
this.camera = new PerspectiveCamera$1(this.fov, this.aspect, this.near, this.far);
|
||
useBindProp(this, 'position', this.camera.position);
|
||
|
||
['aspect', 'far', 'fov', 'near'].forEach(function (p) {
|
||
watch(function () { return this$1[p]; }, function () {
|
||
this$1.camera[p] = this$1[p];
|
||
this$1.camera.updateProjectionMatrix();
|
||
});
|
||
});
|
||
|
||
this.three.camera = this.camera;
|
||
},
|
||
render: function render() {
|
||
return [];
|
||
},
|
||
__hmrId: 'PerspectiveCamera',
|
||
};
|
||
|
||
var Scene = {
|
||
inject: ['three'],
|
||
props: {
|
||
id: String,
|
||
background: [String, Number],
|
||
},
|
||
setup: function setup(props) {
|
||
var scene = new Scene$1();
|
||
if (props.background) { scene.background = new Color(props.background); }
|
||
watch(function () { return props.background; }, function (value) { scene.background = new Color(value); });
|
||
return { scene: scene };
|
||
},
|
||
provide: function provide() {
|
||
return {
|
||
scene: this.scene,
|
||
};
|
||
},
|
||
mounted: function mounted() {
|
||
if (!this.three.scene) {
|
||
this.three.scene = this.scene;
|
||
}
|
||
},
|
||
methods: {
|
||
// add(o) {
|
||
// this.scene.add(o);
|
||
// },
|
||
// remove(o) {
|
||
// this.scene.remove(o);
|
||
// },
|
||
},
|
||
render: function render() {
|
||
if (this.$slots.default) {
|
||
return this.$slots.default();
|
||
}
|
||
return [];
|
||
},
|
||
};
|
||
|
||
var Texture = {
|
||
inject: ['three'],
|
||
emits: ['loaded'],
|
||
props: {
|
||
src: String,
|
||
onLoad: Function,
|
||
onProgress: Function,
|
||
onError: Function,
|
||
},
|
||
created: function created() {
|
||
var this$1 = this;
|
||
|
||
this.createTexture();
|
||
watch(function () { return this$1.src; }, this.refreshTexture);
|
||
},
|
||
unmounted: function unmounted() {
|
||
this.texture.dispose();
|
||
},
|
||
methods: {
|
||
createTexture: function createTexture() {
|
||
this.texture = new TextureLoader().load(this.src, this.onLoaded, this.onProgress, this.onError);
|
||
},
|
||
refreshTexture: function refreshTexture() {
|
||
this.createTexture();
|
||
},
|
||
onLoaded: function onLoaded() {
|
||
if (this.onLoad) { this.onLoad(); }
|
||
this.$emit('loaded');
|
||
},
|
||
},
|
||
render: function render() {
|
||
return [];
|
||
},
|
||
};
|
||
|
||
var CubeTexture = {
|
||
inject: ['three'],
|
||
emits: ['loaded'],
|
||
props: {
|
||
path: String,
|
||
urls: {
|
||
type: Array,
|
||
default: ['px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg'],
|
||
},
|
||
onLoad: Function,
|
||
onProgress: Function,
|
||
onError: Function,
|
||
},
|
||
created: function created() {
|
||
var this$1 = this;
|
||
|
||
this.createTexture();
|
||
watch(function () { return this$1.path; }, this.refreshTexture);
|
||
watch(function () { return this$1.urls; }, this.refreshTexture);
|
||
},
|
||
unmounted: function unmounted() {
|
||
this.texture.dispose();
|
||
},
|
||
methods: {
|
||
createTexture: function createTexture() {
|
||
this.texture = new CubeTextureLoader()
|
||
.setPath(this.path)
|
||
.load(this.urls, this.onLoaded, this.onProgress, this.onError);
|
||
},
|
||
refreshTexture: function refreshTexture() {
|
||
this.createTexture();
|
||
},
|
||
onLoaded: function onLoaded() {
|
||
if (this.onLoad) { this.onLoad(); }
|
||
this.$emit('loaded');
|
||
},
|
||
},
|
||
render: function render() {
|
||
return [];
|
||
},
|
||
};
|
||
|
||
var Geometry = {
|
||
emits: ['ready'],
|
||
inject: ['mesh'],
|
||
props: {
|
||
rotateX: Number,
|
||
rotateY: Number,
|
||
rotateZ: Number,
|
||
},
|
||
created: function created() {
|
||
var this$1 = this;
|
||
|
||
if (!this.mesh) {
|
||
console.error('Missing parent Mesh');
|
||
}
|
||
this.watchProps = [];
|
||
Object.entries(this.$props).forEach(function (e) { return this$1.watchProps.push(e[0]); });
|
||
},
|
||
beforeMount: function beforeMount() {
|
||
this.createGeometry();
|
||
this.rotateGeometry();
|
||
this.mesh.setGeometry(this.geometry);
|
||
},
|
||
mounted: function mounted() {
|
||
this.addWatchers();
|
||
},
|
||
unmounted: function unmounted() {
|
||
this.geometry.dispose();
|
||
},
|
||
methods: {
|
||
rotateGeometry: function rotateGeometry() {
|
||
if (this.rotateX) { this.geometry.rotateX(this.rotateX); }
|
||
if (this.rotateY) { this.geometry.rotateY(this.rotateY); }
|
||
if (this.rotateZ) { this.geometry.rotateZ(this.rotateZ); }
|
||
},
|
||
addWatchers: function addWatchers() {
|
||
var this$1 = this;
|
||
|
||
this.watchProps.forEach(function (prop) {
|
||
watch(function () { return this$1[prop]; }, function () {
|
||
this$1.refreshGeometry();
|
||
});
|
||
});
|
||
},
|
||
refreshGeometry: function refreshGeometry() {
|
||
var oldGeo = this.geometry;
|
||
this.createGeometry();
|
||
this.rotateGeometry();
|
||
this.mesh.setGeometry(this.geometry);
|
||
oldGeo.dispose();
|
||
},
|
||
},
|
||
render: function render() {
|
||
return [];
|
||
},
|
||
};
|
||
|
||
var BoxGeometry = {
|
||
extends: Geometry,
|
||
props: {
|
||
size: Number,
|
||
width: { type: Number, default: 1 },
|
||
height: { type: Number, default: 1 },
|
||
depth: { type: Number, default: 1 },
|
||
widthSegments: { type: Number, default: 1 },
|
||
heightSegments: { type: Number, default: 1 },
|
||
depthSegments: { type: Number, default: 1 },
|
||
},
|
||
methods: {
|
||
createGeometry: function createGeometry() {
|
||
var w = this.width, h = this.height, d = this.depth;
|
||
if (this.size) {
|
||
w = this.size; h = this.size; d = this.size;
|
||
}
|
||
this.geometry = new BoxBufferGeometry(w, h, d, this.widthSegments, this.heightSegments, this.depthSegments);
|
||
},
|
||
},
|
||
};
|
||
|
||
var CircleGeometry = {
|
||
extends: Geometry,
|
||
props: {
|
||
radius: { type: Number, default: 1 },
|
||
segments: { type: Number, default: 8 },
|
||
thetaStart: { type: Number, default: 0 },
|
||
thetaLength: { type: Number, default: Math.PI * 2 },
|
||
},
|
||
methods: {
|
||
createGeometry: function createGeometry() {
|
||
this.geometry = new CircleBufferGeometry(this.radius, this.segments, this.thetaStart, this.thetaLength);
|
||
},
|
||
},
|
||
};
|
||
|
||
var ConeGeometry = {
|
||
extends: Geometry,
|
||
props: {
|
||
radius: { type: Number, default: 1 },
|
||
height: { type: Number, default: 1 },
|
||
radialSegments: { type: Number, default: 8 },
|
||
heightSegments: { type: Number, default: 1 },
|
||
openEnded: { type: Boolean, default: false },
|
||
thetaStart: { type: Number, default: 0 },
|
||
thetaLength: { type: Number, default: Math.PI * 2 },
|
||
},
|
||
methods: {
|
||
createGeometry: function createGeometry() {
|
||
this.geometry = new ConeBufferGeometry(this.radius, this.height, this.radialSegments, this.heightSegments, this.openEnded, this.thetaStart, this.thetaLength);
|
||
},
|
||
},
|
||
};
|
||
|
||
var CylinderGeometry = {
|
||
extends: Geometry,
|
||
props: {
|
||
radiusTop: { type: Number, default: 1 },
|
||
radiusBottom: { type: Number, default: 1 },
|
||
height: { type: Number, default: 1 },
|
||
radialSegments: { type: Number, default: 8 },
|
||
heightSegments: { type: Number, default: 1 },
|
||
openEnded: { type: Boolean, default: false },
|
||
thetaStart: { type: Number, default: 0 },
|
||
thetaLength: { type: Number, default: Math.PI * 2 },
|
||
},
|
||
methods: {
|
||
createGeometry: function createGeometry() {
|
||
this.geometry = new CylinderBufferGeometry(this.radiusTop, this.radiusBottom, this.height, this.radialSegments, this.heightSegments, this.openEnded, this.thetaStart, this.thetaLength);
|
||
},
|
||
},
|
||
};
|
||
|
||
var DodecahedronGeometry = {
|
||
extends: Geometry,
|
||
props: {
|
||
radius: { type: Number, default: 1 },
|
||
detail: { type: Number, default: 0 },
|
||
},
|
||
methods: {
|
||
createGeometry: function createGeometry() {
|
||
this.geometry = new DodecahedronBufferGeometry(this.radius, this.detail);
|
||
},
|
||
},
|
||
};
|
||
|
||
var IcosahedronGeometry = {
|
||
extends: Geometry,
|
||
props: {
|
||
radius: { type: Number, default: 1 },
|
||
detail: { type: Number, default: 0 },
|
||
},
|
||
methods: {
|
||
createGeometry: function createGeometry() {
|
||
this.geometry = new IcosahedronBufferGeometry(this.radius, this.detail);
|
||
},
|
||
},
|
||
};
|
||
|
||
var LatheGeometry = {
|
||
extends: Geometry,
|
||
props: {
|
||
points: Array,
|
||
segments: { type: Number, default: 12 },
|
||
phiStart: { type: Number, default: 0 },
|
||
phiLength: { type: Number, default: Math.PI * 2 },
|
||
},
|
||
methods: {
|
||
createGeometry: function createGeometry() {
|
||
this.geometry = new LatheBufferGeometry(this.points, this.segments, this.phiStart, this.phiLength);
|
||
},
|
||
},
|
||
};
|
||
|
||
var OctahedronGeometry = {
|
||
extends: Geometry,
|
||
props: {
|
||
radius: { type: Number, default: 1 },
|
||
detail: { type: Number, default: 0 },
|
||
},
|
||
methods: {
|
||
createGeometry: function createGeometry() {
|
||
this.geometry = new OctahedronBufferGeometry(this.radius, this.detail);
|
||
},
|
||
},
|
||
};
|
||
|
||
var PolyhedronGeometry = {
|
||
extends: Geometry,
|
||
props: {
|
||
vertices: Array,
|
||
indices: Array,
|
||
radius: { type: Number, default: 1 },
|
||
detail: { type: Number, default: 0 },
|
||
},
|
||
methods: {
|
||
createGeometry: function createGeometry() {
|
||
this.geometry = new PolyhedronBufferGeometry(this.vertices, this.indices, this.radius, this.detail);
|
||
},
|
||
},
|
||
};
|
||
|
||
var RingGeometry = {
|
||
extends: Geometry,
|
||
props: {
|
||
innerRadius: { type: Number, default: 0.5 },
|
||
outerRadius: { type: Number, default: 1 },
|
||
thetaSegments: { type: Number, default: 8 },
|
||
phiSegments: { type: Number, default: 1 },
|
||
thetaStart: { type: Number, default: 0 },
|
||
thetaLength: { type: Number, default: Math.PI * 2 },
|
||
},
|
||
methods: {
|
||
createGeometry: function createGeometry() {
|
||
this.geometry = new RingBufferGeometry(this.innerRadius, this.outerRadius, this.thetaSegments, this.phiSegments, this.thetaStart, this.thetaLength);
|
||
},
|
||
},
|
||
};
|
||
|
||
var SphereGeometry = {
|
||
extends: Geometry,
|
||
props: {
|
||
radius: { type: Number, default: 1 },
|
||
widthSegments: { type: Number, default: 12 },
|
||
heightSegments: { type: Number, default: 12 },
|
||
},
|
||
methods: {
|
||
createGeometry: function createGeometry() {
|
||
this.geometry = new SphereBufferGeometry(this.radius, this.widthSegments, this.heightSegments);
|
||
},
|
||
},
|
||
};
|
||
|
||
var TetrahedronGeometry = {
|
||
extends: Geometry,
|
||
props: {
|
||
radius: { type: Number, default: 1 },
|
||
detail: { type: Number, default: 0 },
|
||
},
|
||
methods: {
|
||
createGeometry: function createGeometry() {
|
||
this.geometry = new TetrahedronBufferGeometry(this.radius, this.detail);
|
||
},
|
||
},
|
||
};
|
||
|
||
var TorusGeometry = {
|
||
extends: Geometry,
|
||
props: {
|
||
radius: { type: Number, default: 1 },
|
||
tube: { type: Number, default: 0.4 },
|
||
radialSegments: { type: Number, default: 8 },
|
||
tubularSegments: { type: Number, default: 6 },
|
||
arc: { type: Number, default: Math.PI * 2 },
|
||
},
|
||
methods: {
|
||
createGeometry: function createGeometry() {
|
||
this.geometry = new TorusBufferGeometry(this.radius, this.tube, this.radialSegments, this.tubularSegments, this.arc);
|
||
},
|
||
},
|
||
};
|
||
|
||
var TorusKnotGeometry = {
|
||
extends: Geometry,
|
||
props: {
|
||
radius: { type: Number, default: 1 },
|
||
tube: { type: Number, default: 0.4 },
|
||
radialSegments: { type: Number, default: 64 },
|
||
tubularSegments: { type: Number, default: 8 },
|
||
p: { type: Number, default: 2 },
|
||
q: { type: Number, default: 3 },
|
||
},
|
||
methods: {
|
||
createGeometry: function createGeometry() {
|
||
this.geometry = new TorusKnotBufferGeometry(this.radius, this.tube, this.radialSegments, this.tubularSegments, this.p, this.q);
|
||
},
|
||
},
|
||
};
|
||
|
||
var TubeGeometry = {
|
||
extends: Geometry,
|
||
props: {
|
||
path: Curve,
|
||
tubularSegments: { type: Number, default: 64 },
|
||
radius: { type: Number, default: 1 },
|
||
radiusSegments: { type: Number, default: 8 },
|
||
closed: { type: Boolean, default: false },
|
||
},
|
||
methods: {
|
||
createGeometry: function createGeometry() {
|
||
this.geometry = new TubeBufferGeometry(this.path, this.tubularSegments, this.radius, this.radiusSegments, this.closed);
|
||
},
|
||
},
|
||
};
|
||
|
||
var Light = {
|
||
inject: ['scene'],
|
||
props: {
|
||
color: {
|
||
type: String,
|
||
default: '#ffffff',
|
||
},
|
||
intensity: {
|
||
type: Number,
|
||
default: 1,
|
||
},
|
||
castShadow: {
|
||
type: Boolean,
|
||
default: false,
|
||
},
|
||
shadowMapSize: Object,
|
||
position: Object,
|
||
},
|
||
mounted: function mounted() {
|
||
var this$1 = this;
|
||
|
||
useBindProp(this, 'position', this.light.position);
|
||
|
||
if (this.light.target) {
|
||
useBindProp(this, 'target', this.light.target.position);
|
||
}
|
||
|
||
if (this.light.shadow) {
|
||
this.light.castShadow = this.castShadow;
|
||
setFromProp(this.light.shadow.mapSize, this.shadowMapSize);
|
||
}
|
||
|
||
['color', 'intensity', 'castShadow'].forEach(function (p) {
|
||
watch(function () { return this$1[p]; }, function () {
|
||
if (p === 'color') {
|
||
this$1.light.color = new Color(this$1.color);
|
||
} else {
|
||
this$1.light[p] = this$1[p];
|
||
}
|
||
});
|
||
});
|
||
|
||
this.scene.add(this.light);
|
||
if (this.light.target) { this.scene.add(this.light.target); }
|
||
},
|
||
unmounted: function unmounted() {
|
||
this.scene.remove(this.light);
|
||
},
|
||
render: function render() {
|
||
return [];
|
||
},
|
||
__hmrId: 'Light',
|
||
};
|
||
|
||
var AmbientLight = {
|
||
extends: Light,
|
||
created: function created() {
|
||
this.light = new AmbientLight$1(this.color, this.intensity);
|
||
},
|
||
__hmrId: 'AmbientLight',
|
||
};
|
||
|
||
var DirectionalLight = {
|
||
extends: Light,
|
||
props: {
|
||
target: Object,
|
||
},
|
||
created: function created() {
|
||
this.light = new DirectionalLight$1(this.color, this.intensity);
|
||
},
|
||
__hmrId: 'DirectionalLight',
|
||
};
|
||
|
||
var PointLight = {
|
||
extends: Light,
|
||
props: {
|
||
distance: {
|
||
type: Number,
|
||
default: 0,
|
||
},
|
||
decay: {
|
||
type: Number,
|
||
default: 1,
|
||
},
|
||
},
|
||
created: function created() {
|
||
this.light = new PointLight$1(this.color, this.intensity, this.distance, this.decay);
|
||
},
|
||
__hmrId: 'PointLight',
|
||
};
|
||
|
||
var SpotLight = {
|
||
extends: Light,
|
||
props: {
|
||
angle: {
|
||
type: Number,
|
||
default: Math.PI / 3,
|
||
},
|
||
decay: {
|
||
type: Number,
|
||
default: 1,
|
||
},
|
||
distance: {
|
||
type: Number,
|
||
default: 0,
|
||
},
|
||
penumbra: {
|
||
type: Number,
|
||
default: 0,
|
||
},
|
||
target: Object,
|
||
},
|
||
created: function created() {
|
||
var this$1 = this;
|
||
|
||
this.light = new SpotLight$1(this.color, this.intensity, this.distance, this.angle, this.penumbra, this.decay);
|
||
['angle', 'decay', 'distance', 'penumbra'].forEach(function (p) {
|
||
watch(function () { return this$1[p]; }, function () {
|
||
this$1.light[p] = this$1[p];
|
||
});
|
||
});
|
||
},
|
||
__hmrId: 'SpotLight',
|
||
};
|
||
|
||
var Material = {
|
||
inject: ['three', 'mesh'],
|
||
props: {
|
||
id: String,
|
||
color: { type: [String, Number], default: '#ffffff' },
|
||
depthTest: { type: Boolean, default: true },
|
||
depthWrite: { type: Boolean, default: true },
|
||
flatShading: Boolean,
|
||
fog: { type: Boolean, default: true },
|
||
opacity: { type: Number, default: 1 },
|
||
side: { type: Number, default: FrontSide },
|
||
transparent: Boolean,
|
||
vertexColors: Boolean,
|
||
},
|
||
provide: function provide() {
|
||
return {
|
||
material: this,
|
||
};
|
||
},
|
||
beforeMount: function beforeMount() {
|
||
this.createMaterial();
|
||
if (this.id) { this.three.materials[this.id] = this.material; }
|
||
this.mesh.setMaterial(this.material);
|
||
},
|
||
mounted: function mounted() {
|
||
this._addWatchers();
|
||
if (this.addWatchers) { this.addWatchers(); }
|
||
},
|
||
unmounted: function unmounted() {
|
||
this.material.dispose();
|
||
if (this.id) { delete this.three.materials[this.id]; }
|
||
},
|
||
methods: {
|
||
setMap: function setMap(texture) {
|
||
this.material.map = texture;
|
||
this.material.needsUpdate = true;
|
||
},
|
||
setEnvMap: function setEnvMap(texture) {
|
||
this.material.envMap = texture;
|
||
this.material.needsUpdate = true;
|
||
},
|
||
_addWatchers: function _addWatchers() {
|
||
var this$1 = this;
|
||
|
||
// don't work for flatShading
|
||
['color', 'depthTest', 'depthWrite', 'fog', 'opacity', 'side', 'transparent'].forEach(function (p) {
|
||
watch(function () { return this$1[p]; }, function () {
|
||
if (p === 'color') {
|
||
this$1.material.color.set(this$1.color);
|
||
} else {
|
||
this$1.material[p] = this$1[p];
|
||
}
|
||
});
|
||
});
|
||
},
|
||
},
|
||
render: function render() {
|
||
if (this.$slots.default) {
|
||
return this.$slots.default();
|
||
}
|
||
return [];
|
||
},
|
||
__hmrId: 'Material',
|
||
};
|
||
|
||
var BasicMaterial = {
|
||
extends: Material,
|
||
methods: {
|
||
createMaterial: function createMaterial() {
|
||
this.material = new MeshBasicMaterial(propsValues(this.$props, ['id']));
|
||
},
|
||
},
|
||
__hmrId: 'BasicMaterial',
|
||
};
|
||
|
||
var LambertMaterial = {
|
||
extends: Material,
|
||
methods: {
|
||
createMaterial: function createMaterial() {
|
||
this.material = new MeshLambertMaterial(propsValues(this.$props, ['id']));
|
||
},
|
||
},
|
||
__hmrId: 'LambertMaterial',
|
||
};
|
||
|
||
var PhongMaterial = {
|
||
extends: Material,
|
||
methods: {
|
||
createMaterial: function createMaterial() {
|
||
this.material = new MeshPhongMaterial(propsValues(this.$props, ['id']));
|
||
},
|
||
},
|
||
__hmrId: 'PhongMaterial',
|
||
};
|
||
|
||
var StandardMaterial = {
|
||
extends: Material,
|
||
props: {
|
||
emissive: { type: [Number, String], default: 0 },
|
||
emissiveIntensity: { type: Number, default: 1 },
|
||
metalness: { type: Number, default: 0 },
|
||
roughness: { type: Number, default: 1 },
|
||
},
|
||
methods: {
|
||
createMaterial: function createMaterial() {
|
||
this.material = new MeshStandardMaterial(propsValues(this.$props, ['id']));
|
||
},
|
||
addWatchers: function addWatchers() {
|
||
var this$1 = this;
|
||
|
||
['emissive', 'emissiveIntensity', 'metalness', 'roughness'].forEach(function (p) {
|
||
watch(function () { return this$1[p]; }, function (value) {
|
||
if (p === 'emissive') {
|
||
this$1.material.emissive = new Color(value);
|
||
} else {
|
||
this$1.material[p] = value;
|
||
}
|
||
});
|
||
});
|
||
},
|
||
},
|
||
__hmrId: 'StandardMaterial',
|
||
};
|
||
|
||
var PhysicalMaterial = {
|
||
extends: StandardMaterial,
|
||
methods: {
|
||
createMaterial: function createMaterial() {
|
||
this.material = new MeshPhysicalMaterial(propsValues(this.$props, ['id']));
|
||
},
|
||
},
|
||
__hmrId: 'PhysicalMaterial',
|
||
};
|
||
|
||
/**
|
||
* ------------------------------------------------------------------------------------------
|
||
* Subsurface Scattering shader
|
||
* Based on three/examples/jsm/shaders/SubsurfaceScatteringShader.js
|
||
* Based on GDC 2011 – Approximating Translucency for a Fast, Cheap and Convincing Subsurface Scattering Look
|
||
* https://colinbarrebrisebois.com/2011/03/07/gdc-2011-approximating-translucency-for-a-fast-cheap-and-convincing-subsurface-scattering-look/
|
||
*------------------------------------------------------------------------------------------
|
||
*/
|
||
|
||
function replaceAll(string, find, replace) {
|
||
return string.split(find).join(replace);
|
||
}
|
||
|
||
var meshphongFragHead = ShaderChunk.meshphong_frag.slice(0, ShaderChunk.meshphong_frag.indexOf('void main() {'));
|
||
var meshphongFragBody = ShaderChunk.meshphong_frag.slice(ShaderChunk.meshphong_frag.indexOf('void main() {'));
|
||
|
||
var SubsurfaceScatteringShader = {
|
||
|
||
uniforms: UniformsUtils.merge([
|
||
ShaderLib.phong.uniforms,
|
||
{
|
||
thicknessColor: { value: new Color(0x668597) },
|
||
thicknessDistortion: { value: 0.1 },
|
||
thicknessAmbient: { value: 0.0 },
|
||
thicknessAttenuation: { value: 0.1 },
|
||
thicknessPower: { value: 2.0 },
|
||
thicknessScale: { value: 10.0 },
|
||
} ]),
|
||
|
||
vertexShader: ("\n #define USE_UV\n " + (ShaderChunk.meshphong_vert) + "\n "),
|
||
|
||
fragmentShader: "\n #define USE_UV\n #define SUBSURFACE\n\n " + meshphongFragHead + "\n\n uniform float thicknessPower;\n uniform float thicknessScale;\n uniform float thicknessDistortion;\n uniform float thicknessAmbient;\n uniform float thicknessAttenuation;\n uniform vec3 thicknessColor;\n\n void RE_Direct_Scattering(const in IncidentLight directLight, const in vec2 uv, const in GeometricContext geometry, inout ReflectedLight reflectedLight) {\n #ifdef USE_COLOR\n vec3 thickness = vColor * thicknessColor;\n #else\n vec3 thickness = thicknessColor;\n #endif\n vec3 scatteringHalf = normalize(directLight.direction + (geometry.normal * thicknessDistortion));\n float scatteringDot = pow(saturate(dot(geometry.viewDir, -scatteringHalf)), thicknessPower) * thicknessScale;\n vec3 scatteringIllu = (scatteringDot + thicknessAmbient) * thickness;\n reflectedLight.directDiffuse += scatteringIllu * thicknessAttenuation * directLight.color;\n }\n " + meshphongFragBody.replace(
|
||
'#include <lights_fragment_begin>',
|
||
replaceAll(
|
||
ShaderChunk.lights_fragment_begin,
|
||
'RE_Direct( directLight, geometry, material, reflectedLight );',
|
||
"\n RE_Direct( directLight, geometry, material, reflectedLight );\n #if defined( SUBSURFACE ) && defined( USE_UV )\n RE_Direct_Scattering(directLight, vUv, geometry, reflectedLight);\n #endif\n "
|
||
)
|
||
),
|
||
};
|
||
|
||
var ShaderMaterial = {
|
||
inject: ['three', 'mesh'],
|
||
props: {
|
||
id: String,
|
||
uniforms: Object,
|
||
vertexShader: String,
|
||
fragmentShader: String,
|
||
},
|
||
beforeMount: function beforeMount() {
|
||
this.createMaterial();
|
||
if (this.id) { this.three.materials[this.id] = this.material; }
|
||
this.mesh.setMaterial(this.material);
|
||
},
|
||
mounted: function mounted() {
|
||
if (this.addWatchers) { this.addWatchers(); }
|
||
},
|
||
unmounted: function unmounted() {
|
||
this.material.dispose();
|
||
if (this.id) { delete this.three.materials[this.id]; }
|
||
},
|
||
render: function render() {
|
||
return [];
|
||
},
|
||
__hmrId: 'ShaderMaterial',
|
||
};
|
||
|
||
var SubSurfaceMaterial = {
|
||
extends: ShaderMaterial,
|
||
props: {
|
||
diffuse: { type: String, default: '#ffffff' },
|
||
thicknessColor: { type: String, default: '#ffffff' },
|
||
thicknessDistortion: { type: Number, default: 0.4 },
|
||
thicknessAmbient: { type: Number, default: 0.01 },
|
||
thicknessAttenuation: { type: Number, default: 0.7 },
|
||
thicknessPower: { type: Number, default: 2 },
|
||
thicknessScale: { type: Number, default: 4 },
|
||
transparent: { type: Boolean, default: false },
|
||
opacity: { type: Number, default: 1 },
|
||
vertexColors: { type: Boolean, default: false },
|
||
},
|
||
methods: {
|
||
createMaterial: function createMaterial() {
|
||
var params = SubsurfaceScatteringShader;
|
||
var uniforms = UniformsUtils.clone(params.uniforms);
|
||
Object.entries(this.$props).forEach(function (ref) {
|
||
var key = ref[0];
|
||
var value = ref[1];
|
||
|
||
if (key === 'diffuse' || key === 'thicknessColor') {
|
||
value = new Color(value);
|
||
}
|
||
if (key !== 'id' && key !== 'transparent' && key !== 'vertexColors') {
|
||
uniforms[key].value = value;
|
||
}
|
||
});
|
||
|
||
this.material = new ShaderMaterial$1(Object.assign({}, params,
|
||
{uniforms: uniforms,
|
||
lights: true,
|
||
transparent: this.transparent,
|
||
vertexColors: this.vertexColors}));
|
||
},
|
||
},
|
||
__hmrId: 'SubSurfaceMaterial',
|
||
};
|
||
|
||
var ToonMaterial = {
|
||
extends: Material,
|
||
methods: {
|
||
createMaterial: function createMaterial() {
|
||
this.material = new MeshToonMaterial(propsValues(this.$props, ['id']));
|
||
},
|
||
},
|
||
__hmrId: 'ToonMaterial',
|
||
};
|
||
|
||
var _Map = {
|
||
extends: Texture,
|
||
inject: ['material'],
|
||
created: function created() {
|
||
this.material.setMap(this.texture);
|
||
},
|
||
unmounted: function unmounted() {
|
||
this.material.setMap(null);
|
||
},
|
||
methods: {
|
||
refreshTexture: function refreshTexture() {
|
||
this.createTexture();
|
||
this.material.setMap(this.texture);
|
||
},
|
||
},
|
||
__hmrId: 'Map',
|
||
};
|
||
|
||
var EnvMap = {
|
||
extends: CubeTexture,
|
||
inject: ['material'],
|
||
created: function created() {
|
||
this.material.setEnvMap(this.texture);
|
||
},
|
||
unmounted: function unmounted() {
|
||
this.material.setEnvMap(null);
|
||
},
|
||
methods: {
|
||
refreshTexture: function refreshTexture() {
|
||
this.createTexture();
|
||
this.material.setEnvMap(this.texture);
|
||
},
|
||
},
|
||
__hmrId: 'EnvMap',
|
||
};
|
||
|
||
var Mesh = {
|
||
inject: ['three', 'scene', 'rendererComponent'],
|
||
emits: ['ready'],
|
||
props: {
|
||
materialId: String,
|
||
position: Object,
|
||
rotation: Object,
|
||
scale: Object,
|
||
castShadow: Boolean,
|
||
receiveShadow: Boolean,
|
||
},
|
||
provide: function provide() {
|
||
return {
|
||
mesh: this,
|
||
};
|
||
},
|
||
mounted: function mounted() {
|
||
// console.log('Mesh mounted');
|
||
if (this.geometry && !this.mesh) { this.initMesh(); }
|
||
},
|
||
unmounted: function unmounted() {
|
||
// console.log('Mesh unmounted');
|
||
if (this.mesh) { this.scene.remove(this.mesh); }
|
||
if (this.geometry) { this.geometry.dispose(); }
|
||
if (this.material && !this.materialId) { this.material.dispose(); }
|
||
},
|
||
methods: {
|
||
initMesh: function initMesh() {
|
||
if (!this.material && this.materialId) {
|
||
this.material = this.three.materials[this.materialId];
|
||
}
|
||
this.mesh = new Mesh$1(this.geometry, this.material);
|
||
this.bindProps();
|
||
this.scene.add(this.mesh);
|
||
this.$emit('ready');
|
||
},
|
||
bindProps: function bindProps() {
|
||
var this$1 = this;
|
||
|
||
useBindProp(this, 'position', this.mesh.position);
|
||
useBindProp(this, 'rotation', this.mesh.rotation);
|
||
useBindProp(this, 'scale', this.mesh.scale);
|
||
|
||
['castShadow', 'receiveShadow'].forEach(function (p) {
|
||
this$1.mesh[p] = this$1[p];
|
||
watch(function () { return this$1[p]; }, function () { this$1.mesh[p] = this$1[p]; });
|
||
});
|
||
|
||
watch(function () { return this$1.materialId; }, function () {
|
||
this$1.mesh.material = this$1.three.materials[this$1.materialId];
|
||
});
|
||
},
|
||
setGeometry: function setGeometry(geometry) {
|
||
this.geometry = geometry;
|
||
if (this.mesh) { this.mesh.geometry = geometry; }
|
||
},
|
||
setMaterial: function setMaterial(material) {
|
||
this.material = material;
|
||
if (this.mesh) { this.mesh.material = material; }
|
||
},
|
||
refreshGeometry: function refreshGeometry() {
|
||
var oldGeo = this.geometry;
|
||
this.createGeometry();
|
||
this.mesh.geometry = this.geometry;
|
||
oldGeo.dispose();
|
||
},
|
||
},
|
||
render: function render() {
|
||
if (this.$slots.default) {
|
||
return this.$slots.default();
|
||
}
|
||
return [];
|
||
},
|
||
__hmrId: 'Mesh',
|
||
};
|
||
|
||
var Box = {
|
||
extends: Mesh,
|
||
props: {
|
||
size: Number,
|
||
width: { type: Number, default: 1 },
|
||
height: { type: Number, default: 1 },
|
||
depth: { type: Number, default: 1 },
|
||
widthSegments: { type: Number, default: 1 },
|
||
heightSegments: { type: Number, default: 1 },
|
||
depthSegments: { type: Number, default: 1 },
|
||
},
|
||
created: function created() {
|
||
var this$1 = this;
|
||
|
||
this.createGeometry();
|
||
|
||
['size', 'width', 'height', 'depth', 'widthSegments', 'heightSegments', 'depthSegments'].forEach(function (prop) {
|
||
watch(function () { return this$1[prop]; }, function () {
|
||
this$1.refreshGeometry();
|
||
});
|
||
});
|
||
},
|
||
methods: {
|
||
createGeometry: function createGeometry() {
|
||
if (this.size) {
|
||
this.geometry = new BoxBufferGeometry(this.size, this.size, this.size);
|
||
} else {
|
||
this.geometry = new BoxBufferGeometry(this.width, this.height, this.depth);
|
||
}
|
||
},
|
||
},
|
||
__hmrId: 'Box',
|
||
};
|
||
|
||
var Circle = {
|
||
extends: Mesh,
|
||
props: {
|
||
radius: { type: Number, default: 1 },
|
||
segments: { type: Number, default: 8 },
|
||
thetaStart: { type: Number, default: 0 },
|
||
thetaLength: { type: Number, default: Math.PI * 2 },
|
||
},
|
||
created: function created() {
|
||
var this$1 = this;
|
||
|
||
this.createGeometry();
|
||
|
||
var watchProps = ['radius', 'segments', 'thetaStart', 'thetaLength'];
|
||
watchProps.forEach(function (prop) {
|
||
watch(function () { return this$1[prop]; }, function () {
|
||
this$1.refreshGeometry();
|
||
});
|
||
});
|
||
},
|
||
methods: {
|
||
createGeometry: function createGeometry() {
|
||
this.geometry = new CircleBufferGeometry(this.radius, this.segments, this.thetaStart, this.thetaLength);
|
||
},
|
||
},
|
||
__hmrId: 'Circle',
|
||
};
|
||
|
||
var Cone = {
|
||
extends: Mesh,
|
||
props: {
|
||
radius: { type: Number, default: 1 },
|
||
height: { type: Number, default: 1 },
|
||
radialSegments: { type: Number, default: 8 },
|
||
heightSegments: { type: Number, default: 1 },
|
||
openEnded: { type: Boolean, default: false },
|
||
thetaStart: { type: Number, default: 0 },
|
||
thetaLength: { type: Number, default: Math.PI * 2 },
|
||
},
|
||
created: function created() {
|
||
var this$1 = this;
|
||
|
||
this.createGeometry();
|
||
|
||
var watchProps = ['radius', 'height', 'radialSegments', 'heightSegments', 'openEnded', 'thetaStart', 'thetaLength'];
|
||
watchProps.forEach(function (prop) {
|
||
watch(function () { return this$1[prop]; }, function () {
|
||
this$1.refreshGeometry();
|
||
});
|
||
});
|
||
},
|
||
methods: {
|
||
createGeometry: function createGeometry() {
|
||
this.geometry = new ConeBufferGeometry(this.radius, this.height, this.radialSegments, this.heightSegments, this.openEnded, this.thetaStart, this.thetaLength);
|
||
},
|
||
},
|
||
__hmrId: 'Cone',
|
||
};
|
||
|
||
var Cylinder = {
|
||
extends: Mesh,
|
||
props: {
|
||
radiusTop: { type: Number, default: 1 },
|
||
radiusBottom: { type: Number, default: 1 },
|
||
height: { type: Number, default: 1 },
|
||
radialSegments: { type: Number, default: 8 },
|
||
heightSegments: { type: Number, default: 1 },
|
||
openEnded: { type: Boolean, default: false },
|
||
thetaStart: { type: Number, default: 0 },
|
||
thetaLength: { type: Number, default: Math.PI * 2 },
|
||
},
|
||
created: function created() {
|
||
var this$1 = this;
|
||
|
||
this.createGeometry();
|
||
|
||
var watchProps = ['radiusTop', 'radiusBottom', 'height', 'radialSegments', 'heightSegments', 'openEnded', 'thetaStart', 'thetaLength'];
|
||
watchProps.forEach(function (prop) {
|
||
watch(function () { return this$1[prop]; }, function () {
|
||
this$1.refreshGeometry();
|
||
});
|
||
});
|
||
},
|
||
methods: {
|
||
createGeometry: function createGeometry() {
|
||
this.geometry = new CylinderBufferGeometry(this.radiusTop, this.radiusBottom, this.height, this.radialSegments, this.heightSegments, this.openEnded, this.thetaStart, this.thetaLength);
|
||
},
|
||
},
|
||
__hmrId: 'Cylinder',
|
||
};
|
||
|
||
var Dodecahedron = {
|
||
extends: Mesh,
|
||
props: {
|
||
radius: { type: Number, default: 1 },
|
||
detail: { type: Number, default: 0 },
|
||
},
|
||
created: function created() {
|
||
var this$1 = this;
|
||
|
||
this.createGeometry();
|
||
|
||
var watchProps = ['radius', 'detail'];
|
||
watchProps.forEach(function (prop) {
|
||
watch(function () { return this$1[prop]; }, function () {
|
||
this$1.refreshGeometry();
|
||
});
|
||
});
|
||
},
|
||
methods: {
|
||
createGeometry: function createGeometry() {
|
||
this.geometry = new DodecahedronBufferGeometry(this.radius, this.detail);
|
||
},
|
||
},
|
||
__hmrId: 'Dodecahedron',
|
||
};
|
||
|
||
var Icosahedron = {
|
||
extends: Mesh,
|
||
props: {
|
||
radius: { type: Number, default: 1 },
|
||
detail: { type: Number, default: 0 },
|
||
},
|
||
created: function created() {
|
||
var this$1 = this;
|
||
|
||
this.createGeometry();
|
||
|
||
var watchProps = ['radius', 'detail'];
|
||
watchProps.forEach(function (prop) {
|
||
watch(function () { return this$1[prop]; }, function () {
|
||
this$1.refreshGeometry();
|
||
});
|
||
});
|
||
},
|
||
methods: {
|
||
createGeometry: function createGeometry() {
|
||
this.geometry = new IcosahedronBufferGeometry(this.radius, this.detail);
|
||
},
|
||
},
|
||
__hmrId: 'Icosahedron',
|
||
};
|
||
|
||
var Lathe = {
|
||
extends: Mesh,
|
||
props: {
|
||
points: Array,
|
||
segments: { type: Number, default: 12 },
|
||
phiStart: { type: Number, default: 0 },
|
||
phiLength: { type: Number, default: Math.PI * 2 },
|
||
},
|
||
created: function created() {
|
||
var this$1 = this;
|
||
|
||
this.createGeometry();
|
||
|
||
var watchProps = ['points', 'segments', 'phiStart', 'phiLength'];
|
||
watchProps.forEach(function (prop) {
|
||
watch(function () { return this$1[prop]; }, function () {
|
||
this$1.refreshGeometry();
|
||
});
|
||
});
|
||
},
|
||
methods: {
|
||
createGeometry: function createGeometry() {
|
||
this.geometry = new LatheBufferGeometry(this.points, this.segments, this.phiStart, this.phiLength);
|
||
},
|
||
},
|
||
__hmrId: 'Lathe',
|
||
};
|
||
|
||
var Octahedron = {
|
||
extends: Mesh,
|
||
props: {
|
||
radius: { type: Number, default: 1 },
|
||
detail: { type: Number, default: 0 },
|
||
},
|
||
created: function created() {
|
||
var this$1 = this;
|
||
|
||
this.createGeometry();
|
||
|
||
var watchProps = ['radius', 'detail'];
|
||
watchProps.forEach(function (prop) {
|
||
watch(function () { return this$1[prop]; }, function () {
|
||
this$1.refreshGeometry();
|
||
});
|
||
});
|
||
},
|
||
methods: {
|
||
createGeometry: function createGeometry() {
|
||
this.geometry = new OctahedronBufferGeometry(this.radius, this.detail);
|
||
},
|
||
},
|
||
__hmrId: 'Octahedron',
|
||
};
|
||
|
||
var Plane = {
|
||
extends: Mesh,
|
||
props: {
|
||
width: { type: Number, default: 1 },
|
||
height: { type: Number, default: 1 },
|
||
widthSegments: { type: Number, default: 1 },
|
||
heightSegments: { type: Number, default: 1 },
|
||
},
|
||
created: function created() {
|
||
var this$1 = this;
|
||
|
||
this.createGeometry();
|
||
|
||
var watchProps = ['width', 'height', 'widthSegments', 'heightSegments'];
|
||
watchProps.forEach(function (prop) {
|
||
watch(function () { return this$1[prop]; }, function () {
|
||
this$1.refreshGeometry();
|
||
});
|
||
});
|
||
},
|
||
methods: {
|
||
createGeometry: function createGeometry() {
|
||
this.geometry = new PlaneBufferGeometry(this.width, this.height, this.widthSegments, this.heightSegments);
|
||
},
|
||
},
|
||
__hmrId: 'Plane',
|
||
};
|
||
|
||
var Polyhedron = {
|
||
extends: Mesh,
|
||
props: {
|
||
vertices: Array,
|
||
indices: Array,
|
||
radius: { type: Number, default: 1 },
|
||
detail: { type: Number, default: 0 },
|
||
},
|
||
created: function created() {
|
||
var this$1 = this;
|
||
|
||
this.createGeometry();
|
||
|
||
var watchProps = ['vertices', 'indices', 'radius', 'detail'];
|
||
watchProps.forEach(function (prop) {
|
||
watch(function () { return this$1[prop]; }, function () {
|
||
this$1.refreshGeometry();
|
||
});
|
||
});
|
||
},
|
||
methods: {
|
||
createGeometry: function createGeometry() {
|
||
this.geometry = new PolyhedronBufferGeometry(this.vertices, this.indices, this.radius, this.detail);
|
||
},
|
||
},
|
||
__hmrId: 'Polyhedron',
|
||
};
|
||
|
||
var Ring = {
|
||
extends: Mesh,
|
||
props: {
|
||
innerRadius: { type: Number, default: 0.5 },
|
||
outerRadius: { type: Number, default: 1 },
|
||
thetaSegments: { type: Number, default: 8 },
|
||
phiSegments: { type: Number, default: 1 },
|
||
thetaStart: { type: Number, default: 0 },
|
||
thetaLength: { type: Number, default: Math.PI * 2 },
|
||
},
|
||
created: function created() {
|
||
var this$1 = this;
|
||
|
||
this.createGeometry();
|
||
|
||
var watchProps = ['innerRadius', 'outerRadius', 'thetaSegments', 'phiSegments', 'thetaStart', 'thetaLength'];
|
||
watchProps.forEach(function (prop) {
|
||
watch(function () { return this$1[prop]; }, function () {
|
||
this$1.refreshGeometry();
|
||
});
|
||
});
|
||
},
|
||
methods: {
|
||
createGeometry: function createGeometry() {
|
||
this.geometry = new RingBufferGeometry(this.innerRadius, this.outerRadius, this.thetaSegments, this.phiSegments, this.thetaStart, this.thetaLength);
|
||
},
|
||
},
|
||
__hmrId: 'Ring',
|
||
};
|
||
|
||
var Sphere = {
|
||
extends: Mesh,
|
||
props: {
|
||
radius: Number,
|
||
widthSegments: { type: Number, default: 12 },
|
||
heightSegments: { type: Number, default: 12 },
|
||
},
|
||
watch: {
|
||
radius: function radius() { this.refreshGeometry(); },
|
||
widthSegments: function widthSegments() { this.refreshGeometry(); },
|
||
heightSegments: function heightSegments() { this.refreshGeometry(); },
|
||
},
|
||
created: function created() {
|
||
this.createGeometry();
|
||
},
|
||
methods: {
|
||
createGeometry: function createGeometry() {
|
||
this.geometry = new SphereBufferGeometry(this.radius, this.widthSegments, this.heightSegments);
|
||
},
|
||
},
|
||
__hmrId: 'Sphere',
|
||
};
|
||
|
||
var Tetrahedron = {
|
||
extends: Mesh,
|
||
props: {
|
||
radius: { type: Number, default: 1 },
|
||
detail: { type: Number, default: 0 },
|
||
},
|
||
created: function created() {
|
||
var this$1 = this;
|
||
|
||
this.createGeometry();
|
||
|
||
var watchProps = ['radius', 'detail'];
|
||
watchProps.forEach(function (prop) {
|
||
watch(function () { return this$1[prop]; }, function () {
|
||
this$1.refreshGeometry();
|
||
});
|
||
});
|
||
},
|
||
methods: {
|
||
createGeometry: function createGeometry() {
|
||
this.geometry = new TetrahedronBufferGeometry(this.radius, this.detail);
|
||
},
|
||
},
|
||
__hmrId: 'Tetrahedron',
|
||
};
|
||
|
||
var TextProps = {
|
||
text: String,
|
||
fontSrc: String,
|
||
size: { type: Number, default: 80 },
|
||
height: { type: Number, default: 5 },
|
||
depth: { type: Number, default: 1 },
|
||
curveSegments: { type: Number, default: 12 },
|
||
bevelEnabled: { type: Boolean, default: false },
|
||
bevelThickness: { type: Number, default: 10 },
|
||
bevelSize: { type: Number, default: 8 },
|
||
bevelOffset: { type: Number, default: 0 },
|
||
bevelSegments: { type: Number, default: 5 },
|
||
align: { type: [Boolean, String], default: false },
|
||
};
|
||
|
||
var Text = {
|
||
extends: Mesh,
|
||
props: Object.assign({}, TextProps),
|
||
created: function created() {
|
||
var this$1 = this;
|
||
|
||
// add watchers
|
||
var watchProps = [
|
||
'text', 'size', 'height', 'curveSegments',
|
||
'bevelEnabled', 'bevelThickness', 'bevelSize', 'bevelOffset', 'bevelSegments',
|
||
'align' ];
|
||
watchProps.forEach(function (p) {
|
||
watch(function () { return this$1[p]; }, function () {
|
||
if (this$1.font) { this$1.refreshGeometry(); }
|
||
});
|
||
});
|
||
|
||
var loader = new FontLoader();
|
||
loader.load(this.fontSrc, function (font) {
|
||
this$1.font = font;
|
||
this$1.createGeometry();
|
||
this$1.initMesh();
|
||
});
|
||
},
|
||
methods: {
|
||
createGeometry: function createGeometry() {
|
||
this.geometry = new TextBufferGeometry(this.text, {
|
||
font: this.font,
|
||
size: this.size,
|
||
height: this.height,
|
||
depth: this.depth,
|
||
curveSegments: this.curveSegments,
|
||
bevelEnabled: this.bevelEnabled,
|
||
bevelThickness: this.bevelThickness,
|
||
bevelSize: this.bevelSize,
|
||
bevelOffset: this.bevelOffset,
|
||
bevelSegments: this.bevelSegments,
|
||
});
|
||
|
||
if (this.align === 'center') {
|
||
this.geometry.center();
|
||
}
|
||
},
|
||
},
|
||
};
|
||
|
||
var Torus = {
|
||
extends: Mesh,
|
||
props: {
|
||
radius: { type: Number, default: 0.5 },
|
||
tube: { type: Number, default: 0.4 },
|
||
radialSegments: { type: Number, default: 8 },
|
||
tubularSegments: { type: Number, default: 6 },
|
||
arc: { type: Number, default: Math.PI * 2 },
|
||
},
|
||
created: function created() {
|
||
var this$1 = this;
|
||
|
||
this.createGeometry();
|
||
|
||
var watchProps = ['radius', 'tube', 'radialSegments', 'tubularSegments', 'arc'];
|
||
watchProps.forEach(function (prop) {
|
||
watch(function () { return this$1[prop]; }, function () {
|
||
this$1.refreshGeometry();
|
||
});
|
||
});
|
||
},
|
||
methods: {
|
||
createGeometry: function createGeometry() {
|
||
this.geometry = new TorusBufferGeometry(this.radius, this.tube, this.radialSegments, this.tubularSegments, this.arc);
|
||
},
|
||
},
|
||
__hmrId: 'Torus',
|
||
};
|
||
|
||
var TorusKnot = {
|
||
extends: Mesh,
|
||
props: {
|
||
radius: { type: Number, default: 0.5 },
|
||
tube: { type: Number, default: 0.4 },
|
||
radialSegments: { type: Number, default: 64 },
|
||
tubularSegments: { type: Number, default: 8 },
|
||
p: { type: Number, default: 2 },
|
||
q: { type: Number, default: 3 },
|
||
},
|
||
created: function created() {
|
||
var this$1 = this;
|
||
|
||
this.createGeometry();
|
||
|
||
var watchProps = ['radius', 'tube', 'radialSegments', 'tubularSegments', 'p', 'q'];
|
||
watchProps.forEach(function (prop) {
|
||
watch(function () { return this$1[prop]; }, function () {
|
||
this$1.refreshGeometry();
|
||
});
|
||
});
|
||
},
|
||
methods: {
|
||
createGeometry: function createGeometry() {
|
||
this.geometry = new TorusKnotBufferGeometry(this.radius, this.tube, this.radialSegments, this.tubularSegments, this.p, this.q);
|
||
},
|
||
},
|
||
__hmrId: 'TorusKnot',
|
||
};
|
||
|
||
var Tube = {
|
||
extends: Mesh,
|
||
props: {
|
||
path: Curve,
|
||
tubularSegments: { type: Number, default: 64 },
|
||
radius: { type: Number, default: 1 },
|
||
radialSegments: { type: Number, default: 8 },
|
||
closed: { type: Boolean, default: false },
|
||
},
|
||
created: function created() {
|
||
var this$1 = this;
|
||
|
||
this.createGeometry();
|
||
|
||
var watchProps = ['path', 'tubularSegments', 'radius', 'radialSegments', 'closed'];
|
||
watchProps.forEach(function (prop) {
|
||
watch(function () { return this$1[prop]; }, function () {
|
||
this$1.refreshGeometry();
|
||
});
|
||
});
|
||
},
|
||
methods: {
|
||
createGeometry: function createGeometry() {
|
||
this.geometry = new TubeBufferGeometry(this.path, this.tubularSegments, this.radius, this.radialSegments, this.closed);
|
||
},
|
||
},
|
||
__hmrId: 'Tube',
|
||
};
|
||
|
||
var Gem = {
|
||
extends: Mesh,
|
||
props: {
|
||
cubeRTSize: { type: Number, default: 512 },
|
||
cubeCameraNear: { type: Number, default: 0.1 },
|
||
cubeCameraFar: { type: Number, default: 2000 },
|
||
autoUpdate: Boolean,
|
||
},
|
||
mounted: function mounted() {
|
||
this.initGem();
|
||
if (this.autoUpdate) { this.three.onBeforeRender(this.updateCubeRT); }
|
||
else { this.rendererComponent.onMounted(this.updateCubeRT); }
|
||
},
|
||
unmounted: function unmounted() {
|
||
this.three.offBeforeRender(this.updateCubeRT);
|
||
if (this.meshBack) { this.scene.remove(this.meshBack); }
|
||
if (this.materialBack) { this.materialBack.dispose(); }
|
||
},
|
||
methods: {
|
||
initGem: function initGem() {
|
||
var cubeRT = new WebGLCubeRenderTarget(this.cubeRTSize, { format: RGBFormat, generateMipmaps: true, minFilter: LinearMipmapLinearFilter });
|
||
this.cubeCamera = new CubeCamera(this.cubeCameraNear, this.cubeCameraFar, cubeRT);
|
||
useBindProp(this, 'position', this.cubeCamera.position);
|
||
this.scene.add(this.cubeCamera);
|
||
|
||
this.material.side = FrontSide;
|
||
this.material.envMap = cubeRT.texture;
|
||
this.material.envMapIntensity = 10;
|
||
this.material.metalness = 0;
|
||
this.material.roughness = 0;
|
||
this.material.opacity = 0.75;
|
||
this.material.transparent = true;
|
||
this.material.premultipliedAlpha = true;
|
||
this.material.needsUpdate = true;
|
||
|
||
this.materialBack = this.material.clone();
|
||
this.materialBack.side = BackSide;
|
||
this.materialBack.envMapIntensity = 5;
|
||
this.materialBack.metalness = 1;
|
||
this.materialBack.roughness = 0;
|
||
this.materialBack.opacity = 0.5;
|
||
|
||
this.meshBack = new Mesh$1(this.geometry, this.materialBack);
|
||
|
||
useBindProp(this, 'position', this.meshBack.position);
|
||
useBindProp(this, 'rotation', this.meshBack.rotation);
|
||
useBindProp(this, 'scale', this.meshBack.scale);
|
||
this.scene.add(this.meshBack);
|
||
},
|
||
updateCubeRT: function updateCubeRT() {
|
||
this.mesh.visible = false;
|
||
this.meshBack.visible = false;
|
||
this.cubeCamera.update(this.three.renderer, this.scene);
|
||
this.mesh.visible = true;
|
||
this.meshBack.visible = true;
|
||
},
|
||
},
|
||
__hmrId: 'Gem',
|
||
};
|
||
|
||
var Image = {
|
||
emits: ['loaded'],
|
||
extends: Mesh,
|
||
props: {
|
||
src: String,
|
||
width: Number,
|
||
height: Number,
|
||
keepSize: Boolean,
|
||
},
|
||
created: function created() {
|
||
var this$1 = this;
|
||
|
||
this.createGeometry();
|
||
this.createMaterial();
|
||
this.initMesh();
|
||
|
||
watch(function () { return this$1.src; }, this.refreshTexture);
|
||
|
||
['width', 'height'].forEach(function (p) {
|
||
watch(function () { return this$1[p]; }, this$1.resize);
|
||
});
|
||
|
||
if (this.keepSize) { this.three.onAfterResize(this.resize); }
|
||
},
|
||
methods: {
|
||
createGeometry: function createGeometry() {
|
||
this.geometry = new PlaneBufferGeometry(1, 1, 1, 1);
|
||
},
|
||
createMaterial: function createMaterial() {
|
||
this.material = new MeshBasicMaterial({ side: DoubleSide, map: this.loadTexture() });
|
||
},
|
||
loadTexture: function loadTexture() {
|
||
return new TextureLoader().load(this.src, this.onLoaded);
|
||
},
|
||
refreshTexture: function refreshTexture() {
|
||
if (this.texture) { this.texture.dispose(); }
|
||
this.material.map = this.loadTexture();
|
||
this.material.needsUpdate = true;
|
||
},
|
||
onLoaded: function onLoaded(texture) {
|
||
this.texture = texture;
|
||
this.resize();
|
||
this.$emit('loaded');
|
||
},
|
||
resize: function resize() {
|
||
if (!this.texture) { return; }
|
||
var screen = this.three.size;
|
||
var iW = this.texture.image.width;
|
||
var iH = this.texture.image.height;
|
||
var iRatio = iW / iH;
|
||
var w, h;
|
||
if (this.width && this.height) {
|
||
w = this.width * screen.wWidth / screen.width;
|
||
h = this.height * screen.wHeight / screen.height;
|
||
} else if (this.width) {
|
||
w = this.width * screen.wWidth / screen.width;
|
||
h = w / iRatio;
|
||
} else if (this.height) {
|
||
h = this.height * screen.wHeight / screen.height;
|
||
w = h * iRatio;
|
||
}
|
||
this.mesh.scale.x = w;
|
||
this.mesh.scale.y = h;
|
||
},
|
||
},
|
||
__hmrId: 'Image',
|
||
};
|
||
|
||
var InstancedMesh = {
|
||
inject: ['three', 'scene'],
|
||
props: {
|
||
materialId: String,
|
||
count: Number,
|
||
position: Object,
|
||
castShadow: Boolean,
|
||
receiveShadow: Boolean,
|
||
},
|
||
provide: function provide() {
|
||
return {
|
||
mesh: this,
|
||
};
|
||
},
|
||
beforeMount: function beforeMount() {
|
||
if (!this.$slots.default) {
|
||
console.error('Missing Geometry');
|
||
}
|
||
},
|
||
mounted: function mounted() {
|
||
this.initMesh();
|
||
},
|
||
unmounted: function unmounted() {
|
||
this.scene.remove(this.mesh);
|
||
},
|
||
methods: {
|
||
initMesh: function initMesh() {
|
||
var this$1 = this;
|
||
|
||
if (!this.material && this.materialId) {
|
||
this.material = this.three.materials[this.materialId];
|
||
}
|
||
|
||
this.mesh = new InstancedMesh$1(this.geometry, this.material, this.count);
|
||
|
||
useBindProp(this, 'position', this.mesh.position);
|
||
useBindProp(this, 'rotation', this.mesh.rotation);
|
||
useBindProp(this, 'scale', this.mesh.scale);
|
||
|
||
['castShadow', 'receiveShadow'].forEach(function (p) {
|
||
this$1.mesh[p] = this$1[p];
|
||
watch(function () { return this$1[p]; }, function () { this$1.mesh[p] = this$1[p]; });
|
||
});
|
||
|
||
// watch(() => this.materialId, () => {
|
||
// this.mesh.material = this.three.materials[this.materialId];
|
||
// });
|
||
|
||
this.scene.add(this.mesh);
|
||
},
|
||
setGeometry: function setGeometry(geometry) {
|
||
this.geometry = geometry;
|
||
if (this.mesh) { this.mesh.geometry = geometry; }
|
||
},
|
||
setMaterial: function setMaterial(material) {
|
||
this.material = material;
|
||
if (this.mesh) { this.mesh.material = material; }
|
||
},
|
||
},
|
||
render: function render() {
|
||
return this.$slots.default();
|
||
},
|
||
__hmrId: 'InstancedMesh',
|
||
};
|
||
|
||
var MirrorMesh = {
|
||
extends: Mesh,
|
||
props: {
|
||
cubeRTSize: { type: Number, default: 512 },
|
||
cubeCameraNear: { type: Number, default: 0.1 },
|
||
cubeCameraFar: { type: Number, default: 2000 },
|
||
autoUpdate: Boolean,
|
||
},
|
||
mounted: function mounted() {
|
||
this.initMirrorMesh();
|
||
if (this.autoUpdate) { this.three.onBeforeRender(this.updateCubeRT); }
|
||
else { this.rendererComponent.onMounted(this.updateCubeRT); }
|
||
},
|
||
unmounted: function unmounted() {
|
||
this.three.offBeforeRender(this.updateCubeRT);
|
||
},
|
||
methods: {
|
||
initMirrorMesh: function initMirrorMesh() {
|
||
var cubeRT = new WebGLCubeRenderTarget(this.cubeRTSize, { format: RGBFormat, generateMipmaps: true, minFilter: LinearMipmapLinearFilter });
|
||
this.cubeCamera = new CubeCamera(this.cubeCameraNear, this.cubeCameraFar, cubeRT);
|
||
useBindProp(this, 'position', this.cubeCamera.position);
|
||
this.scene.add(this.cubeCamera);
|
||
|
||
this.material.envMap = cubeRT.texture;
|
||
this.material.needsUpdate = true;
|
||
},
|
||
updateCubeRT: function updateCubeRT() {
|
||
this.mesh.visible = false;
|
||
this.cubeCamera.update(this.three.renderer, this.scene);
|
||
this.mesh.visible = true;
|
||
},
|
||
},
|
||
__hmrId: 'MirrorMesh',
|
||
};
|
||
|
||
var RefractionMesh = {
|
||
extends: Mesh,
|
||
props: {
|
||
cubeRTSize: { type: Number, default: 512 },
|
||
cubeCameraNear: { type: Number, default: 0.1 },
|
||
cubeCameraFar: { type: Number, default: 2000 },
|
||
autoUpdate: Boolean,
|
||
},
|
||
mounted: function mounted() {
|
||
this.initMirrorMesh();
|
||
if (this.autoUpdate) { this.three.onBeforeRender(this.updateCubeRT); }
|
||
else { this.rendererComponent.onMounted(this.updateCubeRT); }
|
||
},
|
||
unmounted: function unmounted() {
|
||
this.three.offBeforeRender(this.updateCubeRT);
|
||
},
|
||
methods: {
|
||
initMirrorMesh: function initMirrorMesh() {
|
||
var cubeRT = new WebGLCubeRenderTarget(this.cubeRTSize, { mapping: CubeRefractionMapping, format: RGBFormat, generateMipmaps: true, minFilter: LinearMipmapLinearFilter });
|
||
this.cubeCamera = new CubeCamera(this.cubeCameraNear, this.cubeCameraFar, cubeRT);
|
||
useBindProp(this, 'position', this.cubeCamera.position);
|
||
this.scene.add(this.cubeCamera);
|
||
|
||
this.material.envMap = cubeRT.texture;
|
||
this.material.refractionRatio = 0.95;
|
||
this.material.needsUpdate = true;
|
||
},
|
||
updateCubeRT: function updateCubeRT() {
|
||
this.mesh.visible = false;
|
||
this.cubeCamera.update(this.three.renderer, this.scene);
|
||
this.mesh.visible = true;
|
||
},
|
||
},
|
||
__hmrId: 'RefractionMesh',
|
||
};
|
||
|
||
var Sprite = {
|
||
emits: ['ready', 'loaded'],
|
||
inject: ['three', 'scene'],
|
||
props: {
|
||
src: String,
|
||
position: Object,
|
||
scale: Object,
|
||
},
|
||
mounted: function mounted() {
|
||
this.texture = new TextureLoader().load(this.src, this.onLoaded);
|
||
this.material = new SpriteMaterial({ map: this.texture });
|
||
this.sprite = new Sprite$1(this.material);
|
||
this.geometry = this.sprite.geometry;
|
||
|
||
useBindProp(this, 'position', this.sprite.position);
|
||
useBindProp(this, 'scale', this.sprite.scale);
|
||
|
||
// watch(() => this.src, () => {
|
||
// this.texture = new TextureLoader().load(this.src, this.onLoaded);
|
||
// this.material.map = this.texture;
|
||
// });
|
||
|
||
this.scene.add(this.sprite);
|
||
this.$emit('ready');
|
||
},
|
||
unmounted: function unmounted() {
|
||
this.texture.dispose();
|
||
this.material.dispose();
|
||
this.scene.remove(this.sprite);
|
||
},
|
||
methods: {
|
||
onLoaded: function onLoaded() {
|
||
this.updateUV();
|
||
this.$emit('loaded');
|
||
},
|
||
updateUV: function updateUV() {
|
||
this.iWidth = this.texture.image.width;
|
||
this.iHeight = this.texture.image.height;
|
||
this.iRatio = this.iWidth / this.iHeight;
|
||
|
||
var x = 0.5, y = 0.5;
|
||
if (this.iRatio > 1) {
|
||
y = 0.5 / this.iRatio;
|
||
} else {
|
||
x = 0.5 / this.iRatio;
|
||
}
|
||
|
||
var positions = this.geometry.attributes.position.array;
|
||
positions[0] = -x; positions[1] = -y;
|
||
positions[5] = x; positions[6] = -y;
|
||
positions[10] = x; positions[11] = y;
|
||
positions[15] = -x; positions[16] = y;
|
||
this.geometry.attributes.position.needsUpdate = true;
|
||
},
|
||
},
|
||
render: function render() {
|
||
return [];
|
||
},
|
||
__hmrId: 'Sprite',
|
||
};
|
||
|
||
var EffectComposer = {
|
||
setup: function setup() {
|
||
return {
|
||
passes: [],
|
||
};
|
||
},
|
||
inject: ['three'],
|
||
provide: function provide() {
|
||
return {
|
||
passes: this.passes,
|
||
};
|
||
},
|
||
mounted: function mounted() {
|
||
var this$1 = this;
|
||
|
||
this.three.onAfterInit(function () {
|
||
this$1.composer = new EffectComposer$1(this$1.three.renderer);
|
||
this$1.three.renderer.autoClear = false;
|
||
this$1.passes.forEach(function (pass) {
|
||
this$1.composer.addPass(pass);
|
||
});
|
||
this$1.three.composer = this$1.composer;
|
||
});
|
||
},
|
||
render: function render() {
|
||
return this.$slots.default();
|
||
},
|
||
__hmrId: 'EffectComposer',
|
||
};
|
||
|
||
var EffectPass = {
|
||
inject: ['three', 'passes'],
|
||
beforeMount: function beforeMount() {
|
||
if (!this.passes) {
|
||
console.error('Missing parent EffectComposer');
|
||
}
|
||
},
|
||
unmounted: function unmounted() {
|
||
if (this.pass.dispose) { this.pass.dispose(); }
|
||
},
|
||
render: function render() {
|
||
return [];
|
||
},
|
||
__hmrId: 'EffectPass',
|
||
};
|
||
|
||
var RenderPass = {
|
||
extends: EffectPass,
|
||
mounted: function mounted() {
|
||
if (!this.three.scene) {
|
||
console.error('Missing Scene');
|
||
}
|
||
if (!this.three.camera) {
|
||
console.error('Missing Camera');
|
||
}
|
||
var pass = new RenderPass$1(this.three.scene, this.three.camera);
|
||
this.passes.push(pass);
|
||
this.pass = pass;
|
||
},
|
||
__hmrId: 'RenderPass',
|
||
};
|
||
|
||
var BokehPass = {
|
||
extends: EffectPass,
|
||
props: {
|
||
focus: {
|
||
type: Number,
|
||
default: 1,
|
||
},
|
||
aperture: {
|
||
type: Number,
|
||
default: 0.025,
|
||
},
|
||
maxblur: {
|
||
type: Number,
|
||
default: 0.01,
|
||
},
|
||
},
|
||
watch: {
|
||
focus: function focus() { this.pass.uniforms.focus.value = this.focus; },
|
||
aperture: function aperture() { this.pass.uniforms.aperture.value = this.aperture; },
|
||
maxblur: function maxblur() { this.pass.uniforms.maxblur.value = this.maxblur; },
|
||
},
|
||
mounted: function mounted() {
|
||
if (!this.three.scene) {
|
||
console.error('Missing Scene');
|
||
}
|
||
if (!this.three.camera) {
|
||
console.error('Missing Camera');
|
||
}
|
||
var params = {
|
||
focus: this.focus,
|
||
aperture: this.aperture,
|
||
maxblur: this.maxblur,
|
||
width: this.three.size.width,
|
||
height: this.three.size.height,
|
||
};
|
||
var pass = new BokehPass$1(this.three.scene, this.three.camera, params);
|
||
this.passes.push(pass);
|
||
this.pass = pass;
|
||
},
|
||
__hmrId: 'BokehPass',
|
||
};
|
||
|
||
var FilmPass = {
|
||
extends: EffectPass,
|
||
props: {
|
||
noiseIntensity: {
|
||
type: Number,
|
||
default: 0.5,
|
||
},
|
||
scanlinesIntensity: {
|
||
type: Number,
|
||
default: 0.05,
|
||
},
|
||
scanlinesCount: {
|
||
type: Number,
|
||
default: 4096,
|
||
},
|
||
grayscale: {
|
||
type: Number,
|
||
default: 0,
|
||
},
|
||
},
|
||
watch: {
|
||
noiseIntensity: function noiseIntensity() { this.pass.uniforms.nIntensity.value = this.noiseIntensity; },
|
||
scanlinesIntensity: function scanlinesIntensity() { this.pass.uniforms.sIntensity.value = this.scanlinesIntensity; },
|
||
scanlinesCount: function scanlinesCount() { this.pass.uniforms.sCount.value = this.scanlinesCount; },
|
||
grayscale: function grayscale() { this.pass.uniforms.grayscale.value = this.grayscale; },
|
||
},
|
||
mounted: function mounted() {
|
||
var pass = new FilmPass$1(this.noiseIntensity, this.scanlinesIntensity, this.scanlinesCount, this.grayscale);
|
||
this.passes.push(pass);
|
||
this.pass = pass;
|
||
},
|
||
__hmrId: 'FilmPass',
|
||
};
|
||
|
||
var HalftonePass = {
|
||
extends: EffectPass,
|
||
props: {
|
||
shape: { type: Number, default: 1 },
|
||
radius: { type: Number, default: 4 },
|
||
rotateR: { type: Number, default: Math.PI / 12 * 1 },
|
||
rotateG: { type: Number, default: Math.PI / 12 * 2 },
|
||
rotateB: { type: Number, default: Math.PI / 12 * 3 },
|
||
scatter: { type: Number, default: 0 },
|
||
},
|
||
mounted: function mounted() {
|
||
var this$1 = this;
|
||
|
||
var pass = new HalftonePass$1(this.three.size.width, this.three.size.height, {});
|
||
|
||
['shape', 'radius', 'rotateR', 'rotateG', 'rotateB', 'scatter'].forEach(function (p) {
|
||
pass.uniforms[p].value = this$1[p];
|
||
watch(function () { return this$1[p]; }, function () {
|
||
pass.uniforms[p].value = this$1[p];
|
||
});
|
||
});
|
||
|
||
this.passes.push(pass);
|
||
this.pass = pass;
|
||
},
|
||
__hmrId: 'HalftonePass',
|
||
};
|
||
|
||
var SAOPass = {
|
||
extends: EffectPass,
|
||
props: {
|
||
depthTexture: { type: Boolean, default: false },
|
||
useNormals: { type: Boolean, default: false },
|
||
resolution: Object,
|
||
},
|
||
mounted: function mounted() {
|
||
if (!this.three.scene) {
|
||
console.error('Missing Scene');
|
||
}
|
||
if (!this.three.camera) {
|
||
console.error('Missing Camera');
|
||
}
|
||
|
||
var resolution = this.resolution ? new Vector2(this.resolution.x, this.resolution.y) : new Vector2(this.three.size.width, this.three.size.height);
|
||
var pass = new SAOPass$1(this.three.scene, this.three.camera, this.depthTexture, this.useNormals, resolution);
|
||
this.passes.push(pass);
|
||
this.pass = pass;
|
||
},
|
||
__hmrId: 'SAOPass',
|
||
};
|
||
|
||
var UnrealBloomPass = {
|
||
extends: EffectPass,
|
||
props: {
|
||
strength: { type: Number, default: 1.5 },
|
||
radius: { type: Number, default: 0 },
|
||
threshold: { type: Number, default: 0 },
|
||
},
|
||
watch: {
|
||
strength: function strength() { this.pass.strength = this.strength; },
|
||
radius: function radius() { this.pass.radius = this.radius; },
|
||
threshold: function threshold() { this.pass.threshold = this.threshold; },
|
||
},
|
||
mounted: function mounted() {
|
||
var size = new Vector2(this.three.size.width, this.three.size.height);
|
||
var pass = new UnrealBloomPass$1(size, this.strength, this.radius, this.threshold);
|
||
this.passes.push(pass);
|
||
this.pass = pass;
|
||
},
|
||
__hmrId: 'UnrealBloomPass',
|
||
};
|
||
|
||
var snoise2 = "\n//\n// Description : Array and textureless GLSL 2D simplex noise function.\n// Author : Ian McEwan, Ashima Arts.\n// Maintainer : ijm\n// Lastmod : 20110822 (ijm)\n// License : Copyright (C) 2011 Ashima Arts. All rights reserved.\n// Distributed under the MIT License. See LICENSE file.\n// https://github.com/ashima/webgl-noise\n//\n\nvec3 mod289(vec3 x) {\n return x - floor(x * (1.0 / 289.0)) * 289.0;\n}\n\nvec2 mod289(vec2 x) {\n return x - floor(x * (1.0 / 289.0)) * 289.0;\n}\n\nvec3 permute(vec3 x) {\n return mod289(((x*34.0)+1.0)*x);\n}\n\nfloat snoise(vec2 v)\n{\n const vec4 C = vec4(0.211324865405187, // (3.0-sqrt(3.0))/6.0\n 0.366025403784439, // 0.5*(sqrt(3.0)-1.0)\n -0.577350269189626, // -1.0 + 2.0 * C.x\n 0.024390243902439); // 1.0 / 41.0\n // First corner\n vec2 i = floor(v + dot(v, C.yy) );\n vec2 x0 = v - i + dot(i, C.xx);\n\n // Other corners\n vec2 i1;\n i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);\n vec4 x12 = x0.xyxy + C.xxzz;\n x12.xy -= i1;\n\n // Permutations\n i = mod289(i); // Avoid truncation effects in permutation\n vec3 p = permute( permute( i.y + vec3(0.0, i1.y, 1.0 ))\n + i.x + vec3(0.0, i1.x, 1.0 ));\n\n vec3 m = max(0.5 - vec3(dot(x0,x0), dot(x12.xy,x12.xy), dot(x12.zw,x12.zw)), 0.0);\n m = m*m ;\n m = m*m ;\n\n // Gradients: 41 points uniformly over a line, mapped onto a diamond.\n // The ring size 17*17 = 289 is close to a multiple of 41 (41*7 = 287)\n\n vec3 x = 2.0 * fract(p * C.www) - 1.0;\n vec3 h = abs(x) - 0.5;\n vec3 ox = floor(x + 0.5);\n vec3 a0 = x - ox;\n\n // Normalise gradients implicitly by scaling m\n // Approximation of: m *= inversesqrt( a0*a0 + h*h );\n m *= 1.79284291400159 - 0.85373472095314 * ( a0*a0 + h*h );\n\n // Compute final noise value at P\n vec3 g;\n g.x = a0.x * x0.x + h.x * x0.y;\n g.yz = a0.yz * x12.xz + h.yz * x12.yw;\n return 130.0 * dot(m, g);\n}\n";
|
||
|
||
var NoisyImage = {
|
||
extends: Image,
|
||
props: {
|
||
widthSegments: { type: Number, default: 20 },
|
||
heightSegments: { type: Number, default: 20 },
|
||
timeCoef: { type: Number, default: 0.001 },
|
||
noiseCoef: { type: Number, default: 1 },
|
||
zCoef: { type: Number, default: 5 },
|
||
dispCoef: { type: Number, default: 0.05 },
|
||
},
|
||
setup: function setup(props) {
|
||
// uniforms
|
||
var uTime = { value: 0 };
|
||
var uNoiseCoef = { value: props.noiseCoef };
|
||
watch(function () { return props.noiseCoef; }, function (value) { uNoiseCoef.value = value; });
|
||
var uZCoef = { value: props.zCoef };
|
||
watch(function () { return props.zCoef; }, function (value) { uZCoef.value = value; });
|
||
var uDispCoef = { value: props.dispCoef };
|
||
watch(function () { return props.dispCoef; }, function (value) { uDispCoef.value = value; });
|
||
|
||
return {
|
||
uTime: uTime, uNoiseCoef: uNoiseCoef, uZCoef: uZCoef, uDispCoef: uDispCoef,
|
||
};
|
||
},
|
||
mounted: function mounted() {
|
||
this.startTime = Date.now();
|
||
this.three.onBeforeRender(this.updateTime);
|
||
},
|
||
unmounted: function unmounted() {
|
||
this.three.offBeforeRender(this.updateTime);
|
||
},
|
||
methods: {
|
||
createGeometry: function createGeometry() {
|
||
this.geometry = new PlaneBufferGeometry(1, 1, this.widthSegments, this.heightSegments);
|
||
},
|
||
createMaterial: function createMaterial() {
|
||
var this$1 = this;
|
||
|
||
this.material = new MeshBasicMaterial({ side: DoubleSide, map: this.loadTexture() });
|
||
this.material.onBeforeCompile = function (shader) {
|
||
shader.uniforms.uTime = this$1.uTime;
|
||
shader.uniforms.uNoiseCoef = this$1.uNoiseCoef;
|
||
shader.uniforms.uZCoef = this$1.uZCoef;
|
||
shader.uniforms.uDispCoef = this$1.uDispCoef;
|
||
shader.vertexShader = "\n uniform float uTime;\n uniform float uNoiseCoef;\n uniform float uZCoef;\n varying float vNoise;\n " + snoise2 + "\n " + shader.vertexShader;
|
||
|
||
shader.vertexShader = shader.vertexShader.replace(
|
||
'#include <begin_vertex>',
|
||
" \n vec3 p = vec3(position * uNoiseCoef);\n p.x += uTime;\n vNoise = snoise(p.xy);\n vec3 transformed = vec3(position);\n transformed.z += vNoise * uZCoef;\n "
|
||
);
|
||
|
||
shader.fragmentShader = "\n uniform float uDispCoef;\n varying float vNoise;\n " + shader.fragmentShader;
|
||
|
||
shader.fragmentShader = shader.fragmentShader.replace(
|
||
'#include <map_fragment>',
|
||
"\n vec4 texelColor = texture2D(map, vUv);\n vec4 dispTexel = texture2D(map, vUv + vec2(vNoise * uDispCoef, 0));\n texelColor.r = dispTexel.r;\n diffuseColor = texelColor;\n "
|
||
);
|
||
this$1.materialShader = shader;
|
||
};
|
||
},
|
||
updateTime: function updateTime() {
|
||
this.uTime.value = (Date.now() - this.startTime) * this.timeCoef;
|
||
},
|
||
},
|
||
__hmrId: 'NoisyImage',
|
||
};
|
||
|
||
var snoise3 = "\n//\n// Description : Array and textureless GLSL 2D/3D/4D simplex\n// noise functions.\n// Author : Ian McEwan, Ashima Arts.\n// Maintainer : ijm\n// Lastmod : 20110822 (ijm)\n// License : Copyright (C) 2011 Ashima Arts. All rights reserved.\n// Distributed under the MIT License. See LICENSE file.\n// https://github.com/ashima/webgl-noise\n//\n\nvec3 mod289(vec3 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }\nvec4 mod289(vec4 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }\nvec4 permute(vec4 x) { return mod289(((x*34.0)+1.0)*x); }\nvec4 taylorInvSqrt(vec4 r) { return 1.79284291400159 - 0.85373472095314 * r; }\n\nfloat snoise(vec3 v)\n{\n const vec2 C = vec2(1.0/6.0, 1.0/3.0) ;\n const vec4 D = vec4(0.0, 0.5, 1.0, 2.0);\n\n // First corner\n vec3 i = floor(v + dot(v, C.yyy) );\n vec3 x0 = v - i + dot(i, C.xxx) ;\n\n // Other corners\n vec3 g = step(x0.yzx, x0.xyz);\n vec3 l = 1.0 - g;\n vec3 i1 = min( g.xyz, l.zxy );\n vec3 i2 = max( g.xyz, l.zxy );\n\n vec3 x1 = x0 - i1 + C.xxx;\n vec3 x2 = x0 - i2 + C.yyy; // 2.0*C.x = 1/3 = C.y\n vec3 x3 = x0 - D.yyy; // -1.0+3.0*C.x = -0.5 = -D.y\n\n // Permutations\n i = mod289(i);\n vec4 p = permute( permute( permute(\n i.z + vec4(0.0, i1.z, i2.z, 1.0 ))\n + i.y + vec4(0.0, i1.y, i2.y, 1.0 ))\n + i.x + vec4(0.0, i1.x, i2.x, 1.0 ));\n\n // Gradients: 7x7 points over a square, mapped onto an octahedron.\n // The ring size 17*17 = 289 is close to a multiple of 49 (49*6 = 294)\n float n_ = 0.142857142857; // 1.0/7.0\n vec3 ns = n_ * D.wyz - D.xzx;\n\n vec4 j = p - 49.0 * floor(p * ns.z * ns.z); // mod(p,7*7)\n\n vec4 x_ = floor(j * ns.z);\n vec4 y_ = floor(j - 7.0 * x_ ); // mod(j,N)\n\n vec4 x = x_ *ns.x + ns.yyyy;\n vec4 y = y_ *ns.x + ns.yyyy;\n vec4 h = 1.0 - abs(x) - abs(y);\n\n vec4 b0 = vec4( x.xy, y.xy );\n vec4 b1 = vec4( x.zw, y.zw );\n\n vec4 s0 = floor(b0)*2.0 + 1.0;\n vec4 s1 = floor(b1)*2.0 + 1.0;\n vec4 sh = -step(h, vec4(0.0));\n\n vec4 a0 = b0.xzyw + s0.xzyw*sh.xxyy ;\n vec4 a1 = b1.xzyw + s1.xzyw*sh.zzww ;\n\n vec3 p0 = vec3(a0.xy,h.x);\n vec3 p1 = vec3(a0.zw,h.y);\n vec3 p2 = vec3(a1.xy,h.z);\n vec3 p3 = vec3(a1.zw,h.w);\n\n // Normalise gradients\n vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3)));\n p0 *= norm.x;\n p1 *= norm.y;\n p2 *= norm.z;\n p3 *= norm.w;\n\n // Mix final noise value\n vec4 m = max(0.6 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0);\n m = m * m;\n return 42.0 * dot( m*m, vec4( dot(p0,x0), dot(p1,x1),\n dot(p2,x2), dot(p3,x3) ) );\n}\n";
|
||
|
||
var NoisyPlane = {
|
||
extends: Plane,
|
||
props: {
|
||
timeCoef: { type: Number, default: 0.001 },
|
||
noiseCoef: { type: Number, default: 1 },
|
||
zCoef: { type: Number, default: 5 },
|
||
},
|
||
setup: function setup(props) {
|
||
// uniforms
|
||
var uTime = { value: 0 };
|
||
var uNoiseCoef = { value: props.noiseCoef };
|
||
watch(function () { return props.noiseCoef; }, function (value) { uNoiseCoef.value = value; });
|
||
var uZCoef = { value: props.zCoef };
|
||
watch(function () { return props.zCoef; }, function (value) { uZCoef.value = value; });
|
||
|
||
return {
|
||
uTime: uTime, uNoiseCoef: uNoiseCoef, uZCoef: uZCoef,
|
||
};
|
||
},
|
||
mounted: function mounted() {
|
||
this.updateMaterial();
|
||
this.startTime = Date.now();
|
||
this.three.onBeforeRender(this.updateTime);
|
||
},
|
||
unmounted: function unmounted() {
|
||
this.three.offBeforeRender(this.updateTime);
|
||
},
|
||
methods: {
|
||
updateMaterial: function updateMaterial() {
|
||
var this$1 = this;
|
||
|
||
this.material.onBeforeCompile = function (shader) {
|
||
shader.uniforms.uTime = this$1.uTime;
|
||
shader.uniforms.uNoiseCoef = this$1.uNoiseCoef;
|
||
shader.uniforms.uZCoef = this$1.uZCoef;
|
||
shader.vertexShader = "\n uniform float uTime;\n uniform float uNoiseCoef;\n uniform float uZCoef;\n varying float vNoise;\n " + snoise3 + "\n " + shader.vertexShader;
|
||
|
||
shader.vertexShader = shader.vertexShader.replace(
|
||
'#include <begin_vertex>',
|
||
" \n vec3 p = vec3(position * uNoiseCoef);\n vNoise = snoise(vec3(p.x, p.y, uTime));\n vec3 transformed = vec3(position);\n transformed.z += vNoise * uZCoef;\n "
|
||
);
|
||
this$1.materialShader = shader;
|
||
};
|
||
this.material.needsupdate = true;
|
||
},
|
||
updateTime: function updateTime() {
|
||
this.uTime.value = (Date.now() - this.startTime) * this.timeCoef;
|
||
},
|
||
},
|
||
__hmrId: 'NoisyPlane',
|
||
};
|
||
|
||
var snoise4 = "\n//\n// Description : Array and textureless GLSL 2D/3D/4D simplex\n// noise functions.\n// Author : Ian McEwan, Ashima Arts.\n// Maintainer : ijm\n// Lastmod : 20110822 (ijm)\n// License : Copyright (C) 2011 Ashima Arts. All rights reserved.\n// Distributed under the MIT License. See LICENSE file.\n// https://github.com/ashima/webgl-noise\n//\n\nvec4 mod289(vec4 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }\nfloat mod289(float x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }\nvec4 permute(vec4 x) { return mod289(((x*34.0)+1.0)*x); }\nfloat permute(float x) { return mod289(((x*34.0)+1.0)*x); }\nvec4 taylorInvSqrt(vec4 r) { return 1.79284291400159 - 0.85373472095314 * r; }\nfloat taylorInvSqrt(float r) { return 1.79284291400159 - 0.85373472095314 * r; }\n\nvec4 grad4(float j, vec4 ip)\n{\n const vec4 ones = vec4(1.0, 1.0, 1.0, -1.0);\n vec4 p,s;\n\n p.xyz = floor( fract (vec3(j) * ip.xyz) * 7.0) * ip.z - 1.0;\n p.w = 1.5 - dot(abs(p.xyz), ones.xyz);\n s = vec4(lessThan(p, vec4(0.0)));\n p.xyz = p.xyz + (s.xyz*2.0 - 1.0) * s.www;\n\n return p;\n}\n\n// (sqrt(5) - 1)/4 = F4, used once below\n#define F4 0.309016994374947451\n\nfloat snoise(vec4 v)\n{\n const vec4 C = vec4( 0.138196601125011, // (5 - sqrt(5))/20 G4\n 0.276393202250021, // 2 * G4\n 0.414589803375032, // 3 * G4\n -0.447213595499958); // -1 + 4 * G4\n\n // First corner\n vec4 i = floor(v + dot(v, vec4(F4)) );\n vec4 x0 = v - i + dot(i, C.xxxx);\n\n // Other corners\n\n // Rank sorting originally contributed by Bill Licea-Kane, AMD (formerly ATI)\n vec4 i0;\n vec3 isX = step( x0.yzw, x0.xxx );\n vec3 isYZ = step( x0.zww, x0.yyz );\n // i0.x = dot( isX, vec3( 1.0 ) );\n i0.x = isX.x + isX.y + isX.z;\n i0.yzw = 1.0 - isX;\n // i0.y += dot( isYZ.xy, vec2( 1.0 ) );\n i0.y += isYZ.x + isYZ.y;\n i0.zw += 1.0 - isYZ.xy;\n i0.z += isYZ.z;\n i0.w += 1.0 - isYZ.z;\n\n // i0 now contains the unique values 0,1,2,3 in each channel\n vec4 i3 = clamp( i0, 0.0, 1.0 );\n vec4 i2 = clamp( i0-1.0, 0.0, 1.0 );\n vec4 i1 = clamp( i0-2.0, 0.0, 1.0 );\n\n vec4 x1 = x0 - i1 + C.xxxx;\n vec4 x2 = x0 - i2 + C.yyyy;\n vec4 x3 = x0 - i3 + C.zzzz;\n vec4 x4 = x0 + C.wwww;\n\n // Permutations\n i = mod289(i);\n float j0 = permute( permute( permute( permute(i.w) + i.z) + i.y) + i.x);\n vec4 j1 = permute( permute( permute( permute (\n i.w + vec4(i1.w, i2.w, i3.w, 1.0 ))\n + i.z + vec4(i1.z, i2.z, i3.z, 1.0 ))\n + i.y + vec4(i1.y, i2.y, i3.y, 1.0 ))\n + i.x + vec4(i1.x, i2.x, i3.x, 1.0 ));\n\n // Gradients: 7x7x6 points over a cube, mapped onto a 4-cross polytope\n // 7*7*6 = 294, which is close to the ring size 17*17 = 289.\n vec4 ip = vec4(1.0/294.0, 1.0/49.0, 1.0/7.0, 0.0) ;\n\n vec4 p0 = grad4(j0, ip);\n vec4 p1 = grad4(j1.x, ip);\n vec4 p2 = grad4(j1.y, ip);\n vec4 p3 = grad4(j1.z, ip);\n vec4 p4 = grad4(j1.w, ip);\n\n // Normalise gradients\n vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3)));\n p0 *= norm.x;\n p1 *= norm.y;\n p2 *= norm.z;\n p3 *= norm.w;\n p4 *= taylorInvSqrt(dot(p4,p4));\n\n // Mix contributions from the five corners\n vec3 m0 = max(0.6 - vec3(dot(x0,x0), dot(x1,x1), dot(x2,x2)), 0.0);\n vec2 m1 = max(0.6 - vec2(dot(x3,x3), dot(x4,x4) ), 0.0);\n m0 = m0 * m0;\n m1 = m1 * m1;\n return 49.0 * ( dot(m0*m0, vec3( dot( p0, x0 ), dot( p1, x1 ), dot( p2, x2 )))\n + dot(m1*m1, vec2( dot( p3, x3 ), dot( p4, x4 ) ) ) ) ;\n\n}\n";
|
||
|
||
var NoisySphere = {
|
||
extends: Sphere,
|
||
props: {
|
||
radius: { type: Number, default: 20 },
|
||
widthSegments: { type: Number, default: 128 },
|
||
heightSegments: { type: Number, default: 128 },
|
||
timeCoef: { type: Number, default: 0.001 },
|
||
noiseCoef: { type: Number, default: 0.05 },
|
||
dispCoef: { type: Number, default: 5 },
|
||
},
|
||
setup: function setup(props) {
|
||
// uniforms
|
||
var uTime = { value: 0 };
|
||
var uNoiseCoef = { value: props.noiseCoef };
|
||
watch(function () { return props.noiseCoef; }, function (value) { uNoiseCoef.value = value; });
|
||
var uDispCoef = { value: props.dispCoef };
|
||
watch(function () { return props.dispCoef; }, function (value) { uDispCoef.value = value; });
|
||
|
||
return {
|
||
uTime: uTime, uNoiseCoef: uNoiseCoef, uDispCoef: uDispCoef,
|
||
};
|
||
},
|
||
mounted: function mounted() {
|
||
this.updateMaterial();
|
||
|
||
this.startTime = Date.now();
|
||
this.three.onBeforeRender(this.updateTime);
|
||
},
|
||
unmounted: function unmounted() {
|
||
this.three.offBeforeRender(this.updateTime);
|
||
},
|
||
methods: {
|
||
updateMaterial: function updateMaterial() {
|
||
var this$1 = this;
|
||
|
||
this.material.onBeforeCompile = function (shader) {
|
||
shader.uniforms.uTime = this$1.uTime;
|
||
shader.uniforms.uNoiseCoef = this$1.uNoiseCoef;
|
||
shader.uniforms.uDispCoef = this$1.uDispCoef;
|
||
shader.vertexShader = "\n uniform float uTime;\n uniform float uNoiseCoef;\n uniform float uDispCoef;\n varying float vNoise;\n " + snoise4 + "\n " + shader.vertexShader;
|
||
|
||
shader.vertexShader = shader.vertexShader.replace(
|
||
'#include <begin_vertex>',
|
||
"\n vec4 p = vec4(vec3(position * uNoiseCoef), uTime);\n vNoise = snoise(p);\n vec3 transformed = vec3(position);\n transformed += normalize(position) * vNoise * uDispCoef;\n "
|
||
);
|
||
this$1.materialShader = shader;
|
||
};
|
||
this.material.needsupdate = true;
|
||
},
|
||
updateTime: function updateTime() {
|
||
this.uTime.value = (Date.now() - this.startTime) * this.timeCoef;
|
||
},
|
||
},
|
||
__hmrId: 'NoisySphere',
|
||
};
|
||
|
||
var NoisyText = {
|
||
extends: Text,
|
||
props: {
|
||
timeCoef: { type: Number, default: 0.001 },
|
||
noiseCoef: { type: Number, default: 0.015 },
|
||
zCoef: { type: Number, default: 10 },
|
||
},
|
||
setup: function setup(props) {
|
||
// uniforms
|
||
var uTime = { value: 0 };
|
||
var uNoiseCoef = { value: props.noiseCoef };
|
||
watch(function () { return props.noiseCoef; }, function (value) { uNoiseCoef.value = value; });
|
||
var uZCoef = { value: props.zCoef };
|
||
watch(function () { return props.zCoef; }, function (value) { uZCoef.value = value; });
|
||
|
||
return {
|
||
uTime: uTime, uNoiseCoef: uNoiseCoef, uZCoef: uZCoef,
|
||
};
|
||
},
|
||
mounted: function mounted() {
|
||
this.updateMaterial();
|
||
|
||
this.startTime = Date.now();
|
||
this.three.onBeforeRender(this.updateTime);
|
||
},
|
||
unmounted: function unmounted() {
|
||
this.three.offBeforeRender(this.updateTime);
|
||
},
|
||
methods: {
|
||
updateMaterial: function updateMaterial() {
|
||
var this$1 = this;
|
||
|
||
this.material.onBeforeCompile = function (shader) {
|
||
shader.uniforms.uTime = this$1.uTime;
|
||
shader.uniforms.uNoiseCoef = this$1.uNoiseCoef;
|
||
shader.uniforms.uZCoef = this$1.uZCoef;
|
||
shader.vertexShader = "\n uniform float uTime;\n uniform float uNoiseCoef;\n uniform float uZCoef;\n " + snoise2 + "\n " + shader.vertexShader;
|
||
|
||
shader.vertexShader = shader.vertexShader.replace(
|
||
'#include <begin_vertex>',
|
||
" \n vec3 p = vec3(position * uNoiseCoef);\n p.x += uTime;\n float noise = snoise(p.xy);\n vec3 transformed = vec3(position);\n transformed.z += noise * uZCoef;\n "
|
||
);
|
||
this$1.materialShader = shader;
|
||
};
|
||
this.material.needsupdate = true;
|
||
},
|
||
updateTime: function updateTime() {
|
||
this.uTime.value = (Date.now() - this.startTime) * this.timeCoef;
|
||
},
|
||
},
|
||
__hmrId: 'NoisyText',
|
||
};
|
||
|
||
var AnimatedPlane = function AnimatedPlane(params) {
|
||
var this$1 = this;
|
||
|
||
Object.entries(params).forEach(function (ref) {
|
||
var key = ref[0];
|
||
var value = ref[1];
|
||
|
||
this$1[key] = value;
|
||
});
|
||
|
||
this.o3d = new Object3D();
|
||
this.uProgress = { value: 0 };
|
||
this.uvScale = new Vector2();
|
||
|
||
this.initMaterial();
|
||
this.initPlane();
|
||
};
|
||
|
||
AnimatedPlane.prototype.initMaterial = function initMaterial () {
|
||
var this$1 = this;
|
||
|
||
this.material = new MeshBasicMaterial({
|
||
side: DoubleSide,
|
||
transparent: true,
|
||
map: this.texture,
|
||
onBeforeCompile: function (shader) {
|
||
shader.uniforms.progress = this$1.uProgress;
|
||
shader.uniforms.uvScale = { value: this$1.uvScale };
|
||
shader.vertexShader = "\n uniform float progress;\n uniform vec2 uvScale;\n\n attribute vec3 offset;\n attribute vec3 rotation;\n attribute vec2 uvOffset;\n\n mat3 rotationMatrixXYZ(vec3 r)\n {\n float cx = cos(r.x);\n float sx = sin(r.x);\n float cy = cos(r.y);\n float sy = sin(r.y);\n float cz = cos(r.z);\n float sz = sin(r.z);\n\n return mat3(\n cy * cz, cx * sz + sx * sy * cz, sx * sz - cx * sy * cz,\n -cy * sz, cx * cz - sx * sy * sz, sx * cz + cx * sy * sz,\n sy, -sx * cy, cx * cy\n );\n }\n " + shader.vertexShader;
|
||
|
||
shader.vertexShader = shader.vertexShader.replace('#include <uv_vertex>', "\n #include <uv_vertex>\n vUv = vUv * uvScale + uvOffset;\n ");
|
||
|
||
shader.vertexShader = shader.vertexShader.replace('#include <project_vertex>', "\n mat3 rotMat = rotationMatrixXYZ(progress * rotation);\n transformed = rotMat * transformed;\n\n vec4 mvPosition = vec4(transformed, 1.0);\n #ifdef USE_INSTANCING\n mvPosition = instanceMatrix * mvPosition;\n #endif\n\n mvPosition.xyz += progress * offset;\n\n mvPosition = modelViewMatrix * mvPosition;\n gl_Position = projectionMatrix * mvPosition;\n ");
|
||
},
|
||
});
|
||
};
|
||
|
||
AnimatedPlane.prototype.initPlane = function initPlane () {
|
||
var ref = this.screen;
|
||
var width = ref.width;
|
||
var wWidth = ref.wWidth;
|
||
var wHeight = ref.wHeight;
|
||
this.wSize = this.size * wWidth / width;
|
||
this.nx = Math.ceil(wWidth / this.wSize) + 1;
|
||
this.ny = Math.ceil(wHeight / this.wSize) + 1;
|
||
this.icount = this.nx * this.ny;
|
||
|
||
this.initGeometry();
|
||
this.initUV();
|
||
this.initAnimAttributes();
|
||
|
||
if (this.imesh) {
|
||
this.o3d.remove(this.imesh);
|
||
}
|
||
this.imesh = new InstancedMesh$1(this.bGeometry, this.material, this.icount);
|
||
this.o3d.add(this.imesh);
|
||
|
||
var dummy = new Object3D();
|
||
var index = 0;
|
||
var x = -(wWidth - (wWidth - this.nx * this.wSize)) / 2 + this.dx;
|
||
for (var i = 0; i < this.nx; i++) {
|
||
var y = -(wHeight - (wHeight - this.ny * this.wSize)) / 2 + this.dy;
|
||
for (var j = 0; j < this.ny; j++) {
|
||
dummy.position.set(x, y, 0);
|
||
dummy.updateMatrix();
|
||
this.imesh.setMatrixAt(index++, dummy.matrix);
|
||
y += this.wSize;
|
||
}
|
||
x += this.wSize;
|
||
}
|
||
};
|
||
|
||
AnimatedPlane.prototype.initGeometry = function initGeometry () {
|
||
// square
|
||
var geometry = new Geometry$1();
|
||
geometry.vertices.push(new Vector3(0, 0, 0));
|
||
geometry.vertices.push(new Vector3(this.wSize, 0, 0));
|
||
geometry.vertices.push(new Vector3(0, this.wSize, 0));
|
||
geometry.vertices.push(new Vector3(this.wSize, this.wSize, 0));
|
||
geometry.faces.push(new Face3(0, 2, 1));
|
||
geometry.faces.push(new Face3(2, 3, 1));
|
||
|
||
geometry.faceVertexUvs[0].push([
|
||
new Vector2(0, 0),
|
||
new Vector2(0, 1),
|
||
new Vector2(1, 0) ]);
|
||
geometry.faceVertexUvs[0].push([
|
||
new Vector2(0, 1),
|
||
new Vector2(1, 1),
|
||
new Vector2(1, 0) ]);
|
||
|
||
// geometry.computeFaceNormals();
|
||
// geometry.computeVertexNormals();
|
||
|
||
// center
|
||
this.dx = this.wSize / 2;
|
||
this.dy = this.wSize / 2;
|
||
geometry.translate(-this.dx, -this.dy, 0);
|
||
|
||
this.bGeometry = new BufferGeometry().fromGeometry(geometry);
|
||
};
|
||
|
||
AnimatedPlane.prototype.initAnimAttributes = function initAnimAttributes () {
|
||
var rnd = MathUtils.randFloat;
|
||
var rndFS = MathUtils.randFloatSpread;
|
||
var v3 = new Vector3();
|
||
|
||
var offsets = new Float32Array(this.icount * 3);
|
||
for (var i = 0; i < offsets.length; i += 3) {
|
||
if (this.anim === 1) { v3.set(rndFS(10), rnd(50, 100), rnd(20, 50)).toArray(offsets, i); }
|
||
else { v3.set(rndFS(20), rndFS(20), rnd(20, 200)).toArray(offsets, i); }
|
||
}
|
||
this.bGeometry.setAttribute('offset', new InstancedBufferAttribute(offsets, 3));
|
||
|
||
var rotations = new Float32Array(this.icount * 3);
|
||
var angle = Math.PI * 4;
|
||
for (var i$1 = 0; i$1 < rotations.length; i$1 += 3) {
|
||
rotations[i$1] = rndFS(angle);
|
||
rotations[i$1 + 1] = rndFS(angle);
|
||
rotations[i$1 + 2] = rndFS(angle);
|
||
}
|
||
this.bGeometry.setAttribute('rotation', new InstancedBufferAttribute(rotations, 3));
|
||
};
|
||
|
||
AnimatedPlane.prototype.initUV = function initUV () {
|
||
var ratio = this.nx / this.ny;
|
||
var tRatio = this.texture.image.width / this.texture.image.height;
|
||
if (ratio > tRatio) { this.uvScale.set(1 / this.nx, (tRatio / ratio) / this.ny); }
|
||
else { this.uvScale.set((ratio / tRatio) / this.nx, 1 / this.ny); }
|
||
var nW = this.uvScale.x * this.nx;
|
||
var nH = this.uvScale.y * this.ny;
|
||
|
||
var v2 = new Vector2();
|
||
var uvOffsets = new Float32Array(this.icount * 2);
|
||
for (var i = 0; i < this.nx; i++) {
|
||
for (var j = 0; j < this.ny; j++) {
|
||
v2.set(
|
||
this.uvScale.x * i + (1 - nW) / 2,
|
||
this.uvScale.y * j + (1 - nH) / 2
|
||
).toArray(uvOffsets, (i * this.ny + j) * 2);
|
||
}
|
||
}
|
||
this.bGeometry.setAttribute('uvOffset', new InstancedBufferAttribute(uvOffsets, 2));
|
||
};
|
||
|
||
AnimatedPlane.prototype.setTexture = function setTexture (texture) {
|
||
this.texture = texture;
|
||
this.material.map = texture;
|
||
this.initUV();
|
||
};
|
||
|
||
AnimatedPlane.prototype.resize = function resize () {
|
||
this.initPlane();
|
||
};
|
||
|
||
function useTextures() {
|
||
var loader = new TextureLoader();
|
||
var textures = [];
|
||
|
||
var loadTexture = function (img, index) {
|
||
return new Promise(function (resolve) {
|
||
loader.load(
|
||
img.src,
|
||
function (texture) {
|
||
textures[index] = texture;
|
||
resolve(texture);
|
||
}
|
||
);
|
||
});
|
||
};
|
||
|
||
var loadTextures = function (images, cb) {
|
||
textures.splice(0);
|
||
Promise.all(images.map(loadTexture)).then(cb);
|
||
};
|
||
|
||
return {
|
||
textures: textures,
|
||
loadTextures: loadTextures,
|
||
};
|
||
}
|
||
|
||
var script = {
|
||
props: {
|
||
images: Array,
|
||
events: { type: Object, default: function () { return { wheel: true, click: true, keyup: true }; } },
|
||
},
|
||
setup: function setup() {
|
||
var ref = useTextures();
|
||
var textures = ref.textures;
|
||
var loadTextures = ref.loadTextures;
|
||
return {
|
||
textures: textures,
|
||
loadTextures: loadTextures,
|
||
progress: 0,
|
||
targetProgress: 0,
|
||
};
|
||
},
|
||
mounted: function mounted() {
|
||
this.three = this.$refs.renderer.three;
|
||
|
||
if (this.images.length < 2) {
|
||
console.error('This slider needs at least 2 images.');
|
||
} else {
|
||
this.loadTextures(this.images, this.init);
|
||
}
|
||
},
|
||
unmounted: function unmounted() {
|
||
document.removeEventListener('click', this.onClick);
|
||
document.removeEventListener('keyup', this.onKeyup);
|
||
window.removeEventListener('wheel', this.onWheel);
|
||
},
|
||
methods: {
|
||
init: function init() {
|
||
this.initScene();
|
||
|
||
gsap.fromTo(this.plane1.uProgress,
|
||
{
|
||
value: -2,
|
||
},
|
||
{
|
||
value: 0,
|
||
duration: 2.5,
|
||
ease: Power4.easeOut,
|
||
}
|
||
);
|
||
|
||
if (this.events.click) { document.addEventListener('click', this.onClick); }
|
||
if (this.events.keyup) { document.addEventListener('keyup', this.onKeyup); }
|
||
if (this.events.wheel) { window.addEventListener('wheel', this.onWheel); }
|
||
this.three.onBeforeRender(this.updateProgress);
|
||
this.three.onAfterResize(this.onResize);
|
||
},
|
||
initScene: function initScene() {
|
||
var renderer = this.three.renderer;
|
||
var scene = this.$refs.scene.scene;
|
||
|
||
this.plane1 = new AnimatedPlane({
|
||
renderer: renderer, screen: this.three.size,
|
||
size: 10,
|
||
anim: 1,
|
||
texture: this.textures[0],
|
||
});
|
||
|
||
this.plane2 = new AnimatedPlane({
|
||
renderer: renderer, screen: this.three.size,
|
||
size: 10,
|
||
anim: 2,
|
||
texture: this.textures[1],
|
||
});
|
||
|
||
this.setPlanesProgress(0);
|
||
this.planes = new Object3D();
|
||
this.planes.add(this.plane1.o3d);
|
||
this.planes.add(this.plane2.o3d);
|
||
scene.add(this.planes);
|
||
},
|
||
onResize: function onResize() {
|
||
this.plane1.resize();
|
||
this.plane2.resize();
|
||
},
|
||
onWheel: function onWheel(e) {
|
||
// e.preventDefault();
|
||
if (e.deltaY > 0) {
|
||
this.targetProgress = limit(this.targetProgress + 1 / 20, 0, this.images.length - 1);
|
||
} else {
|
||
this.targetProgress = limit(this.targetProgress - 1 / 20, 0, this.images.length - 1);
|
||
}
|
||
},
|
||
onClick: function onClick(e) {
|
||
if (e.clientY < this.three.size.height / 2) {
|
||
this.navPrevious();
|
||
} else {
|
||
this.navNext();
|
||
}
|
||
},
|
||
onKeyup: function onKeyup(e) {
|
||
if (e.keyCode === 37 || e.keyCode === 38) {
|
||
this.navPrevious();
|
||
} else if (e.keyCode === 39 || e.keyCode === 40) {
|
||
this.navNext();
|
||
}
|
||
},
|
||
navNext: function navNext() {
|
||
if (Number.isInteger(this.targetProgress)) { this.targetProgress += 1; }
|
||
else { this.targetProgress = Math.ceil(this.targetProgress); }
|
||
this.targetProgress = limit(this.targetProgress, 0, this.images.length - 1);
|
||
},
|
||
navPrevious: function navPrevious() {
|
||
if (Number.isInteger(this.targetProgress)) { this.targetProgress -= 1; }
|
||
else { this.targetProgress = Math.floor(this.targetProgress); }
|
||
this.targetProgress = limit(this.targetProgress, 0, this.images.length - 1);
|
||
},
|
||
updateProgress: function updateProgress() {
|
||
var progress1 = lerp(this.progress, this.targetProgress, 0.1);
|
||
var pdiff = progress1 - this.progress;
|
||
if (pdiff === 0) { return; }
|
||
|
||
var p0 = this.progress % 1;
|
||
var p1 = progress1 % 1;
|
||
if ((pdiff > 0 && p1 < p0) || (pdiff < 0 && p0 < p1)) {
|
||
var i = Math.floor(progress1);
|
||
this.plane1.setTexture(this.textures[i]);
|
||
this.plane2.setTexture(this.textures[i + 1]);
|
||
}
|
||
|
||
this.progress = progress1;
|
||
this.setPlanesProgress(this.progress % 1);
|
||
},
|
||
setPlanesProgress: function setPlanesProgress(progress) {
|
||
this.plane1.uProgress.value = progress;
|
||
this.plane2.uProgress.value = -1 + progress;
|
||
this.plane1.material.opacity = 1 - progress;
|
||
this.plane2.material.opacity = progress;
|
||
this.plane1.o3d.position.z = progress;
|
||
this.plane2.o3d.position.z = progress - 1;
|
||
},
|
||
},
|
||
};
|
||
|
||
function render(_ctx, _cache, $props, $setup, $data, $options) {
|
||
var _component_Camera = resolveComponent("Camera");
|
||
var _component_Scene = resolveComponent("Scene");
|
||
var _component_Renderer = resolveComponent("Renderer");
|
||
|
||
return (openBlock(), createBlock(_component_Renderer, { ref: "renderer" }, {
|
||
default: withCtx(function () { return [
|
||
createVNode(_component_Camera, {
|
||
ref: "camera",
|
||
position: { z: 150 }
|
||
}, null, 512 /* NEED_PATCH */),
|
||
createVNode(_component_Scene, { ref: "scene" }, null, 512 /* NEED_PATCH */)
|
||
]; }),
|
||
_: 1
|
||
}, 512 /* NEED_PATCH */))
|
||
}
|
||
|
||
script.render = render;
|
||
script.__file = "src/components/sliders/Slider1.vue";
|
||
|
||
var script$1 = {
|
||
props: {
|
||
src: String,
|
||
cameraPosition: Object,
|
||
},
|
||
mounted: function mounted() {
|
||
var this$1 = this;
|
||
|
||
this.renderer = this.$refs.renderer;
|
||
|
||
var loader = new GLTFLoader();
|
||
loader.load(this.src, function (gltf) {
|
||
this$1.renderer.three.scene.add(gltf.scene);
|
||
});
|
||
},
|
||
};
|
||
|
||
function render$1(_ctx, _cache, $props, $setup, $data, $options) {
|
||
var _component_Camera = resolveComponent("Camera");
|
||
var _component_Scene = resolveComponent("Scene");
|
||
var _component_Renderer = resolveComponent("Renderer");
|
||
|
||
return (openBlock(), createBlock(_component_Renderer, {
|
||
ref: "renderer",
|
||
"orbit-ctrl": { enableDamping: true, dampingFactor: 0.05 }
|
||
}, {
|
||
default: withCtx(function () { return [
|
||
createVNode(_component_Camera, {
|
||
ref: "camera",
|
||
position: $props.cameraPosition
|
||
}, null, 8 /* PROPS */, ["position"]),
|
||
createVNode(_component_Scene, null, {
|
||
default: withCtx(function () { return [
|
||
renderSlot(_ctx.$slots, "default")
|
||
]; }),
|
||
_: 3
|
||
})
|
||
]; }),
|
||
_: 1
|
||
}, 512 /* NEED_PATCH */))
|
||
}
|
||
|
||
script$1.render = render$1;
|
||
script$1.__file = "src/components/viewers/GLTFViewer.vue";
|
||
|
||
var TROIS = /*#__PURE__*/Object.freeze({
|
||
__proto__: null,
|
||
Renderer: Renderer,
|
||
PerspectiveCamera: PerspectiveCamera,
|
||
Camera: PerspectiveCamera,
|
||
Scene: Scene,
|
||
Texture: Texture,
|
||
CubeTexture: CubeTexture,
|
||
BoxGeometry: BoxGeometry,
|
||
CircleGeometry: CircleGeometry,
|
||
ConeGeometry: ConeGeometry,
|
||
CylinderGeometry: CylinderGeometry,
|
||
DodecahedronGeometry: DodecahedronGeometry,
|
||
IcosahedronGeometry: IcosahedronGeometry,
|
||
LatheGeometry: LatheGeometry,
|
||
OctahedronGeometry: OctahedronGeometry,
|
||
PolyhedronGeometry: PolyhedronGeometry,
|
||
RingGeometry: RingGeometry,
|
||
SphereGeometry: SphereGeometry,
|
||
TetrahedronGeometry: TetrahedronGeometry,
|
||
TorusGeometry: TorusGeometry,
|
||
TorusKnotGeometry: TorusKnotGeometry,
|
||
TubeGeometry: TubeGeometry,
|
||
AmbientLight: AmbientLight,
|
||
DirectionalLight: DirectionalLight,
|
||
PointLight: PointLight,
|
||
SpotLight: SpotLight,
|
||
BasicMaterial: BasicMaterial,
|
||
LambertMaterial: LambertMaterial,
|
||
PhongMaterial: PhongMaterial,
|
||
PhysicalMaterial: PhysicalMaterial,
|
||
StandardMaterial: StandardMaterial,
|
||
SubSurfaceMaterial: SubSurfaceMaterial,
|
||
ToonMaterial: ToonMaterial,
|
||
Map: _Map,
|
||
EnvMap: EnvMap,
|
||
Mesh: Mesh,
|
||
Box: Box,
|
||
Circle: Circle,
|
||
Cone: Cone,
|
||
Cylinder: Cylinder,
|
||
Dodecahedron: Dodecahedron,
|
||
Icosahedron: Icosahedron,
|
||
Lathe: Lathe,
|
||
Octahedron: Octahedron,
|
||
Plane: Plane,
|
||
Polyhedron: Polyhedron,
|
||
Ring: Ring,
|
||
Sphere: Sphere,
|
||
Tetrahedron: Tetrahedron,
|
||
Text: Text,
|
||
Torus: Torus,
|
||
TorusKnot: TorusKnot,
|
||
Tube: Tube,
|
||
Gem: Gem,
|
||
Image: Image,
|
||
InstancedMesh: InstancedMesh,
|
||
MirrorMesh: MirrorMesh,
|
||
RefractionMesh: RefractionMesh,
|
||
Sprite: Sprite,
|
||
EffectComposer: EffectComposer,
|
||
RenderPass: RenderPass,
|
||
BokehPass: BokehPass,
|
||
FilmPass: FilmPass,
|
||
HalftonePass: HalftonePass,
|
||
SAOPass: SAOPass,
|
||
UnrealBloomPass: UnrealBloomPass,
|
||
NoisyImage: NoisyImage,
|
||
NoisyPlane: NoisyPlane,
|
||
NoisySphere: NoisySphere,
|
||
NoisyText: NoisyText,
|
||
Slider1: script,
|
||
GLTFViewer: script$1,
|
||
setFromProp: setFromProp,
|
||
propsValues: propsValues,
|
||
lerp: lerp,
|
||
lerpv3: lerpv3,
|
||
limit: limit
|
||
});
|
||
|
||
var TroisJSVuePlugin = {
|
||
install: function (app) {
|
||
var comps = [
|
||
'Camera',
|
||
'PerspectiveCamera',
|
||
'Renderer',
|
||
'Scene',
|
||
// 'Texture',
|
||
// 'CubeTexture',
|
||
|
||
'BoxGeometry',
|
||
'CircleGeometry',
|
||
'ConeGeometry',
|
||
'CylinderGeometry',
|
||
'DodecahedronGeometry',
|
||
'IcosahedronGeometry',
|
||
'LatheGeometry',
|
||
'OctahedronGeometry',
|
||
'PolyhedronGeometry',
|
||
'RingGeometry',
|
||
'SphereGeometry',
|
||
'TetrahedronGeometry',
|
||
'TorusGeometry',
|
||
'TorusKnotGeometry',
|
||
'TubeGeometry',
|
||
|
||
'AmbientLight',
|
||
'DirectionalLight',
|
||
'PointLight',
|
||
'SpotLight',
|
||
|
||
'BasicMaterial',
|
||
'LambertMaterial',
|
||
'PhongMaterial',
|
||
'PhysicalMaterial',
|
||
'ShaderMaterial',
|
||
'StandardMaterial',
|
||
'SubSurfaceMaterial',
|
||
'ToonMaterial',
|
||
|
||
'Map',
|
||
'EnvMap',
|
||
|
||
'Box',
|
||
'Circle',
|
||
'Cone',
|
||
'Cylinder',
|
||
'Dodecahedron',
|
||
'Icosahedron',
|
||
'Mesh',
|
||
'Lathe',
|
||
'Octahedron',
|
||
'Plane',
|
||
'Polyhedron',
|
||
'Ring',
|
||
'Sphere',
|
||
'Tetrahedron',
|
||
'Text',
|
||
'Torus',
|
||
'TorusKnot',
|
||
'Tube',
|
||
|
||
'Gem',
|
||
'Image',
|
||
'InstancedMesh',
|
||
'MirrorMesh',
|
||
'RefractionMesh',
|
||
'Sprite',
|
||
|
||
'BokehPass',
|
||
'EffectComposer',
|
||
'FilmPass',
|
||
'HalftonePass',
|
||
'RenderPass',
|
||
'SAOPass',
|
||
'UnrealBloomPass',
|
||
|
||
'GLTFViewer' ];
|
||
|
||
comps.forEach(function (comp) {
|
||
app.component(comp, TROIS[comp]);
|
||
});
|
||
},
|
||
};
|
||
|
||
export { AmbientLight, BasicMaterial, BokehPass, Box, BoxGeometry, PerspectiveCamera as Camera, Circle, CircleGeometry, Cone, ConeGeometry, CubeTexture, Cylinder, CylinderGeometry, DirectionalLight, Dodecahedron, DodecahedronGeometry, EffectComposer, EnvMap, FilmPass, script$1 as GLTFViewer, Gem, HalftonePass, Icosahedron, IcosahedronGeometry, Image, InstancedMesh, LambertMaterial, Lathe, LatheGeometry, _Map as Map, Mesh, MirrorMesh, NoisyImage, NoisyPlane, NoisySphere, NoisyText, Octahedron, OctahedronGeometry, PerspectiveCamera, PhongMaterial, PhysicalMaterial, Plane, PointLight, Polyhedron, PolyhedronGeometry, RefractionMesh, RenderPass, Renderer, Ring, RingGeometry, SAOPass, Scene, script as Slider1, Sphere, SphereGeometry, SpotLight, Sprite, StandardMaterial, SubSurfaceMaterial, Tetrahedron, TetrahedronGeometry, Text, Texture, ToonMaterial, Torus, TorusGeometry, TorusKnot, TorusKnotGeometry, TroisJSVuePlugin, Tube, TubeGeometry, UnrealBloomPass, lerp, lerpv3, limit, propsValues, setFromProp };
|
||
//# sourceMappingURL=trois.module.js.map
|