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

various fixes

Browse Source
This commit is contained in:
Kevin Levron 2021-04-22 00:32:46 +02:00
parent af18934b67
commit 6f64c8b859
14 changed files with 80 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/meshes/Gem.js
View File

@ -8,7 +8,7 @@ import {
RGBFormat,
WebGLCubeRenderTarget,
} from 'three';
import Mesh from '../../meshes/Mesh.js';
import Mesh from '../../meshes/Mesh';
import { bindProp } from '../../tools';
export default defineComponent({

2
src/components/meshes/MirrorMesh.js
View File

@ -5,7 +5,7 @@ import {
RGBFormat,
WebGLCubeRenderTarget,
} from 'three';
import Mesh from '../../meshes/Mesh.js';
import Mesh from '../../meshes/Mesh';
export default defineComponent({
extends: Mesh,

2
src/components/meshes/RefractionMesh.js
View File

@ -6,7 +6,7 @@ import {
RGBFormat,
WebGLCubeRenderTarget,
} from 'three';
import Mesh from '../../meshes/Mesh.js';
import Mesh from '../../meshes/Mesh';
import { bindProp } from '../../tools';
export default defineComponent({

64
src/components/noisy/NoisyImage.js
View File

@ -1,7 +1,7 @@
import { defineComponent, watch } from 'vue';
import { DoubleSide, MeshBasicMaterial, PlaneGeometry } from 'three';
import Image from '../../meshes/Image.js';
import snoise2 from '../../glsl/snoise2.glsl.js';
import { defineComponent, watch } from 'vue'
import { DoubleSide, MeshBasicMaterial, PlaneGeometry } from 'three'
import Image from '../../meshes/Image'
import snoise2 from '../../glsl/snoise2.glsl.js'
export default defineComponent({
extends: Image,
@ -15,43 +15,41 @@ export default defineComponent({
},
setup(props) {
// uniforms
const uTime = { value: 0 };
const uNoiseCoef = { value: props.noiseCoef };
watch(() => props.noiseCoef, (value) => { uNoiseCoef.value = value; });
const uZCoef = { value: props.zCoef };
watch(() => props.zCoef, (value) => { uZCoef.value = value; });
const uDispCoef = { value: props.dispCoef };
watch(() => props.dispCoef, (value) => { uDispCoef.value = value; });
const uTime = { value: 0 }
const uNoiseCoef = { value: props.noiseCoef }
watch(() => props.noiseCoef, (value) => { uNoiseCoef.value = value })
const uZCoef = { value: props.zCoef }
watch(() => props.zCoef, (value) => { uZCoef.value = value })
const uDispCoef = { value: props.dispCoef }
watch(() => props.dispCoef, (value) => { uDispCoef.value = value })
return {
uTime, uNoiseCoef, uZCoef, uDispCoef,
};
}
},
mounted() {
this.startTime = Date.now();
this.renderer.onBeforeRender(this.updateTime);
created() {
this.tweakMaterial()
this.startTime = Date.now()
this.renderer.onBeforeRender(this.updateTime)
},
unmounted() {
this.renderer.offBeforeRender(this.updateTime);
this.renderer.offBeforeRender(this.updateTime)
},
methods: {
createGeometry() {
this.geometry = new PlaneGeometry(1, 1, this.widthSegments, this.heightSegments);
},
createMaterial() {
this.material = new MeshBasicMaterial({ side: DoubleSide, map: this.loadTexture() });
tweakMaterial() {
this.material.onBeforeCompile = (shader) => {
shader.uniforms.uTime = this.uTime;
shader.uniforms.uNoiseCoef = this.uNoiseCoef;
shader.uniforms.uZCoef = this.uZCoef;
shader.uniforms.uDispCoef = this.uDispCoef;
shader.uniforms.uTime = this.uTime
shader.uniforms.uNoiseCoef = this.uNoiseCoef
shader.uniforms.uZCoef = this.uZCoef
shader.uniforms.uDispCoef = this.uDispCoef
shader.vertexShader = `
uniform float uTime;
uniform float uNoiseCoef;
uniform float uZCoef;
varying float vNoise;
${snoise2}
` + shader.vertexShader;
` + shader.vertexShader
shader.vertexShader = shader.vertexShader.replace(
'#include <begin_vertex>',
@ -62,12 +60,12 @@ export default defineComponent({
vec3 transformed = vec3(position);
transformed.z += vNoise * uZCoef;
`
);
)
shader.fragmentShader = `
uniform float uDispCoef;
varying float vNoise;
` + shader.fragmentShader;
` + shader.fragmentShader
shader.fragmentShader = shader.fragmentShader.replace(
'#include <map_fragment>',
@ -77,13 +75,13 @@ export default defineComponent({
texelColor.r = dispTexel.r;
diffuseColor = texelColor;
`
);
this.materialShader = shader;
};
)
this.materialShader = shader
}
},
updateTime() {
this.uTime.value = (Date.now() - this.startTime) * this.timeCoef;
this.uTime.value = (Date.now() - this.startTime) * this.timeCoef
},
},
__hmrId: 'NoisyImage',
});
})

2
src/components/noisy/NoisyPlane.js
View File

@ -1,7 +1,7 @@
import { defineComponent, watch } from 'vue';
import { ObjectSpaceNormalMap, ShaderMaterial, Vector2, WebGLRenderTarget } from 'three';
import { Pass } from 'three/examples/jsm/postprocessing/Pass.js';
import Plane from '../../meshes/Plane.js';
import Plane from '../../meshes/Plane';
import snoise3 from '../../glsl/snoise3.glsl.js';
export default defineComponent({

2
src/components/noisy/NoisySphere.js
View File

@ -1,5 +1,5 @@
import { defineComponent, watch } from 'vue';
import Sphere from '../../meshes/Sphere.js';
import Sphere from '../../meshes/Sphere';
import snoise4 from '../../glsl/snoise4.glsl.js';
export default defineComponent({

2
src/components/noisy/NoisyText.js
View File

@ -1,5 +1,5 @@
import { defineComponent, watch } from 'vue';
import Text from '../../meshes/Text.js';
import Text from '../../meshes/Text';
import snoise2 from '../../glsl/snoise2.glsl.js';
export default defineComponent({

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

@ -12,8 +12,8 @@ import { Object3D } from 'three';
import { gsap, Power4 } from 'gsap';
import Camera from '../../core/PerspectiveCamera';
import Renderer from '../../core/Renderer.js';
import Scene from '../../core/Scene.js';
import Renderer from '../../core/Renderer';
import Scene from '../../core/Scene';
import { lerp } from '../../tools';
import AnimatedPlane from './AnimatedPlane.js';

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

@ -11,12 +11,12 @@ import { Vector2 } from 'three';
import { gsap, Power4 } from 'gsap';
import OrthographicCamera from '../../core/OrthographicCamera';
import Renderer from '../../core/Renderer.js';
import Scene from '../../core/Scene.js';
import Renderer from '../../core/Renderer';
import Scene from '../../core/Scene';
import { lerp, lerpv2 } from '../../tools';
import ZoomBlurImage from './ZoomBlurImage.js';
import useTextures from '../../use/useTextures.js';
import useTextures from '../../use/useTextures';
export default defineComponent({
components: { OrthographicCamera, Renderer, Scene },
@ -86,7 +86,7 @@ export default defineComponent({
scene.add(this.image2.mesh);
},
animate() {
const { positionN } = this.renderer.pointer;
const { positionN } = this.renderer.three.pointer;
this.center.copy(positionN).divideScalar(2).addScalar(0.5);
lerpv2(this.image1.uCenter.value, this.center, 0.1);
lerpv2(this.image2.uCenter.value, this.center, 0.1);

2
src/core/OrthographicCamera.ts
View File

@ -19,7 +19,7 @@ export default defineComponent({
setup(props) {
const camera = new OrthographicCamera(props.left, props.right, props.top, props.bottom, props.near, props.far)
bindProp(this, 'position', camera)
bindProp(props, 'position', camera)
const watchProps = ['left', 'right', 'top', 'bottom', 'near', 'far', 'zoom']
watchProps.forEach(p => {

42
src/effects/TiltShiftPass.ts
View File

@ -1,6 +1,5 @@
import { defineComponent, watch } from 'vue'
import { ShaderMaterial, Vector2 } from 'three'
import { Pass } from 'three/examples/jsm/postprocessing/Pass'
import { Vector2 } from 'three'
import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass.js'
import EffectPass from './EffectPass'
import TiltShift from '../shaders/TiltShift'
@ -14,27 +13,35 @@ const props = {
}
interface TiltShiftPassSetupInterface {
uniforms: {[name: string]: { value: any }}
pass1?: Pass
pass2?: Pass
uniforms1: {[name: string]: { value: any }}
uniforms2: {[name: string]: { value: any }}
pass1?: ShaderPass
pass2?: ShaderPass
}
export default defineComponent({
extends: EffectPass,
props,
setup(): TiltShiftPassSetupInterface {
const uniforms = {}
return { uniforms }
return { uniforms1: {}, uniforms2: {} }
},
created() {
const shaderMat = new ShaderMaterial(TiltShift)
this.uniforms = shaderMat.uniforms
this.pass1 = new ShaderPass(TiltShift)
this.pass2 = new ShaderPass(TiltShift)
this.pass1 = new ShaderPass(shaderMat)
this.pass2 = new ShaderPass(shaderMat)
const uniforms1 = this.uniforms1 = this.pass1.uniforms
const uniforms2 = this.uniforms2 = this.pass2.uniforms
// shared uniforms
uniforms2.blurRadius = uniforms1.blurRadius
uniforms2.gradientRadius = uniforms1.gradientRadius
uniforms2.start = uniforms1.start
uniforms2.end = uniforms1.end
uniforms2.texSize = uniforms1.texSize
bindProp(this, 'blurRadius', uniforms1.blurRadius, 'value')
bindProp(this, 'gradientRadius', uniforms1.gradientRadius, 'value')
bindProp(this, 'blurRadius', this.uniforms.blurRadius, 'value')
bindProp(this, 'gradientRadius', this.uniforms.gradientRadius, 'value')
this.updateFocusLine();
['start', 'end'].forEach(p => {
@ -43,7 +50,7 @@ export default defineComponent({
})
this.pass1.setSize = (width: number, height: number) => {
this.uniforms.texSize.value.set(width, height)
uniforms1.texSize.value.set(width, height)
}
this.initEffectPass(this.pass1)
@ -54,10 +61,11 @@ export default defineComponent({
},
methods: {
updateFocusLine() {
this.uniforms.start.value.copy(this.start)
this.uniforms.end.value.copy(this.end)
this.uniforms1.start.value.copy(this.start)
this.uniforms1.end.value.copy(this.end)
const dv = new Vector2().copy(this.end as Vector2).sub(this.start as Vector2).normalize()
this.uniforms.delta.value.copy(dv)
this.uniforms1.delta.value.copy(dv)
this.uniforms2.delta.value.set(-dv.y, dv.x)
},
},
__hmrId: 'TiltShiftPass',

6
src/geometries/TubeGeometry.ts
View File

@ -50,7 +50,7 @@ export function updateTubeGeometryPoints(tube: TubeGeometry, points: Vector3[]):
const nAttribute = tube.getAttribute('normal')
const normal = new Vector3()
let P = new Vector3()
const P = new Vector3()
for (let i = 0; i < tubularSegments; i++) {
updateSegment(i)
@ -61,7 +61,7 @@ export function updateTubeGeometryPoints(tube: TubeGeometry, points: Vector3[]):
tube.attributes.normal.needsUpdate = true
function updateSegment(i: number) {
P = curve.getPointAt(i / tubularSegments, P)
curve.getPointAt(i / tubularSegments, P)
const N = frames.normals[i]
const B = frames.binormals[i]
for (let j = 0; j <= radialSegments; j++) {
@ -72,7 +72,7 @@ export function updateTubeGeometryPoints(tube: TubeGeometry, points: Vector3[]):
normal.y = (cos * N.y + sin * B.y)
normal.z = (cos * N.z + sin * B.z)
normal.normalize()
const index = (i * (radialSegments + 1) + j) * 3
const index = (i * (radialSegments + 1) + j)
nAttribute.setXYZ(index, normal.x, normal.y, normal.z)
pAttribute.setXYZ(index, P.x + radius * normal.x, P.y + radius * normal.y, P.z + radius * normal.z)
}

7
src/meshes/Image.ts
View File

@ -15,13 +15,15 @@ export default defineComponent({
src: { type: String, required: true },
width: Number,
height: Number,
widthSegments: { type: Number, default: 1 },
heightSegments: { type: Number, default: 1 },
keepSize: Boolean,
},
setup(): ImageSetupInterface {
return object3DSetup()
},
created() {
this.geometry = new PlaneGeometry(1, 1, 1, 1)
this.geometry = new PlaneGeometry(1, 1, this.widthSegments, this.heightSegments)
this.material = new MeshBasicMaterial({ side: DoubleSide, map: this.loadTexture() })
watch(() => this.src, this.refreshTexture);
@ -34,6 +36,9 @@ export default defineComponent({
this.resize()
if (this.keepSize) this.renderer.onResize(this.resize)
},
unmounted() {
this.renderer.offResize(this.resize)
},
methods: {
loadTexture() {
return new TextureLoader().load(this.src, this.onLoaded)

3
src/meshes/Mesh.ts
View File

@ -93,8 +93,9 @@ const Mesh = defineComponent({
if (this.mesh) {
this.renderer.three?.removeIntersectObject(this.mesh)
}
// for predefined mesh (geometry is not unmounted)
// for predefined mesh (geometry/material are not unmounted)
if (this.geometry) this.geometry.dispose()
if (this.material) this.material.dispose()
},
__hmrId: 'Mesh',
})