Question

我试图重现像lolita.persona.co这样的效果有人知道在哪里可以找到类似的东西/准备三个吗？

Answer 1

作为一个选项，您可以将效果编辑器与后处理着色器一起使用。

我不想/不能为你完成所有的工作，所以这里只是一个粗略的概念，对鼠标移动做出反应：

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 0, 10);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x777777);
document.body.appendChild(renderer.domElement);

var textureLoader = new THREE.TextureLoader();
textureLoader.setCrossOrigin("anonymous");
var texture = textureLoader.load("https://threejs.org/examples/textures/UV_Grid_Sm.jpg");

scene.background = texture;

// postprocessing
var composer = new THREE.EffectComposer(renderer);
composer.addPass(new THREE.RenderPass(scene, camera));
var effect = new THREE.ShaderPass(THREE.WaveShader);
effect.uniforms['time'].value = 0;
effect.renderToScreen = true;
composer.addPass(effect);

var mouse = new THREE.Vector2();
window.addEventListener("mousemove", function(event) {
  mouse.x = event.clientX / window.innerWidth;
  mouse.y = event.clientY / window.innerHeight;
  effect.uniforms["mouse"].value.copy(mouse);
}, false);

var clock = new THREE.Clock();
var time = 0;

render();

function render() {
  requestAnimationFrame(render);
  time += clock.getDelta();
  effect.uniforms["time"].value = time;
  composer.render();
}

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/shaders/CopyShader.js"></script>
<script>
  THREE.WaveShader = {

    uniforms: {

      "tDiffuse": {
        value: null
      },
      "time": {
        value: 0
      },
      "mouse": {
        value: new THREE.Vector2(.5, .5)
      }

    },

    vertexShader: `

    varying vec2 vUv;

		void main() {

			vUv = uv;
			gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );

		}`,

    fragmentShader: `
    
		uniform sampler2D tDiffuse;
    uniform float time;
    uniform vec2 mouse;

		varying vec2 vUv;

		void main() {
      vec2 uv = vUv;

      //https://www.shadertoy.com/view/ldXGz7
	    uv.x += (sin((uv.y + (time * 0.07)) * 15.0) * 0.0029) + (sin((uv.y + (time * 0.1)) * 15.0) * 0.002) * (1. + 19. * mouse.x);
      uv.y += (cos((uv.y + (time * 0.04)) * 45.0) * 0.0019) +	(cos((uv.y + (time * 0.1)) * 10.0) * 0.002) * (1. + 19. * mouse.y);
      
      uv = fract(uv * vec2(2., 1.));
      gl_FragColor = texture2D(tDiffuse, uv);

		}`

  };
</script>
<script src="https://threejs.org/examples/js/postprocessing/EffectComposer.js"></script>
<script src="https://threejs.org/examples/js/postprocessing/RenderPass.js"></script>
<script src="https://threejs.org/examples/js/postprocessing/ShaderPass.js"></script>

您可以编写自己的片段着色器以达到您想要的效果。

Three.js如何实现反射效果

1 个答案: