threejs - morphTargets 可缩小场景中的其他网格体

Question

问题描述

我有一个简单的盒子网格，带有一个morphTarget和一个滑块，可以调整morphTargetInfluence。变形会按预期影响网格体，但它也会缩小场景中的任何其他网格体。

我在下面整理了一个 jsfiddle(从 threejs 变形目标修改而来(示例来演示这个问题。在此演示中，移动滑块会正确变形红色立方体的一角，但会错误地缩小蓝色立方体的大小。立方体网格完全不相关，所以我看不出变形如何影响蓝色立方体。

https://jsfiddle.net/djmm7vv2/

  // JS code from jsfiddle
  var container, stats;
  var camera, scene, renderer;
  var geometry, objects;
  var mesh, mesh2;
  init();
  animate();
  function init() {
    // Create cameras, lights, scene, ect.
    container = document.getElementById( 'container' );
    camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 15000 );
    camera.position.z = 500;
    scene = new THREE.Scene();
    scene.background = new THREE.Color( 0x222222 );
    scene.fog = new THREE.Fog( 0x000000, 1, 15000 );
    var light1 = new THREE.PointLight( 'white', 1);
    light1.position.set( 100, 100, 100 );
    var light2 = new THREE.PointLight( 'white', 1);
    light2.position.set( -100, 100, 100 );
    scene.add( light1 );
    scene.add( light2 );
    // Create first mesh (red cube)
    var geometry = new THREE.BoxGeometry( 100, 100, 100 );
    var material = new THREE.MeshLambertMaterial( { color: 'red', morphTargets: true } );
    // Create 1 blend shape
    for ( var i = 0; i < 1; i ++ ) {
      var vertices = [];
      for ( var v = 0; v < geometry.vertices.length; v ++ ) {
        vertices.push( geometry.vertices[ v ].clone() );
        if ( v === i ) {
          vertices[ vertices.length - 1 ].x *= 2;
          vertices[ vertices.length - 1 ].y *= 2;
          vertices[ vertices.length - 1 ].z *= 2;
        }
      }
      geometry.morphTargets.push( { name: "target" + i, vertices: vertices } );
    }
    mesh = new THREE.Mesh( geometry, material );
    scene.add( mesh );
    // Add second mesh (blue cube)
    var blue = new THREE.MeshLambertMaterial( { color: 'blue', morphTargets: true } );
    var box2 = new THREE.BoxGeometry( 100, 100, 100 );
    mesh2 = new THREE.Mesh( box2, blue );
    scene.add( mesh2 );
    mesh2.position.x = 150
    // Create simple GUI slider to change morph influence on mesh (red cube)
    var params = {
      influence1: 0,
    };
    var gui = new dat.GUI();
    var folder = gui.addFolder( 'Morph Targets' );
    folder.add( params, 'influence1', 0, 1 ).step( 0.01 ).onChange( function( value ) { mesh.morphTargetInfluences[ 0 ] = value; } );
    folder.open();
    // Render it all
    renderer = new THREE.WebGLRenderer();
    renderer.setPixelRatio( window.devicePixelRatio );
    renderer.setSize( window.innerWidth, window.innerHeight );
    container.appendChild( renderer.domElement );
  }
  function animate() {
    requestAnimationFrame( animate );
    render();
  }
  function render() {
    mesh.rotation.y += 0.01;
    renderer.render( scene, camera );
  }

Answer 1

...这是 https://github.com/mrdoob/three.js/issues/12691#issuecomment-345416590 答案。我的蓝色网格材质将变形目标设置为 true。将其更改为错误更正了问题。

var blue = new THREE.MeshLambertMaterial( { color: 'blue', morphTargets: false } );

如果有人知道为什么会这样，我很想知道更多。关于MeshLambertMaterials的文档很少。也许这与在应用变形时防止材质纹理惊慌失措有关？