Question

我希望基于另一个立方体的移动移动一个立方体，TransformControls仅通过Matrix4（）方法附加到该立方体。

到目前为止的尝试未能移动跟随者立方体。我不确定为什么追随者似乎没有接受指挥立方体的世界坐标。

 <!DOCTYPE html>
    <html lang="en">
    	<head>
    		<title>three.js webgl - transform controls</title>
    		<meta charset="utf-8">
    		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    		<style>
    			body {
    				margin: 0px;
    				background-color: #000000;
    				color: #fff;
    				font-family:Monospace;
    				text-align: center;
    				font-size: 15px;
    				line-height: 30px;
    				overflow: hidden;
    			}
    			#info {
    				position: absolute;
    				top: 0px; width: 100%;
    				padding: 15px;
    				z-index:100;
    			}
    		</style>
    	</head>
    	<body>
    
    		<div id="info">
    		"W" translate | "E" rotate | "R" scale | "+" increase size | "-" decrease size<br />
    		Press "Q" to toggle world/local space, keep "Ctrl" down to snap to grid
    		</div>
    
    		<script src="build/three.js"></script>
    		<script src="js/controls/TransformControls.js"></script>
    		<script src="js/controls/OrbitControls.js"></script>
    
    		<script>
    			var camera, scene, renderer, control, mesh, mesh1;
    			init();
    			animate();
    			//render();
    			//update();
    			function init() {
    				renderer = new THREE.WebGLRenderer();
    				renderer.setPixelRatio( window.devicePixelRatio );
    				renderer.setSize( window.innerWidth, window.innerHeight );
    				renderer.sortObjects = false;
    				document.body.appendChild( renderer.domElement );
    				//
    				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 3000 );
    				camera.position.set( 1000, 500, 1000 );
    				camera.lookAt( new THREE.Vector3( 0, 200, 0 ) );
    				scene = new THREE.Scene();
    				scene.add( new THREE.GridHelper( 1000, 10 ) );
    				var light = new THREE.DirectionalLight( 0xffffff, 2 );
    				light.position.set( 1, 1, 1 );
    				scene.add( light );
    				//var texture = new THREE.TextureLoader().load( 'textures/crate.gif', render );
    				//texture.mapping = THREE.UVMapping;
    				//texture.anisotropy = renderer.getMaxAnisotropy();
    				var geometry = new THREE.BoxGeometry( 200, 200, 200 );
    				var material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } );
    				control = new THREE.TransformControls( camera, renderer.domElement );
    				control.addEventListener( 'change', render );
    				mesh = new THREE.Mesh( geometry, material );
    				scene.add( mesh );
    				control.attach( mesh );
    				scene.add( control );
    				
    				var followerCube = new THREE.BoxGeometry( 200, 200, 200 );
    				var material1 = new THREE.MeshBasicMaterial( { color: 0xff9909 } );
    				mesh1 = new THREE.Mesh( followerCube, mesh1 );
    
    				scene.updateMatrixWorld();
    				mesh1.matrixAutoUpdate = false;
    				
    				var relativeMeshOffset = new THREE.Vector3( 100, 100, 200 );
    				
    				var offsetPosition = relativeMeshOffset.applyMatrix4( mesh.matrixWorld );
    				
    				mesh1.position.x = offsetPosition.x;
    				mesh1.position.y = offsetPosition.y;
    				mesh1.position.z = offsetPosition.z;
    				
    				scene.add( mesh1 );
    				console.log(mesh1.position);
    				
    				var orbitControl = new THREE.OrbitControls( camera, renderer.domElement );
    				orbitControl.addEventListener( 'change', render );
    				
    				window.addEventListener( 'resize', onWindowResize, false );
    				window.addEventListener( 'keydown', function ( event ) {
    					switch ( event.keyCode ) {
    						case 81: // Q
    							control.setSpace( control.space === "local" ? "world" : "local" );
    							break;
    						case 17: // Ctrl
    							control.setTranslationSnap( 100 );
    							control.setRotationSnap( THREE.Math.degToRad( 15 ) );
    							break;
    						case 87: // W
    							control.setMode( "translate" );
    							break;
    						case 69: // E
    							control.setMode( "rotate" );
    							break;
    						case 82: // R
    							control.setMode( "scale" );
    							break;
    						case 187:
    						case 107: // +, =, num+
    							control.setSize( control.size + 0.1 );
    							break;
    						case 189:
    						case 109: // -, _, num-
    							control.setSize( Math.max( control.size - 0.1, 0.1 ) );
    							break;
    					}
    				});
    				window.addEventListener( 'keyup', function ( event ) {
    					switch ( event.keyCode ) {
    						case 17: // Ctrl
    							control.setTranslationSnap( null );
    							control.setRotationSnap( null );
    							break;
    					}
    				});
    			}
    			function onWindowResize() {
    				camera.aspect = window.innerWidth / window.innerHeight;
    				camera.updateProjectionMatrix();
    				renderer.setSize( window.innerWidth, window.innerHeight );
    				render();
    			}
    			
    			function animate() {
    			
    				requestAnimationFrame( animate );
    				render();
    				update();
    			
    			}
    			
    			function update() {
    			
    				var relativeMeshOffset = new THREE.Vector3( 100, 100, 200 );
    				
    				var offsetPosition = relativeMeshOffset.applyMatrix4( mesh.matrixWorld );
    				
    				mesh1.position.x = offsetPosition.x;
    				mesh1.position.y = offsetPosition.y;
    				mesh1.position.z = offsetPosition.z;
    				
    			}
    			
    			function render() {
    				control.update();
    				renderer.render( scene, camera );
    			}
    		</script>
    
    	</body>
    </html>

Answer 1

因为你在第75行设置了mesh1.matrixAutoUpdate = false;。如果你这样做，mesh1就不会改变它的位置。

用另一个的矩阵4（）变换一个对象（THREE.js r84）

1 个答案: