Hello,
I have a seen with a “transparent” object and am running a video as a texture behind it. I’m using mostly the material parameter thickness to get the refraction effect. I realized now, that the zoomed in refraction is quite blocky and would need some aliasing I believe. How would I be able to do it?
The refraction looks like that:
Here are my setup functions (if it’s not enough, I would gladly make an example, but I hope it’s just one small setting):
Creating the video texture from a video in the dom:
setupVideo() {
this.$refs.videoplayer.src = this.video.url
this.$refs.videoplayer.muted = true
this.asyncVideoStart()
this.video.texture = new VideoTexture(this.$refs.videoplayer)
const parameters = {
color: 0xffffff,
map: this.video.texture,
}
const material = new MeshLambertMaterial(parameters)
// add plane in the background
const geometry = new PlaneGeometry(160, 90)
this.video.videoPlane = new Mesh(geometry, material)
this.video.videoPlane.position.set(
this.video.position.x,
this.video.position.y,
this.video.position.z
)
this.scene.add(this.video.videoPlane)
},
Placing the model:
placeModel(model) {
this.logo = model
model.scale.setScalar(this.model.scale)
model.lookAt(this.camera.position)
model.rotateY(-90 * MathUtils.DEG2RAD)
this.material = new MeshPhysicalMaterial({
roughness: this.material.roughness,
transmission: this.material.transmission,
thickness: this.material.thickness,
reflectivity: this.material.reflectivity,
transparent: true,
})
model.children.forEach((element) => {
element.material = this.material
})
this.scene.add(model)
},
Thank you!