javascript - 在three.js平面中将png转换为高度
问题描述
我正在使用平面几何图形在三个.js https://i.imgur.com/HOwXADD.png中可视化此图像,并且我想为与此图像https://i.imgur.com/ 对应的平面添加高度 UBmdWMc.png (白色区域的高度更大)
我怎样才能做到这一点?
这是我当前简单的three.js代码:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Vis</title>
<style>
body {
margin: 0;
height: 100vh;
}
canvas {
display: block;
}
</style>
</head>
<body>
<script src="lib/three.js"></script>
<script src="lib/OrbitControls.js"></script>
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.z = 10;
var renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var geometry = new THREE.PlaneGeometry(15, 12);
var loader = new THREE.TextureLoader();
var material = new THREE.MeshLambertMaterial({
map: loader.load('https://i.imgur.com/hHZICLa.jpg', render),
side: THREE.DoubleSide
});
var mesh = new THREE.Mesh(geometry, material);
mesh.position.set(0, 0, 0);
scene.add(mesh);
var light = new THREE.DirectionalLight(0xffffff);
light.position.set(1, 1, 1);
scene.add(light);
var controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.addEventListener('change', render); // call this only in static scenes (i.e., if there is no animation loop)
controls.minDistance = 5;
controls.maxDistance = 50;
controls.minPolarAngle = 0.05;
controls.maxPolarAngle = Math.PI / 1.01;
controls.minAzimuthAngle = -Math.PI / 2.02;
controls.maxAzimuthAngle = Math.PI / 2.02;
function render() {
renderer.render(scene, camera);
}
</script>
我想我应该添加片段,geometry
但当前图像和高度图的尺寸为 1500 x 1200,并创建一个new THREE.PlaneGeometry(15, 12, 1500, 1200);
需要大量内存的平面并导致浏览器崩溃。
我想我应该将高度图读取为像素并在这样的循环中应用它们的值
for (var i = 0; i < i < mesh.geometry.vertices.length; i++) {
mesh.geometry.vertices[i].z = pixelvalue;
}
但我不知道如何将像素值加载为高度以及如何使其对应于图像的完全相同的像素或顶点。
感谢您阅读
解决方案
您可以使用displacementMap 在顶点着色器中执行这种类型的顶点置换。您只需切换到MeshPhongMaterial
即可使用这种纹理。
材料属性displacementScale和displacementBias允许您根据您的要求调整效果。
推荐阅读
- pandas - Pandas:删除重复出现的连续值
- google-cloud-pubsub - 通过 Spring Cloud Stream 发布到 Pub/Sub 的持久性保证
- java - 如果 null 可以分配给任何引用类型,为什么它不是 Java 中的对象?
- html - 有没有办法在 div 中对齐两个输入标签(具有不同类型)
- mysql - 恢复数据库卡住
- android - 使用 ACTION_CREATE_DOCUMENT 创建 CSV 文件
- kubernetes - 本地 Kubernetes 集群上的 Istio Ingress Gateway 无法路由流量(Linux 容器)
- html - 在标题元素上设置“pointer-events: none;”是一个可访问性问题吗?
- hyperlink - 尝试使用 RMarkdown 超链接脚注中的单词
- python - 拆分并转移到相应的列