threejs实现一个图片假三维视觉效果代码-html代码-BFW代码库

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;
    originalImageDetails.aspectRatio = tex.image.height / tex.image.width;

    create3dImage();
    resize();
  });

};

loadImages();


/**
 * Create 3D Image
 */

const create3dImage = () => {

  // Cleanup Geometry for GUI
  if (plane !== null)
  {
    planeGeometry.dispose();
    planeMaterial.dispose();
    scene.remove(plane);
  }

  planeGeometry = new THREE.PlaneBufferGeometry(1, 1);

  planeMaterial = new THREE.ShaderMaterial({
    uniforms: {
      originalTexture: { value: originalImage },
      depthTexture: { value: depthImage },
      uMouse: { value: new THREE.Vector2(0, 0) },
      uThreshold: { value: new THREE.Vector2(settings.xThreshold, settings.yThreshold) } },

    fragmentShader: `
      precision mediump float;
      uniform sampler2D originalTexture; 
      uniform sampler2D depthTexture; 
      uniform vec2 uMouse;
      uniform vec2 uThreshold;

      varying vec2 vUv;

      vec2 mirrored(vec2 v) {
        vec2 m = mod(v,2.);
        return mix(m,2.0 - m, step(1.0 ,m));
      }

      void main() {
        vec4 depthMap = texture2D(depthTexture, mirrored(vUv));
        vec2 fake3d = vec2(vUv.x + (dept.........完整代码请登录后点击上方下载按钮下载查看