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