Question

问题描述

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

我已经将下面的一个jsfiddle（从threejs变形目标修改）示例放在一起演示了这个问题。在此演示中，移动滑块正确地变形红色立方体的角落，但不正确地缩小了蓝色立方体的大小。立方体网格完全不相关，所以我看不到变形如何影响蓝色立方体。

  // 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。我的蓝色网格材质的morphTargets设置为true。将其更改为false可以纠正此问题。

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

如果有人知道为什么会这样，我很想知道更多。关于MeshLambertMaterials的文档很稀疏。也许这与在应用变形时保持材质纹理不会发生冲突有关吗？

threejs - morphTargets缩小场景

1 个答案: