opencv - three.js, dat.GUI slider 由代码控制，变形目标不移动

Question

我在一张人脸上工作，嘴巴应该围绕外部坐标(OpenCV 和 dlibs)移动。在第一步中，我尝试通过代码控制 dat.GUI，这已经可以工作了。但现在我遇到了问题，当我通过代码控制时，变形目标不会移动。 slider 移动，但面部不动。当我使用鼠标时，它们工作得很好。我寻求帮助解决这个问题。

<script>		
		
 // Laden der 3DScene
	var scene = new THREE.Scene();

 // Laden der Kamear Perspektive
	var camera = new THREE.PerspectiveCamera(15, window.innerWidth/window.innerHeight, 1, 10000);
		camera.position.z = 17;
		camera.position.y = 3;

 // Laden des Renderers
	var renderer = new THREE.WebGLRenderer({ alpha: false });
		renderer.setClearColor( 0x000000 );
		renderer.setPixelRatio( window.devicePixelRatio );
		renderer.setSize(window.innerWidth, window.innerHeight);
		document.body.appendChild(renderer.domElement);
		
 // Laden des Orbitcontrollers
	var controls = new THREE.OrbitControls( camera, renderer.domElement );

 // Laden der Lichter (Beleuchtung)
	var ambientLight = new THREE.AmbientLight(0x111111);
		  scene.add(ambientLight);

	var light = new THREE.PointLight( 0xFFFFDD );
		  light.position.set( -15, 10, 15 );
		  scene.add(light);

 // Laden des Json Modells 
	var loader = new THREE.JSONLoader();					
		loader.load( "./three/models/JSON/test/mkh_shapes.json", function (geometry) {	
	var material = new THREE.MeshLambertMaterial({morphTargets: true});
	var mesh = new THREE.Mesh(geometry, material);				
		  mesh.scale.set(1.2,1.2,1.2);   	    //Modellgrösse die angezeigt wird     	
		  mesh.position.x = 0;				//Position (x = nach rechts+ links-)  
		  mesh.position.y = -19;				//Position (y = nach oben +, unten-)
		  mesh.position.z = 0;				//Position (z = nach vorne +, hinten-)
	
		  scene.add(mesh);
	
 //dat.Gui	
	///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////					
	    
		 
	var shape = {						  
		  mouth_open: 0.0,  //Anfangsposition 0.0																		
	};
								
	var gui = new dat.GUI();
	var folder = gui.addFolder( 'Morph Targets' );			
			folder.add( shape, 'mouth_open', 0, 1 ).step( 0.01 ).name('mouth_open').listen().onChange ( function( a ) {       mesh.morphTargetInfluences[ 40 ] = a;} );
			folder.open();
			
	var updateGui = function() {
		for (var i in folder.__controllers) {
			folder.__controllers[i].updateDisplay();
		}
	}
		
	var time = Date.now() * 0.003;																																	
		shape.mouth_open = 0.50 //* Math.sin( 0.5 * time ) + 0.3;			
			
		//scene.add(shape);
		
	///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
});	
	
function animate() {
		render();
		requestAnimationFrame( animate );
}

function render() {		
		renderer.clear();
		renderer.render( scene, camera );
}
	
animate();
	
</script>

Answer 1

我已经制作了我自己的带有额外功能的版本，例如:

• Gui 根据内容 div 自动调整大小。
• 改进的 slidecontroller 作为独特的 Controller (幻灯片或数字插入)；
• 多语言自动支持
• 自动检查选项是否有冲突，然后要求确认或取消。
• 取消选中选项时自动显示/隐藏其他 Controller (示例仅在“选择自定义颜色”时显示颜色列表)ecc..ecc..

这里是 Video

现在更舒适、更易于使用。