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