marcofugaro / three-projected-material

📽 Three.js Material which lets you do Texture Projection on a 3d Model
https://marcofugaro.github.io/three-projected-material/
MIT License
671 stars 57 forks source link

updating ProjectedMaterial uniforms #32

Closed ionif closed 2 years ago

ionif commented 2 years ago

Hello, I'm trying to modify the projPosition and projectionMatrixCamera in uniforms of a ProjectedMaterial but having problems with it not updating in render.

The code is pretty simple: mesh.material[currentIndex].uniforms.projPosition.x += x; but this doesn't update; and for projectionMatrixCamera, I'm not sure how to set it at all.

Edit: Also tried setting it to a new camera but it gave me an "Invalid camera set to the ProjectedMaterial" error. mesh.material[currentIndex].camera = new THREE.PerspectiveCamera( 45, webgl.width / webgl.height, 1, 1000).position.set (mesh.material[currentIndex].camera.position.x + x, mesh.material[currentIndex].camera.position.y, mesh.material[currentIndex].camera.position.z);

Any ideas or help would be very appreciated!

marcofugaro commented 2 years ago

mesh.material[currentIndex].uniforms.projPosition.x += x;

You're doing this wrong, it's

mesh.material[currentIndex].uniforms.projPosition.value.x += x;

mesh.material[currentIndex].camera = new THREE.PerspectiveCamera( 45, webgl.width / webgl.height, 1, 1000).position.set (mesh.material[currentIndex].camera.position.x + x, mesh.material[currentIndex].camera.position.y, mesh.material[currentIndex].camera.position.z);

You're doing this wrong as well, this can be rewritten as:

const camera = new THREE.PerspectiveCamera( 45, webgl.width / webgl.height, 1, 1000);
camera.position.set(mesh.material[currentIndex].camera.position.x + x, mesh.material[currentIndex].camera.position.y, mesh.material[currentIndex].camera.position.z)
mesh.material[currentIndex].camera = camera
marcofugaro commented 2 years ago

However for what you're trying to do, you just need to project again:

// create the mesh with the projected material
const material = new ProjectedMaterial({
  camera: camera,
  texture,
  color: '#ccc',
  textureScale: 0.8,
})
const mesh = new THREE.Mesh(geometry, material)
webgl.scene.add(mesh)

// project the first time
material.project(mesh)

// move the camera
camera.position.x += 10

// project again from the new camera position
material.project(mesh)
marcofugaro commented 2 years ago

Closing since it's not an issue with the repo.