基于网格高度Three.js的颜色 [英] Color based on mesh height Three.js

问题描述

我正在Three.js中使用STLLoader()加载STL文件，并将其转换为网格.现在，我想根据网格的高度为其每个立方体上色，如下图所示:按高度截屏颜色.在Three.js中这是否可能，如果可以，最好的方法是什么?实际模型在这里:

I am loading in an STL file with the STLLoader() in Three.js and am transforming it into a mesh. Now, I would like to color each cube of my mesh based on its height, as in the image attached here screenshot-color-by-height. Is this possible within Three.js and if so, what would be the best approach? The actual model is here:

https://casagroupproject.github.io/subpage1.html

推荐答案

只是一个关于如何使用顶点颜色进行制作的概念:

Just a concept of how you can make it with colors of vertices:

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(2, 5, 10);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var controls = new THREE.OrbitControls(camera, renderer.domElement);

var light = new THREE.DirectionalLight(0xffffff, 0.5);
light.position.setScalar(10);
scene.add(light);
scene.add(new THREE.AmbientLight(0xffffff, 0.5));

var planeGeom = new THREE.PlaneBufferGeometry(10, 10, 10, 10);
planeGeom.rotateX(-Math.PI * 0.5);
var yMin = 0;
var yMax = 2;
var colors = [];
for (let i = 0; i < planeGeom.attributes.position.count; i++) {
  let yVal = THREE.Math.randInt(yMin, yMax);
  let yNorm = (yVal - yMin) / (yMax - yMin);
  planeGeom.attributes.position.setY(i, yVal);
  colors.push(yNorm, yNorm, 1);
}
planeGeom.addAttribute('color', new THREE.BufferAttribute(new Float32Array(colors), 3));
planeGeom.computeVertexNormals();

var mesh = new THREE.Mesh(planeGeom, new THREE.MeshStandardMaterial({
  vertexColors: THREE.VertexColors
}));
scene.add(mesh)

render();

function render() {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/92/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

这篇关于基于网格高度Three.js的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！