threejs实现一个图片假三维视觉效果代码
代码语言:html
所属分类:视觉差异
代码描述:threejs实现一个图片假三维视觉效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { margin: 0; padding: 0; } html, body { overflow: hidden; background-color: black; } .webgl { position: fixed; top: 0; left: 0; outline: none; } </style> </head> <body > <canvas class="webgl"></canvas> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.128.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/dat.gui-min.js"></script> <script > /** * Variables */ // Main Settings const settings = { xThreshold: 20, yThreshold: 35, originalImagePath: '//repo.bfw.wiki/bfwrepo/images/three/dog-photo.jpg', depthImagePath: '//repo.bfw.wiki/bfwrepo/images/three/dog-depth-map.jpg' }; // Sizes const sizes = { width: window.innerWidth, height: window.innerHeight }; // Image Details let originalImage = null; let depthImage = null; const originalImageDetails = { width: 0, height: 0, aspectRatio: 0 }; // Geometries and Material let planeGeometry = null; let planeMaterial = null; let plane = null; // Cursor Settings const cursor = { x: 0, y: 0, lerpX: 0, lerpY: 0 }; /** * Base */ // Debug const gui = new dat.GUI(); // Canvas const canvas = document.querySelector('canvas.webgl'); // Scene const scene = new THREE.Scene(); /** * Camera */ const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height, 0.1, 100); camera.position.x = 0; camera.position.y = 0; camera.position.z = 0.7; scene.add(camera); let fovY = camera.position.z * camera.getFilmHeight() / camera.getFocalLength(); /** * Images */ const textureLoader = new THREE.TextureLoader(); const loadImages = () => { if (originalImage !== null || depthImage !== null) { originalImage.dispose(); depthImage.dispose(); } depthImage = textureLoader.load(settings.depthImagePath); originalImage = textureLoader.load(settings.originalImagePath, function (tex) { originalImageDetails.width = tex.image.width; originalImageDetails.height = tex.image.height; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0