个人中心
gpt4 book ai didi

javascript - 如何在 Three.js 中使用 morphColor 更改动画的面/顶点颜色

转载 作者：行者123 更新时间：2023-12-03 10:05:09 28 4
gpt4 key购买 nike

我尝试在动画期间使用 ThreeJS morphcolor 属性更改对象的面/顶点颜色，但它不起作用。

我的代码是

<!DOCTYPE html>
<html lang="en">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Animation Cube Geometry</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r71/three.js" type="text/javascript"></script>
  <style>
    #canvas {
      border: 1px solid black;
      width: 100%;
    }
  </style>
</head>

<body>
  <input type="button" value="start" onclick="onbtnClick(this);"></input>
  <br>
  <canvas id="canvas"></canvas>
  <script type="text/javascript">
    var size_width = window.innerWidth;
    var size_height = window.innerHeight;
    var player, controls;
    var oldTime, time, delta;
    var isAnimationON = false;

    var scene = new THREE.Scene();

    var camera = new THREE.PerspectiveCamera(75, size_width / size_height, 0.1, 1000);
    camera.position.x = 50;
    camera.position.y = 50;
    camera.position.z = 50;
     //camera.rotation.x = 1.4;
    scene.add(camera);

    var canvasContainer = document.getElementById('canvas');


    var renderer = new THREE.WebGLRenderer({
      canvas: canvasContainer,
      antialias: false,
      preserveDrawingBuffer: true
    });
    renderer.setClearColor(new THREE.Color(0xFFFFFF), 1);
    renderer.setSize(size_width, size_height);

    controls = new THREE.OrbitControls(camera, canvasContainer);
    controls.addEventListener('change', render);


    var m_vertices = [0, 0, 0, 5, 0, 0, 5, 5, 0, 0, 5, 0, 0, 0, 5, 5, 0, 5, 5, 5, 5, 0, 5, 5];
    var m_results = [0, 0, 0, 5, 0, 0, 5, 5, 0, 0, 5, 0, 0, 0, 5, 5, 0, 5, 5, 5, 5, 0, 5, 5];
    var m_faces = [0, 1, 3, 1, 2, 3, 4, 7, 5, 7, 6, 5, 0, 4, 1, 4, 5, 1, 1, 5, 2, 5, 6, 2, 2, 6, 3, 6, 7, 3, 4, 0, 7, 0, 3, 7];
    var m_morphTargets = [{
      "name": "animation_000000",
      "vertices": [0, 0, 0, 5, 0, 0, 5, 5, 0, 0, 5, 0, 0, 0, 5, 5, 0, 5, 5, 5, 5, 0, 5, 5]
    }, {
      "name": "animation_000001",
      "vertices": [0, 0, 0, 10, 0, 0, 10, 10, 0, 0, 10, 0, 0, 0, 10, 10, 0, 10, 10, 10, 10, 0, 10, 10]
    }, {
      "name": "animation_000002",
      "vertices": [0, 0, 0, 15, 0, 0, 15, 15, 0, 0, 15, 0, 0, 0, 15, 15, 0, 15, 15, 15, 15, 0, 15, 15]
    }, {
      "name": "animation_000003",
      "vertices": [0, 0, 0, 25, 0, 0, 25, 25, 0, 0, 25, 0, 0, 0, 25, 25, 0, 25, 25, 25, 25, 0, 25, 25]
    }];


     //Write Vertices
    var vs = [];
    var vc = [];
    for (var x = 0, y = 1, z = 2; z < m_vertices.length; x = x + 3, y = y + 3, z = z + 3) {
      vs.push(new THREE.Vector3(m_vertices[x], m_vertices[y], m_vertices[z]));
      //vc.push(new THREE.Color( 0xff0000 ));
      //vc.push(new THREE.Color( 0x00ff00 ));
      //vc.push(new THREE.Color( 0x0000ff ));			
    }

     //Write Faces
    var fs = [];
    for (var x = 0, y = 1, z = 2; z < m_faces.length; x = x + 3, y = y + 3, z = z + 3) {
      var f = new THREE.Face3(m_faces[x], m_faces[y], m_faces[z]);
      f.color.setHex(Math.random() * 0xffffff);
      f.vertexColors.push(new THREE.Color(0xff0000));
      f.vertexColors.push(new THREE.Color(0x00ff00));
      f.vertexColors.push(new THREE.Color(0x0000ff));
      fs.push(f);
    }

     //Write morphTargets
    var geometry_morphTargets = [];
    var geometry_morphColors = [];
    var i, l, v, vl, dstVertices, srcVertices, scale = 1;
    for (i = 0, l = m_morphTargets.length; i < l; i++) {
      geometry_morphTargets[i] = {};
      geometry_morphTargets[i].name = m_morphTargets[i].name;
      geometry_morphTargets[i].vertices = [];

      dstVertices = geometry_morphTargets[i].vertices;
      srcVertices = m_morphTargets[i].vertices;

      for (v = 0, vl = srcVertices.length; v < vl; v += 3) {
        var vertex = new THREE.Vector3();
        vertex.x = srcVertices[v] * scale;
        vertex.y = srcVertices[v + 1] * scale;
        vertex.z = srcVertices[v + 2] * scale;
        dstVertices.push(vertex);
      }

      geometry_morphColors[i] = {};
      geometry_morphColors[i].name = m_morphTargets[i].name;
      geometry_morphColors[i].colors = [];

      dstColors = geometry_morphColors[i].colors;
      console.log(fs.length);
      var faceLength = fs.length;
      faceLength = 12;
      for (v = 0; v < faceLength; v++) {
        dstColors.push(new THREE.Color(Math.random() * 0xffffff));
        //dstColors.push(new THREE.Color( Math.random() * 0xffffff ));
        //dstColors.push(new THREE.Color( Math.random() * 0xffffff ));
      }




    }

    var geometry = new THREE.Geometry();
    geometry.vertices = vs;
    geometry.faces = fs;
    geometry.colors = vc;
    geometry.morphTargets = geometry_morphTargets;
    geometry.morphColors = geometry_morphColors;
    geometry.colorsNeedUpdate = true;

    geometry.computeFaceNormals();
    geometry.computeVertexNormals();
    geometry.computeBoundingBox();
    geometry.computeBoundingSphere();

    var material = new THREE.MeshBasicMaterial();
    material.morphTargets = true;
    material.morphColors = true;
     //material.color= new THREE.Color( 0xff00ff );
    material.vertexColors = THREE.FaceColors;
     //material.vertexColors=  THREE.VertexColors; 
    material.side = THREE.DoubleSide;



    player = new THREE.MorphAnimMesh(geometry, material);
    player.duration = 1000; // milliseconds
    oldTime = time = new Date().getTime();



    player.name = "Cube";
    scene.add(player);


    function animate() {
      requestAnimationFrame(animate);
      render();
    }

    function render() {
      if (isAnimationON) {
        time = new Date().getTime();
        delta = time - oldTime;
        oldTime = time;
        player.updateAnimation(delta);
      }
      renderer.render(scene, camera);
    }


    function onbtnClick(ctrl) {
      isAnimationON = !isAnimationON;
      if (isAnimationON)
        ctrl.value = "Stop";
      else
        ctrl.value = "Start";

    }

    animate();
  </script>
</body>

</html>

请告诉我如何使用变形颜色更改面/顶点颜色来制作动画

最佳答案

确认:Three.js R74 不支持“morphColors”

“morphColors”似乎不是 Geometry http://threejs.org/docs/index.html#Reference/Core/Geometry 的属性.

在一本关于 Three.js 的书中，我们可能会读到“geometry.morphColors”。然而，几何体来自 Blender。更一般地说，JS 的一个大问题是属性可以动态添加。

关于javascript - 如何在 Three.js 中使用 morphColor 更改动画的面/顶点颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30392211/

28 4 0
文章推荐： javascript - 如何删除查询字符串的某些元素？
文章推荐： .net - 为什么无限递归不会在F#中遇到堆栈溢出异常？
文章推荐： f# - 如何使用 Option.map 和 Option.bind 重写多个空检查？
文章推荐： javascript - Highcharts 中的 x 点错误
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com