THREE.js - 将渐变颜色应用于导入的 GLTF 模型

如何解决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 模型，一旦加载成功......
调用我的另一个函数，该函数在循环中创建此 Flower 的 500 个新实例，每个实例都有自己独特的花朵渐变颜色、x、y、z、坐标等。

您的代码运行良好，但我正在尝试使其适用于多个 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 < TOTAL_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>