Question

我在人脸上工作，嘴应该围绕外部坐标（OpenCV和dlibs）移动。在第一步中，我尝试通过已经有效的代码来控制dat.GUI。但是现在我遇到的问题是，当我通过代码控制时，变形目标不会移动。滑块移动，但脸部没有移动。当我使用鼠标时，它们完美地工作。我请求帮助解决这个问题。

＆＃13;

<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>

＆＃13;

Answer 1

我已经制作了自己的版本，具有以下额外功能：

Gui auto基于内容div调整大小。
改进的滑动控制器作为独特的控制器（幻灯片或数字插入）;
多语言自动支持
自动检查选项中的冲突，然后要求确认或取消。
取消选择选项时自动显示/隐藏其他控制器（仅当选择“自定义颜色”时，显示颜色列表示例） ecc .. ecc ..

这是Video

现在更加舒适且易于使用。

three.js，dat.GUI滑块由代码控制，变形目标不移动

1 个答案: