three.js 实现一个咖啡效果的着色器

源链接：https://threehub.cn/#/codeMirror?navigation=ThreeJS&classify=application&id=coffeeMug

国内站点预览：http://threehub.cn

github地址: https://github.com/z2586300277/three-cesium-examples

import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
import Stats from 'three/examples/jsm/libs/stats.module.js';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import {GUI} from 'dat.gui'const initializeScene = ({ root, antialias = true } = {}) => {// Create sceneconst scene = new THREE.Scene();// Create cameraconst camera = new THREE.PerspectiveCamera(35,window.innerWidth / window.innerHeight,0.1,1000,);camera.position.z = 110;// Create rendererconst renderer = new THREE.WebGLRenderer({ antialias });renderer.setSize(window.innerWidth, window.innerHeight);// renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));const controls = new OrbitControls(camera, renderer.domElement);controls.enableDamping = true;root.appendChild(renderer.domElement);const onWindowResize = () => {// Adjust camera and renderer on window resizecamera.aspect = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();controls.update();renderer.setSize(window.innerWidth, window.innerHeight);renderer.render(scene, camera);};onWindowResize();window.addEventListener('resize', onWindowResize, false);// Create GUIconst gui = new GUI({ container: root });const stats = new Stats();stats.showPanel(0);root.appendChild(stats.domElement);return {scene,renderer,camera,controls,gui,stats,};
};const init = (root) => {const { scene, renderer, camera, gui, stats, controls } = initializeScene({root,});camera.position.set(12, 6, 12);const gltfLoader = new GLTFLoader();gltfLoader.load(`https://file.threehub.cn/` + 'examples/coffeeMug/coffeeMug.glb', (gltf) => {gltf.scene.getObjectByName('baked').material.map.anisotropy = 8;controls.target.y += 3;scene.add(gltf.scene);});const textureLoader = new THREE.TextureLoader();const perlinTexture = textureLoader.load(`https://file.threehub.cn/` + 'examples/coffeeMug/perlin.png');perlinTexture.wrapS = THREE.RepeatWrapping;perlinTexture.wrapT = THREE.RepeatWrapping;const smokeGeometry = new THREE.PlaneGeometry(1, 1, 16, 64);smokeGeometry.translate(0, 0.5, 0);smokeGeometry.scale(1.5, 6, 1.5);const smokeMaterial = new THREE.ShaderMaterial({// wireframe: true,vertexShader:`#define M_PI 3.1415926535897932384626433832795varying vec2 vUv;uniform float uTime;uniform sampler2D uPerlinTexture;vec2 rotate2D(vec2 value, float angle){float s = sin(angle);float c = cos(angle);mat2 m = mat2(c, s, -s, c);return m * value;}void main(){vUv = uv;vec3 newPosition = position;float angle = texture(uPerlinTexture,vec2(0.5, uv.y * 0.3 + uTime * 0.02)).x * 7.;newPosition.xz = rotate2D(position.xz, angle);vec2 windOffset = vec2(texture(uPerlinTexture, vec2(0.2, uTime * 0.02)).x - 0.5,texture(uPerlinTexture, vec2(0.7, uTime * 0.02)).x - 0.5);newPosition.xz += windOffset * pow(uv.y, 2.) * 8.;gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(newPosition, 1.0);}`,fragmentShader:`varying vec2 vUv;uniform float uTime;uniform sampler2D uPerlinTexture;void main(){vec2 uv = vec2(vUv.x * 0.5, vUv.y * 0.3 - uTime / 15.);float intensity = texture2D(uPerlinTexture, uv).x;intensity = smoothstep(0.4, 1.0, intensity);intensity *= smoothstep(0.0, 0.1, vUv.x);intensity *= smoothstep(1.0, 0.9, vUv.x);intensity *= smoothstep(0.0, 0.1, vUv.y);intensity *= smoothstep(1.0, 0.4, vUv.y);gl_FragColor = vec4(1.0, 0.8, 0.6, intensity);#include <tonemapping_fragment>#include <colorspace_fragment>}`,uniforms: {uTime: { value: 0 },uPerlinTexture: { value: perlinTexture },},transparent: true,depthWrite: false,side: THREE.DoubleSide,});const smoke = new THREE.Mesh(smokeGeometry, smokeMaterial);smoke.position.y = 1.83;scene.add(smoke);const clock = new THREE.Clock();const tick = () => {requestAnimationFrame(tick);stats.begin();controls.update();smokeMaterial.uniforms.uTime.value = clock.getElapsedTime();stats.end();renderer.render(scene, camera);};tick();return renderer;
};init(document.getElementById('box'));/*** 名称: 咖啡* 作者: kavalcio https://github.com/kavalcio
*/