Web3D/trois
1
0
Fork 0
mirror of https://github.com/troisjs/trois.git synced 2024-11-24 04:12:02 +08:00
Code Issues Projects Releases Wiki Activity

wip

Browse Source
This commit is contained in:
Kevin Levron 2021-02-28 01:10:24 +01:00
parent ddf60e3a0d
commit b3e58ff379
4 changed files with 22 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/demos/Demo4.vue
View File

@ -4,7 +4,7 @@
<Scene>
<SpotLight color="#ffffff" :intensity="0.5" :position="{ y: 150, z: 0 }" :cast-shadow="true" :shadow-map-size="{ width: 1024, height: 1024 }" />
<SpotLight color="#ff0000" :intensity="0.5" :position="{ y: -150, z: 0 }" :cast-shadow="true" :shadow-map-size="{ width: 1024, height: 1024 }" />
<InstancedMesh ref="imesh" material-id="material" :count="NUM_INSTANCES" :cast-shadow="true" :receive-shadow="true">
<InstancedMesh ref="imesh" :count="NUM_INSTANCES" :cast-shadow="true" :receive-shadow="true">
<SphereGeometry :radius="5" />
<PhongMaterial />
</InstancedMesh>

1
src/components/index.js
View File

@ -4,5 +4,6 @@ export { default as NoisySphere } from './noisy/NoisySphere.js';
export { default as NoisyText } from './noisy/NoisyText.js';
export { default as Slider1 } from './sliders/Slider1.vue';
export { default as Slider2 } from './sliders/Slider2.vue';
export { default as GLTFViewer } from './viewers/GLTFViewer.vue';

26
src/components/sliders/Slider1.vue
View File

@ -19,10 +19,9 @@ export default {
events: { type: Object, default: () => { return { wheel: true, click: true, keyup: true }; } },
},
setup() {
const { textures, loadTextures } = useTextures();
const loader = useTextures();
return {
textures,
loadTextures,
loader,
progress: 0,
targetProgress: 0,
};
@ -33,13 +32,15 @@ export default {
if (this.images.length < 2) {
console.error('This slider needs at least 2 images.');
} else {
this.loadTextures(this.images, this.init);
this.loader.loadTextures(this.images, this.init);
}
},
unmounted() {
document.removeEventListener('click', this.onClick);
this.loader.dispose();
const domElement = this.three.renderer.domElement;
domElement.removeEventListener('click', this.onClick);
domElement.removeEventListener('wheel', this.onWheel);
document.removeEventListener('keyup', this.onKeyup);
window.removeEventListener('wheel', this.onWheel);
},
methods: {
init() {
@ -56,9 +57,10 @@ export default {
}
);
if (this.events.click) document.addEventListener('click', this.onClick);
const domElement = this.three.renderer.domElement;
if (this.events.click) domElement.addEventListener('click', this.onClick);
if (this.events.wheel) domElement.addEventListener('wheel', this.onWheel);
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);
},
@ -70,14 +72,14 @@ export default {
renderer, screen: this.three.size,
size: 10,
anim: 1,
texture: this.textures[0],
texture: this.loader.textures[0],
});
this.plane2 = new AnimatedPlane({
renderer, screen: this.three.size,
size: 10,
anim: 2,
texture: this.textures[1],
texture: this.loader.textures[1],
});
this.setPlanesProgress(0);
@ -137,8 +139,8 @@ export default {
if ((pdiff > 0 && p1 < p0) || (pdiff < 0 && p0 < p1)) {
const i = Math.floor(progress1) % this.images.length;
const j = (i + 1) % this.images.length;
this.plane1.setTexture(this.textures[i]);
this.plane2.setTexture(this.textures[j]);
this.plane1.setTexture(this.loader.textures[i]);
this.plane2.setTexture(this.loader.textures[j]);
}
this.progress = progress1;

10
src/components/sliders/Slider2.vue
View File

@ -39,9 +39,10 @@ export default {
},
unmounted() {
this.loader.dispose();
document.removeEventListener('click', this.onClick);
const domElement = this.three.renderer.domElement;
domElement.removeEventListener('click', this.onClick);
domElement.removeEventListener('wheel', this.onWheel);
document.removeEventListener('keyup', this.onKeyup);
window.removeEventListener('wheel', this.onWheel);
},
methods: {
init() {
@ -57,9 +58,10 @@ export default {
}
);
if (this.events.click) document.addEventListener('click', this.onClick);
const domElement = this.three.renderer.domElement;
if (this.events.click) domElement.addEventListener('click', this.onClick);
if (this.events.wheel) domElement.addEventListener('wheel', this.onWheel);
if (this.events.keyup) document.addEventListener('keyup', this.onKeyup);
if (this.events.wheel) window.addEventListener('wheel', this.onWheel);
this.three.onBeforeRender(this.animate);
this.three.onAfterResize(this.onResize);
},