时间戳

首页 > 解决方案 > 使用three.js的视差效果

javascript - 使用three.js的视差效果

问题描述

我想使用深度图从 2D 图像构建视差效果，类似于this或 this但使用three.js。

问题是，我应该从哪里开始？仅使用PlaneGeometry带有 a 的 a 可以MeshStandardMaterial渲染我的 2D 图像而没有视差遮挡。添加depth mapasdisplacementMap属性后，我可以看到某种位移，但它的分辨率非常低。（也许，因为置换贴图不是用来做这个的？）

我的第一次尝试

import * as THREE from "three";
import image from "./Resources/Images/image.jpg";
import depth from "./Resources/Images/depth.jpg";

[...]

const geometry = new THREE.PlaneGeometry(200, 200, 10, 10);
const material = new THREE.MeshStandardMaterial();

const spriteMap = new THREE.TextureLoader().load(image);
const depthMap = new THREE.TextureLoader().load(depth);
material.map = spriteMap;
material.displacementMap = depthMap;
material.displacementScale = 20;

const plane = new THREE.Mesh(geometry, material);

或者我应该使用一个Sprite物体，它的脸总是指向相机？但是如何应用depth map到它呢？

我已经用我目前所拥有的东西建立了一个代码沙盒。它还包含event listener用于鼠标移动并在移动时按原样旋转相机work in progress。

更新 1

所以我想通了，我似乎需要一个定制ShaderMaterial。在查看了pixjs 的实现后，我发现它是基于自定义着色器的。

由于我可以访问源代码，我需要做的就是重写它以与threejs兼容。但最大的问题是：如何

如果有人能指出我正确的方向，那就太棒了，谢谢！

标签： javascriptthree.jsglsl

解决方案

推荐阅读