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;
 .........完整代码请登录后点击上方下载按钮下载查看