0
我希望仅基于另一个通过Matrix4（）方法附加到TransformControls的立方体的移动来移动立方体。将另一个对象与另一个对象（THREE.js r84）的matrix4（）进行转换
到目前为止的尝试未能转移跟随者立方体。 我不知道为什么追随者似乎没有采取指挥立方体的世界坐标。
<!DOCTYPE html>
<html lang="en">
\t <head>
\t \t <title>three.js webgl - transform controls</title>
\t \t <meta charset="utf-8">
\t \t <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
\t \t <style>
\t \t \t body {
\t \t \t \t margin: 0px;
\t \t \t \t background-color: #000000;
\t \t \t \t color: #fff;
\t \t \t \t font-family:Monospace;
\t \t \t \t text-align: center;
\t \t \t \t font-size: 15px;
\t \t \t \t line-height: 30px;
\t \t \t \t overflow: hidden;
\t \t \t }
\t \t \t #info {
\t \t \t \t position: absolute;
\t \t \t \t top: 0px; width: 100%;
\t \t \t \t padding: 15px;
\t \t \t \t z-index:100;
\t \t \t }
\t \t </style>
\t </head>
\t <body>
\t \t <div id="info">
\t \t "W" translate | "E" rotate | "R" scale | "+" increase size | "-" decrease size<br />
\t \t Press "Q" to toggle world/local space, keep "Ctrl" down to snap to grid
\t \t </div>
\t \t <script src="build/three.js"></script>
\t \t <script src="js/controls/TransformControls.js"></script>
\t \t <script src="js/controls/OrbitControls.js"></script>
\t \t <script>
\t \t \t var camera, scene, renderer, control, mesh, mesh1;
\t \t \t init();
\t \t \t animate();
\t \t \t //render();
\t \t \t //update();
\t \t \t function init() {
\t \t \t \t renderer = new THREE.WebGLRenderer();
\t \t \t \t renderer.setPixelRatio(window.devicePixelRatio);
\t \t \t \t renderer.setSize(window.innerWidth, window.innerHeight);
\t \t \t \t renderer.sortObjects = false;
\t \t \t \t document.body.appendChild(renderer.domElement);
\t \t \t \t //
\t \t \t \t camera = new THREE.PerspectiveCamera(70, window.innerWidth/window.innerHeight, 1, 3000);
\t \t \t \t camera.position.set(1000, 500, 1000);
\t \t \t \t camera.lookAt(new THREE.Vector3(0, 200, 0));
\t \t \t \t scene = new THREE.Scene();
\t \t \t \t scene.add(new THREE.GridHelper(1000, 10));
\t \t \t \t var light = new THREE.DirectionalLight(0xffffff, 2);
\t \t \t \t light.position.set(1, 1, 1);
\t \t \t \t scene.add(light);
\t \t \t \t //var texture = new THREE.TextureLoader().load('textures/crate.gif', render);
\t \t \t \t //texture.mapping = THREE.UVMapping;
\t \t \t \t //texture.anisotropy = renderer.getMaxAnisotropy();
\t \t \t \t var geometry = new THREE.BoxGeometry(200, 200, 200);
\t \t \t \t var material = new THREE.MeshBasicMaterial({ color: 0xff0000, wireframe: true });
\t \t \t \t control = new THREE.TransformControls(camera, renderer.domElement);
\t \t \t \t control.addEventListener('change', render);
\t \t \t \t mesh = new THREE.Mesh(geometry, material);
\t \t \t \t scene.add(mesh);
\t \t \t \t control.attach(mesh);
\t \t \t \t scene.add(control);
\t \t \t \t
\t \t \t \t var followerCube = new THREE.BoxGeometry(200, 200, 200);
\t \t \t \t var material1 = new THREE.MeshBasicMaterial({ color: 0xff9909 });
\t \t \t \t mesh1 = new THREE.Mesh(followerCube, mesh1);
\t \t \t \t scene.updateMatrixWorld();
\t \t \t \t mesh1.matrixAutoUpdate = false;
\t \t \t \t
\t \t \t \t var relativeMeshOffset = new THREE.Vector3(100, 100, 200);
\t \t \t \t
\t \t \t \t var offsetPosition = relativeMeshOffset.applyMatrix4(mesh.matrixWorld);
\t \t \t \t
\t \t \t \t mesh1.position.x = offsetPosition.x;
\t \t \t \t mesh1.position.y = offsetPosition.y;
\t \t \t \t mesh1.position.z = offsetPosition.z;
\t \t \t \t
\t \t \t \t scene.add(mesh1);
\t \t \t \t console.log(mesh1.position);
\t \t \t \t
\t \t \t \t var orbitControl = new THREE.OrbitControls(camera, renderer.domElement);
\t \t \t \t orbitControl.addEventListener('change', render);
\t \t \t \t
\t \t \t \t window.addEventListener('resize', onWindowResize, false);
\t \t \t \t window.addEventListener('keydown', function (event) {
\t \t \t \t \t switch (event.keyCode) {
\t \t \t \t \t \t case 81: // Q
\t \t \t \t \t \t \t control.setSpace(control.space === "local" ? "world" : "local");
\t \t \t \t \t \t \t break;
\t \t \t \t \t \t case 17: // Ctrl
\t \t \t \t \t \t \t control.setTranslationSnap(100);
\t \t \t \t \t \t \t control.setRotationSnap(THREE.Math.degToRad(15));
\t \t \t \t \t \t \t break;
\t \t \t \t \t \t case 87: // W
\t \t \t \t \t \t \t control.setMode("translate");
\t \t \t \t \t \t \t break;
\t \t \t \t \t \t case 69: // E
\t \t \t \t \t \t \t control.setMode("rotate");
\t \t \t \t \t \t \t break;
\t \t \t \t \t \t case 82: // R
\t \t \t \t \t \t \t control.setMode("scale");
\t \t \t \t \t \t \t break;
\t \t \t \t \t \t case 187:
\t \t \t \t \t \t case 107: // +, =, num+
\t \t \t \t \t \t \t control.setSize(control.size + 0.1);
\t \t \t \t \t \t \t break;
\t \t \t \t \t \t case 189:
\t \t \t \t \t \t case 109: // -, _, num-
\t \t \t \t \t \t \t control.setSize(Math.max(control.size - 0.1, 0.1));
\t \t \t \t \t \t \t break;
\t \t \t \t \t }
\t \t \t \t });
\t \t \t \t window.addEventListener('keyup', function (event) {
\t \t \t \t \t switch (event.keyCode) {
\t \t \t \t \t \t case 17: // Ctrl
\t \t \t \t \t \t \t control.setTranslationSnap(null);
\t \t \t \t \t \t \t control.setRotationSnap(null);
\t \t \t \t \t \t \t break;
\t \t \t \t \t }
\t \t \t \t });
\t \t \t }
\t \t \t function onWindowResize() {
\t \t \t \t camera.aspect = window.innerWidth/window.innerHeight;
\t \t \t \t camera.updateProjectionMatrix();
\t \t \t \t renderer.setSize(window.innerWidth, window.innerHeight);
\t \t \t \t render();
\t \t \t }
\t \t \t
\t \t \t function animate() {
\t \t \t
\t \t \t \t requestAnimationFrame(animate);
\t \t \t \t render();
\t \t \t \t update();
\t \t \t
\t \t \t }
\t \t \t
\t \t \t function update() {
\t \t \t
\t \t \t \t var relativeMeshOffset = new THREE.Vector3(100, 100, 200);
\t \t \t \t
\t \t \t \t var offsetPosition = relativeMeshOffset.applyMatrix4(mesh.matrixWorld);
\t \t \t \t
\t \t \t \t mesh1.position.x = offsetPosition.x;
\t \t \t \t mesh1.position.y = offsetPosition.y;
\t \t \t \t mesh1.position.z = offsetPosition.z;
\t \t \t \t
\t \t \t }
\t \t \t
\t \t \t function render() {
\t \t \t \t control.update();
\t \t \t \t renderer.render(scene, camera);
\t \t \t }
\t \t </script>
\t </body>
</html>
谢谢！它现在适用于规则的几何图形，但在一个有用的情况下，当跟随相同的代码图案时，我无法获得裁剪平面。是否有额外的步骤，例如首先更新不同的对象，然后更新裁剪平面？ – MurServ
@MurServ对不起，我不知道'飞机剪辑'究竟是什么意思，你能解释得更清楚吗？或者，你遇到这个问题？ –
谢谢，我的意思是我无法根据与附加的THREE.transformControls的盒子网格位置来移动其中的一个。然而，我能够改变这个例子来做到这一点：https：//threejs.org/examples/#webgl_clipping_advanced ...谁也同样坚持，并希望得到裁剪平面来跟随基于这个例子的网格应该改变“var transform = new THREE.matrix4（）”然后“transform.copy（想要的对象）”并删除“bouncy”时间标量。 – MurServ