threeJS-结合AI将图片生成3D场景

leiapix：将静态图片生成3D图片,下载深度图

第一步

搭建three的场景

// 引入three.js
import * as THREE from 'three';

// 创建场景
const scene = new THREE.Scene(); 

//创建相机 --- 遵循近大远小原则
const camera = new THREE.PerspectiveCamera(
 90
 window.innerWidth / window.innerHeight,
 0.1,
 1000
); 
camera.position.set(0,0,5.5)

// 创建渲染器
const renderer = new THREE.WebGLRenderer({ antialias: true }); 
renderer.setSize( window.innerWidth, window.innerHeight ); 
document.body.appendChild( renderer.domElement );

第二步

加载图片

// 创建纹理加载器
let textureLoader = new THREE.TextureLoader()
// 加载纹理
let texture = textureLoader.load("静态图片路径")
let depthTexture = textureLoader.load("深度图片路径")

第三步

创建几何体、材质、网格 并添加到场景中

// 创建几何体
const geometry = new THREE.PlaneGeometry(图片的宽(两位数)，图片的高(两位数));

// 创建鼠标对象
const mouse = new THREE.Vector2()

// 创建着色器材质
const material = new THREE.ShaderMaterial({ 
	uniforms: { 
		uTime: { value: 0 },
		uTexture: { value: texture },
		uDepthTexture: { value: depthTexture },
		uMouse: { value: mouse }
	},
	// 顶点着色器
	vertexShader:`
		varying vec2 vUv;
		void main() {
			vUv = uv;
			gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0)
		}
	`,
	// 片源着色器
	fragmentShader:`
		uniform sampler2D uTexture
		uniform sampler2D uDepthTexture
		uniform float uTime
		uniform vec2 uMouse // 鼠标坐标
		varying vec2 vUv // 图片坐标
		void main() {
			vec4 color = texture2D(uTexture, vUv) // 采集像素颜色, 基本上也就是这张图
			vec4 depth = texture2D(uDepthTexture, vUv)
			float depthValue = depth.r
			float x = vUv.x + (uMose.x + sin(uTime)) * 0.01 * depthValue
			float y = vUv.y + (uMose.y + cons(uTime)) * 0.01 * depthValue
			vec4 newColor = texture2D(uTexture, vec2(x,y))
			gl_FragColor = vec4(vUv, 0.0, 1.0)
		}
	`
})

// 创建网格
const plane = new THREE.Mesh(geometry,material)

// 将网格添加到3场景中
scene.add(cube)

第四步

// 渲染函数
const animate = () => {
  material.uniforms.uMouse.value = mouse
  material.uniforms.uTime.value = performance.now() / 1000
  requestAnimationFrame(animate)
  // 渲染
  renderer.render(scene, camera)
}

animate()
// 监听窗口变化
window.addEventListener("mousemove", (event) => {
  mouse.x = (window.clientX / window.innerWidth) * 2 -1
  mouse.y = -(window.clientY / window.innerHeight) * 2 +1
  // 更新相机投影矩阵
  camera.updateProjectionMatrix()
})