Три, js Трекбол вращают только один объект

Я новичок в three.js и компьютерной графике. Поэтому я столкнулся с довольно простой проблемой. Я хочу повернуть только кубы и оси статические. Как добиться этого, потому что теперь куб и оси вращаются? Может быть, мне нужно использовать другой тип вращения?Три, js Трекбол вращают только один объект

Мой код:

<html> 
    <body> 
     <script type="text/javascript" src="../libs/three.js"></script> 
     <script type="text/javascript" src="../libs/TrackBallControls.js"></script> 

     <script> 
      var camera, controls, secene, render; 

      init(); 
      animate(); 

      function init() { 
       camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 1000); 
       camera.position.z = 500; 

       var debugaxis = function(axisLength){ 
        //Shorten the vertex function 
        function v(x,y,z){ 
          return new THREE.Vector3(x,y,z); 
        } 

        //Create axis (point1, point2, colour) 
        function createAxis(p1, p2, color){ 
          var line, lineGeometry = new THREE.Geometry(), 
          lineMat = new THREE.LineBasicMaterial({color: color, lineWidth: 1}); 
          lineGeometry.vertices.push(p1, p2); 
          line = new THREE.Line(lineGeometry, lineMat); 
          scene.add(line); 
        } 

        createAxis(v(-axisLength, 0, 0), v(axisLength, 0, 0), 0xFF0000); 
        createAxis(v(0, -axisLength, 0), v(0, axisLength, 0), 0x00FF00); 
        createAxis(v(0, 0, -axisLength), v(0, 0, axisLength), 0x0000FF); 
       }; 

       controls = new THREE.TrackballControls(camera); 
       controls.addEventListener('change', render); 

       scene = new THREE.Scene(); 

       debugaxis(200); 

       var geometry = new THREE.CubeGeometry(100,100,100); 
       var material = new THREE.MeshNormalMaterial({ wireFrame: false, transparent: true, opacity: 0.5}); 

       var mesh = new THREE.Mesh(geometry, material); 
       scene.add(mesh); 

       for (var f = 0, fl = mesh.geometry.faces.length; f < fl; f++) { 
       var face = mesh.geometry.faces[f]; 
       var centroid = new THREE.Vector3(0, 0, 0); 
       centroid.add(mesh.geometry.vertices[face.a]); 
       centroid.add(mesh.geometry.vertices[face.b]); 
       centroid.add(mesh.geometry.vertices[face.c]); 
       centroid.divideScalar(3); 


       var arrow = new THREE.ArrowHelper(
         face.normal, 
         centroid, 
         25, 
         0x3333FF, 
         5, 
         5); 
       mesh.add(arrow); 

      } 

       renderer = new THREE.WebGLRenderer(); 
       renderer.setSize(window.innerWidth, window.innerHeight) 
       document.body.appendChild(renderer.domElement);   
      } 

      function animate(){ 
       requestAnimationFrame(animate); 
       controls.update(); 
      } 

      function render(){ 
       renderer.render(scene, camera); 
      } 
     </script>  
    </body> 
</html>

источник

2015-05-07 Rokas.ma

Оба куба и оси не вращаются, вы перемещаете камеру, и именно поэтому вы получаете это впечатление. – HenryHey

Я решил эту проблему путем вращения только куб. В этом примере я могу вращать куб с помощью мыши. С анимацией трекбола невозможно достичь этого, потому что вы вращаете камеру (как сказал ГенриХей).

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <title>three.js canvas - geometry - cube</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 { 
       font-family: Monospace; 
       background-color: #f0f0f0; 
       margin: 0px; 
       overflow: hidden; 
      } 
     </style> 
    </head> 
    <body> 

     <script src="../libs/three.js"></script> 

     <script src="../libs/Projector.js"></script> 
     <script src="../libs/CanvasRenderer.js"></script> 

     <script src="../libs/stats.js"></script> 

     <script> 

      var container, stats; 

      var camera, scene, renderer; 

      var cube; 

      var targetRotation = 0; 
      var targetRotationOnMouseDown = 0; 

      var mouseX = 0; 
      var mouseXOnMouseDown = 0; 

      var windowHalfX = window.innerWidth/2; 
      var windowHalfY = window.innerHeight/2; 

      init(); 
      animate(); 

      function init() { 

       container = document.createElement('div'); 
       document.body.appendChild(container); 

       var info = document.createElement('div'); 
       info.style.position = 'absolute'; 
       info.style.top = '10px'; 
       info.style.width = '100%'; 
       info.style.textAlign = 'center'; 
       info.innerHTML = 'Drag to spin the cube'; 
       container.appendChild(info); 

       var debugaxis = function(axisLength){ 
        //Shorten the vertex function 
        function v(x,y,z){ 
          return new THREE.Vector3(x,y,z); 
        } 

        //Create axis (point1, point2, colour) 
        function createAxis(p1, p2, color){ 
          var line, lineGeometry = new THREE.Geometry(), 
          lineMat = new THREE.LineBasicMaterial({color: color, lineWidth: 1}); 
          lineGeometry.vertices.push(p1, p2); 
          line = new THREE.Line(lineGeometry, lineMat); 
          scene.add(line); 
        } 

        createAxis(v(-axisLength, 0, 0), v(axisLength, 0, 0), 0xFF0000); 
        createAxis(v(0, -axisLength, 0), v(0, axisLength, 0), 0x00FF00); 
        createAxis(v(0, 0, -axisLength), v(0, 0, axisLength), 0x0000FF); 
       }; 

       camera = new THREE.PerspectiveCamera(70, window.innerWidth/window.innerHeight, 0.1, 1000); 
       camera.position.y = 100; 
       camera.position.z = 500; 
       camera.position.x = 100; 

       scene = new THREE.Scene(); 
       debugaxis(200); 
       // Cube 

       var geometry = new THREE.CubeGeometry(100, 100, 100); 


       var material = new THREE.MeshNormalMaterial({ wireFrame: false, transparent: true, opacity: 0.5 }); 

       cube = new THREE.Mesh(geometry, material); 
       cube.position.y = 0; 
       cube.position.x = 0; 

       for (var f = 0, fl = cube.geometry.faces.length; f < fl; f++) { 
        var face = cube.geometry.faces[f]; 
        var centroid = new THREE.Vector3(0, 0, 0); 
        centroid.add(cube.geometry.vertices[face.a]); 
        centroid.add(cube.geometry.vertices[face.b]); 
        centroid.add(cube.geometry.vertices[face.c]); 
        centroid.divideScalar(3); 


        var arrow = new THREE.ArrowHelper(
          face.normal, 
          centroid, 
          30, 
          0x3333FF, 
          7, 
          7); 
        cube.add(arrow); 
       } 

       scene.add(cube); 

       // Plane 

       var geometry = new THREE.PlaneBufferGeometry(200, 200); 
       geometry.applyMatrix(new THREE.Matrix4().makeRotationX(- Math.PI/2)); 

       var material = new THREE.MeshBasicMaterial({ color: 0xe0e0e0, overdraw: 0.5 }); 

       //plane = new THREE.Mesh(geometry, material); 
       //scene.add(plane); 

       renderer = new THREE.CanvasRenderer(); 
       renderer.setClearColor(0xf0f0f0); 
       //renderer.setPixelRatio(window.devicePixelRatio); 
       renderer.setSize(window.innerWidth, window.innerHeight); 
       container.appendChild(renderer.domElement); 

       stats = new Stats(); 
       stats.domElement.style.position = 'absolute'; 
       stats.domElement.style.top = '0px'; 
       container.appendChild(stats.domElement); 

       document.addEventListener('mousedown', onDocumentMouseDown, false); 
       document.addEventListener('touchstart', onDocumentTouchStart, false); 
       document.addEventListener('touchmove', onDocumentTouchMove, false); 

       // 

       window.addEventListener('resize', onWindowResize, false); 

      } 

      function onWindowResize() { 

       windowHalfX = window.innerWidth/2; 
       windowHalfY = window.innerHeight/2; 

       camera.aspect = window.innerWidth/window.innerHeight; 
       camera.updateProjectionMatrix(); 

       renderer.setSize(window.innerWidth, window.innerHeight); 

      } 

      // 

      function onDocumentMouseDown(event) { 

       event.preventDefault(); 

       document.addEventListener('mousemove', onDocumentMouseMove, false); 
       document.addEventListener('mouseup', onDocumentMouseUp, false); 
       document.addEventListener('mouseout', onDocumentMouseOut, false); 

       mouseXOnMouseDown = event.clientX - windowHalfX; 
       targetRotationOnMouseDown = targetRotation; 

      } 

      function onDocumentMouseMove(event) { 

       mouseX = event.clientX - windowHalfX; 

       targetRotation = targetRotationOnMouseDown + (mouseX - mouseXOnMouseDown) * 0.02; 

      } 

      function onDocumentMouseUp(event) { 

       document.removeEventListener('mousemove', onDocumentMouseMove, false); 
       document.removeEventListener('mouseup', onDocumentMouseUp, false); 
       document.removeEventListener('mouseout', onDocumentMouseOut, false); 

      } 

      function onDocumentMouseOut(event) { 

       document.removeEventListener('mousemove', onDocumentMouseMove, false); 
       document.removeEventListener('mouseup', onDocumentMouseUp, false); 
       document.removeEventListener('mouseout', onDocumentMouseOut, false); 

      } 

      function onDocumentTouchStart(event) { 

       if (event.touches.length === 1) { 

        event.preventDefault(); 

        mouseXOnMouseDown = event.touches[ 0 ].pageX - windowHalfX; 
        targetRotationOnMouseDown = targetRotation; 

       } 

      } 

      function onDocumentTouchMove(event) { 

       if (event.touches.length === 1) { 

        event.preventDefault(); 

        mouseX = event.touches[ 0 ].pageX - windowHalfX; 
        targetRotation = targetRotationOnMouseDown + (mouseX - mouseXOnMouseDown) * 0.05; 

       } 

      } 

      // 

      function animate() { 

       requestAnimationFrame(animate); 

       render(); 
       stats.update(); 

      } 

      function render() { 

       cube.rotation.y += (targetRotation - cube.rotation.y) * 0.05; 
       renderer.render(scene, camera); 

      } 

     </script> 

    </body> 
</html>

источник

2015-05-09 07:47:02

Три, js Трекбол вращают только один объект

ответ

Смежные вопросы