在其three.js所

Question

中心旋轉mergeometry對象，我苦苦尋找其中心旋轉對象的方式。目前我可以旋轉場景，但是當我做旋轉時，物體遠離用戶。我在論壇的同一行查看了一些已經提出的問題，但無法使其發揮作用。下面是HTML的一部分/ three.js所文件我用/連接，你會發現整個工作example.Any的幫助感激

  <script src="../build/three.min.js"></script> 
      <script src="js/controls/TrackballControls.js"></script> 
      <script src="js/libs/stats.min.js"></script> 

      <script> 

        var container, stats; 
        var camera, controls, scene, renderer; 
        var pickingData = [], pickingTexture, pickingScene; 
        var objects = []; 
        var highlightBox; 
        var splitCoord; 
        var avStdProp; 

        var mouse = new THREE.Vector2(); 
        var offset = new THREE.Vector3(10, 10, 10); 

        var geom = new THREE.BoxGeometry(0.005, 0.005, 0.005); 
          geom.colorsNeedUpdate = true; 

        init(); 
        animate(); 

        function init() { 

          container = document.getElementById("container"); 

          camera = new THREE.PerspectiveCamera(70, window.innerWidth/window.innerHeight, 1, 10000); 

          camera.position.x=250; 
          camera.position.y=300; 
          camera.position.z=400; 

          renderer = new THREE.WebGLRenderer({ antialias: true }); 
          controls = new THREE.TrackballControls(camera); 
          controls.rotateSpeed = 1.0; 
          controls.zoomSpeed = 4; 
          controls.panSpeed = 0.8; 
          controls.noZoom = false; 
          controls.noPan = false; 
          controls.staticMoving = true; 
          controls.dynamicDampingFactor = 0.3; 

          scene = new THREE.Scene(); 


          pickingScene = new THREE.Scene(); 
          pickingTexture = new THREE.WebGLRenderTarget(800, 800); 
          pickingTexture.minFilter = THREE.LinearFilter; 
          pickingTexture.generateMipmaps = false; 

          scene.add(new THREE.AmbientLight(0x555555)); 

          var light = new THREE.SpotLight(0xffffff, 1.5); 
          light.position.set(0, 500, 2000); 
          scene.add(light); 

          var geometry = new THREE.Geometry(), 
          pickingGeometry = new THREE.Geometry(), 
          pickingMaterial = new THREE.MeshBasicMaterial({ vertexColors: THREE.VertexColors }), 
          defaultMaterial = new THREE.MeshLambertMaterial({ color: 0xffffff, shading: THREE.FlatShading, vertexColors: THREE.VertexColors }); 

          function applyVertexColors(g, c) { 

            g.faces.forEach(function(f) { 

              var n = (f instanceof THREE.Face3) ? 3 : 4; 

              for(var j = 0; j < n; j ++) { 

                f.vertexColors[ j ] = c; 

              } 

            }); 

          } 

          var color = new THREE.Color(); 

          var matrix = new THREE.Matrix4(); 
          var quaternion = new THREE.Quaternion(); 

          var coord="219_163_189;130_173_179;161_113_231;92_103_176;169_193_180;161_165_187;262_163_166;198_143_155;161_189_155;125_121_107"; 
          splitCoord=coord.split(";"); 
          var coordColr="0_255_255;255_255_0;0_0_255;0_255_0;255_255_0;0_255_0;0_0_255;0_255_255;255_255_0;210_210_45"; 
          var splitCoordColor=coordColr.split(";"); 
          var avgStd="1_0;3_0;0_0;2_0;3_0;2_0;0_0;1_0;3_0;3_0.35"; 
          avStdProp=avgStd.split(";"); 

          for (var i = 0; i < splitCoord.length; i++) { 

            var position = new THREE.Vector3(); 
            var xyz=splitCoord[i].split("_"); 
            var col=splitCoordColor[i].split("_"); 

            position.x = xyz[0]; 
            position.y = xyz[1]; 
            position.z = xyz[2]; 

            var rotation = new THREE.Euler(); 
            rotation.x = 0 
            rotation.y = 0; 
            rotation.z = 0; 

            var scale = new THREE.Vector3(); 
            scale.x = 200 + 100; 
            scale.y = 200 + 100; 
            scale.z = 200 + 100; 

            quaternion.setFromEuler(rotation, false); 
            matrix.compose(position, quaternion, scale); 

            // give the geom's vertices a random color, to be displayed 

            col[0]=col[0]/255; 
            col[1]=col[1]/255; 
            col[2]=col[2]/255; 

            applyVertexColors(geom, color.setRGB(col[0], col[1], col[2])); 

            geometry.merge(geom, matrix); 

            // give the geom's vertices a color corresponding to the "id" 

            applyVertexColors(geom, color.setHex(i)); 

            pickingGeometry.merge(geom, matrix); 

            pickingData[ i ] = { 

              position: position, 
              rotation: rotation, 
              scale: scale 

            }; 

          } 

          var drawnObject = new THREE.Mesh(geometry, defaultMaterial); 
          scene.add(drawnObject); 

          pickingScene.add(new THREE.Mesh(pickingGeometry, pickingMaterial)); 

          highlightBox = new THREE.Mesh(
            new THREE.BoxGeometry(0.009, 0.009, 0.009), 
            new THREE.MeshLambertMaterial({ color: 0xffffff } 
          )); 
          scene.add(highlightBox); 


          //renderer.setClearColor(0xffffff); 
          renderer.setPixelRatio(window.devicePixelRatio); 
          renderer.setSize(800,800); 
          renderer.sortObjects = false; 

          container.appendChild(renderer.domElement); 
          renderer.domElement.addEventListener('mousemove', onMouseMove); 

        } 

        // 

        function onMouseMove(e) { 

          mouse.x = e.clientX; 
          mouse.y = e.clientY; 

        } 

        function pick() { 
        //render the picking scene off-screen 
        renderer.render(pickingScene, camera, pickingTexture); 

        //create buffer for reading single pixel 
        var pixelBuffer = new Uint8Array(4); 

        //read the pixel under the mouse from the texture 
        renderer.readRenderTargetPixels(pickingTexture, mouse.x+window.pageXOffset, pickingTexture.height - (mouse.y+window.pageYOffset), 1, 1, pixelBuffer); 

        //interpret the pixel as an ID 
        var id = (pixelBuffer[0] << 16) | (pixelBuffer[1] << 8) | (pixelBuffer[2]); 
        var data = pickingData[ id ]; 

        if (data) { 

        //move our highlightBox so that it surrounds the picked object 
        if (data.position && data.rotation && data.scale && controls.enabled){ 

        highlightBox.position.copy(data.position); 
        highlightBox.rotation.copy(data.rotation); 
        highlightBox.scale.copy(data.scale).add(offset); 
        highlightBox.visible = true; 
        } 
        } 

        else { 
            highlightBox.visible = false; 
          } 
        } 

        function animate() { 

          requestAnimationFrame(animate); 
          render(); 
          //stats.update(); 

        } 

        function render() { 
          controls.update(); 
          pick(); 
          renderer.render(scene, camera); 
        } 

任何幫助嗎？

Answer 1

您可以將物體的幾何形狀設置爲中心，使網格中心屆時將在位置（0,0,0），它不會「走開」，而旋轉。因爲你想保存geometrys使用在一個不尋常的方式選擇座標到一個數組，圍繞幾何犯規幫助你

geometry.center(); 
var drawnObject = new THREE.Mesh(geometry, defaultMaterial); 
scene.add(drawnObject); 

更新

：

像這樣做。你的問題是「在其中心旋轉合併對象」，但似乎你想圍繞幾何中心旋轉攝像頭。

計算幾何體的邊界範圍，並設置控制目標，以自己的立場：

drawnObject.geometry.computeBoundingSphere(); 
controls.target = drawnObject.geometry.boundingSphere.center;