threejs与gsap打造一个图片布料落地动态效果代码
代码语言:html
所属分类:三维
代码描述:threejs与gsap打造一个图片布料落地动态效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { background: #000; overflow: hidden; display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; } </style> </head> <body translate="no" > <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.121.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.3.5.2.js"></script> <script > // var width = window.innerWidth; // var height = window.innerHeight; var renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(1200, 760); document.body.appendChild(renderer.domElement); // WebGL background color renderer.setClearColor("#000", 1); var matShader; // Setup a camera const camera = new THREE.PerspectiveCamera(50, 1, 1, 40); camera.position.set(0, -1.5, -0.75); camera.lookAt(new THREE.Vector3()); // Setup camera controller // const controls = new THREE.OrbitControls(camera, context.canvas); // Setup your scene const scene = new THREE.Scene(); const texture = new THREE.TextureLoader().load( "//repo.bfw.wiki/bfwrepo/image/5d65ea7d8bc8b.png"); // Setup a geometry const geometry = new THREE.PlaneBufferGeometry(1, 1, 120, 120); const mat = new THREE.MeshPhongMaterial({ map: texture, side: THREE.DoubleSide // shininess: 50, }); mat.onBeforeCompile = shader => { shader.uniforms.time = { value: 3 }; shad.........完整代码请登录后点击上方下载按钮下载查看
网友评论0