大佬教程收集整理的这篇文章主要介绍了THREE.js - 将渐变颜色应用于导入的 GLTF 模型，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我一直在尝试将渐变颜色应用于此官方 THREE.Js 教程中使用的 Flower 模型：
https://threejs.org/examples/webgl_instancing_scatter.html
花模型如下所示：
可以从这里下载：https://github.com/mrdoob/three.js/tree/master/examples/models/gltf/Flower)
到目前为止，我已经能够成功地将模型加载到我的项目中，并且我还能够将不同的颜色应用于它的“开花”网格——但只有纯色。
我想应用渐变颜色。
为了说明我的想法，我在 Photoshop 中制作了一个非常快速和肮脏的图像，它可能看起来像：
我尝试使用 vertexcolors 技术执行此操作 - 这是我所知道的唯一技术（我对 THREE.Js 还很陌生） - 到目前为止还没有运气（下面的代码。）
在这一点上，我的一部分人想知道这是否可能与导入的 GLTF 模型有关 - 或者它是否是一种失败的原因。
希望得到一些意见/帮助。
这是我的代码 - 分为两部分：第一部分用于纯色 - 有效，第二部分是我尝试应用渐变颜色 - 无效：
// NOTE: I stored the already imported GLTF model in a new Mesh called “blossomMesh”
// 1. Create a new Group to which I’ll add the stem and Blossom:
var newFlower = new THREE.Group();
// 2. CLONE the MESH of the imported 3D model:
let newBlossomMesh = blossomMesh.clone();
// 3. CLONE it's GEOMETRY:
var newBlossomGeometry = blossomMesh.geometry.clone();
// 4. CLONE it's MATERIAL:
var newBlossomMaterial = blossomMesh.material.clone();
// 5. MAKE a NEW color:
let newBlossomcolor = new THREE.color(generaterandomcolor());
newBlossomMaterial.color = newBlossomcolor;
newBlossomMesh.material = newBlossomMaterial;
newFlower.add(newBlossomMesh);
newFlower.add(newstemMesh);
scene.add(newFlower);
所以以上适用于纯色。
这是我尝试使用渐变色的方法：
// THE BLOSSOM:
// 1. CLONE the MESH of the imported 3D model:
let newBlossomMesh = blossomMesh.clone();
// 2. This time use a BufferGeometry to CLONE the GEOMETRY:
var newBlossomGeometry = new THREE.bufferGeometry();
newBlossomGeometry = blossomMesh.geometry.clone();
var blossomVertexpositionsArray = newBlossomGeometry.attributes.position;
newBlossomGeometry = newBlossomGeometry.toNonIndexed();
blossomVertexpositionsArray = newBlossomGeometry.attributes.position;
// Make a colors Array:
var blossomcolorsArray = [];
const newBlossomcolor = new THREE.color();
for(var i = 0,l = blossomVertexpositionsArray.count; i < l; i ++) {
newBlossomcolor.setHSL(Math.random() * 0.2 + 0.05,0.95,0.799);
blossomcolorsArray.push(newBlossomcolor.r,newBlossomcolor.g,newBlossomcolor.b);
}
// Now “splash” the "blossomcolorsArray" all over the Blossom:
newBlossomGeometry.setAttribute("color",new THREE.float32BufferAttribute(blossomcolorsArray,3));
newBlossomMesh.material = newBlossomMaterial;
newFlower.add(newBlossomMesh);
newFlower.add(newstemMesh);
scene.add(newFlower);
我从中得到的是黑色的花朵。基本上看起来它只是没有任何颜色，所以我看到的黑色更像是没有颜色，而不是实际的颜色“黑色”。
================================================ =
更新：
好的，它可以工作 - 但只能“单独”，并且只能“本地”。
这就是我的意思：我想制作的不仅仅是一个花，而是 100 个。我不想在 GLTFLoader 的回调函数中这样做，因为我需要将各种其他逻辑应用于我的 100 个花对象（例如给它们 (x,y,z) 坐标，给它们userData 值，将它们添加到数组等。因此，我创建了一个单独的函数来处理所有这些工作，我的策略是：
Flower.glb 加载 GLTFLoader 模型，一旦加载成功......您的代码运行良好，但我正在尝试使其适用于多个 Blossom 对象，并在 GLTFLoader 函数的回调之外执行此操作。正是后面这部分让我发疯。
这是我的代码：
（目前的结果是，我的 500 朵花中的每一朵都得到完全相同的灰色 - 没有渐变；它们只是不起作用。）
var blossomMesh;
var stemMesh;
function load3DFlowerModel() {
loader.load("./Flower.glb",function(theFlower) {
flowerScene = theFlower.scene;
// Assign values to my global "blossomMesh" and "stemMesh" variables:
blossomMesh = flowerScene.children[0]; // Blossom
stemMesh = flowerScene.children[1]; // stem
// Now call my external function:
makeFlowers();
});
}
function makeFlowers() {
for(var flowerCount = 0; flowerCount < @R_495_10586@L_FLOWERS; flowerCount ++) {
var newFlowerGroup = new THREE.Group();
// I. THE BLOSSOM:
// 1. First,make a new copy of the incoming global "blossomMesh" object:
var newBlossomMesh = blossomMesh.clone();
// 2. Next,make a new copy of the MATERIAL of the incoming global "blossomMesh" object:
var newBlossomMaterial = blossomMesh.material.clone();
// 3. Now make a new copy of the GEOMETRY of the incoming global "blossomMesh" object:
var newBlossomGeometry = blossomMesh.geometry.clone();
// 4. Get its vertices:
let blossomVertexpositionsArray = newBlossomGeometry.attributes.position;
// 5. Make colors for it:
var blossomcolorsArray = [];
var newBlossomcolor = new THREE.color();
for(var i = 0; i < blossomVertexpositionsArray.count; i ++) {
newBlossomcolor.setHSL(Math.random() * 0.2 + 0.05,0.799);
blossomcolorsArray.push(newBlossomcolor.r,newBlossomcolor.b);
}
// 6. Finally SPLASH the "blossomcolorsArray" all over the Blossom's Geometry:
newBlossomGeometry.setAttribute("color",new THREE.float32BufferAttribute(blossomcolorsArray,3));
// And set "vertexcolors" to true:
newBlossomMaterial.vertexcolors = true;
// II. THE stem
let newstemMesh = stemMesh.clone();
newstemMesh.castShadow = true;
newTulipGroup.add(newstemMesh);
newTulipGroup.add(newBlossomMesh);
newTulipGroup.name = "Tulip#" + tulipCount;
// etc.
所以我得到了一整束花，但它们都有相同的灰色花朵。它总是灰色的...
按预期工作。为场景添加灯光，为材质设置 vertexColors: true。
body{
overflow: hidden;
margin: 0;
}<script type="module">
import * as THREE from "https://threejs.org/build/three.module.js";
import {OrbitControls} from "https://threejs.org/examples/jsm/controls/OrbitControls.js";
import {GLTFLoader} from "https://threejs.org/examples/jsm/loaders/GLTFLoader.js";
let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(60,innerWidth / innerHeight,0.1,10);
camera.position.set(0,5,5);
let renderer = new THREE.WebGLRenderer();
renderer.setSize(innerWidth,innerHeight);
document.body.appendChild(renderer.domElement);
let controls = new OrbitControls(camera,renderer.domElement);
let light = new THREE.DirectionalLight(0xffffff,1);
light.position.setScalar(10);
scene.add(light);
scene.add(new THREE.AmbientLight(0xffffff,0.5));
scene.add(new THREE.GridHelper());
let loader = new GLTFLoader();
loader.load("https://threejs.org/examples/models/gltf/Flower/Flower.glb",gltf => {
let model = gltf.scene;
model.scale.setScalar(10);
//console.log(model);
let g = model.children[0].geometry;
let m = model.children[0].material;
let p = g.attributes.position;
let c = new THREE.Color();
let colors = [];
for(let i = 0; i < p.count; i++){
c.set(Math.random() < 0.5 ? 0xff00ff : 0xffff00);
colors.push(c.r,c.g,c.b);
}
g.setAttribute("color",new THREE.Float32BufferAttribute(colors,3));
m.vertexColors = true;
scene.add(model);
});
renderer.setAnimationLoop( _ => {
renderer.render(scene,camera);
});
</script>以上是大佬教程为你收集整理的THREE.js - 将渐变颜色应用于导入的 GLTF 模型全部内容，希望文章能够帮你解决THREE.js - 将渐变颜色应用于导入的 GLTF 模型所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。