當放大較大的網頁時OrbitControls問題

我在其他內容的較大網頁內嵌入misc_controls_orbit示例800x600框架。當放大較大的網頁時OrbitControls問題

我的問題是當我滾動我的鼠標滾輪時，即使當鼠標位於框架內部或外部時，它也會滾動網頁並放大我的對象。

我現在需要的是，當我的鼠標在框架內部時，它只放大對象，不用滾動所有網頁，當鼠標在框架外時，它只會滾動網頁，而不是縮放對象（像Sketchfab嵌入在這裏：http://www.klaasnienhuis.nl/2012/09/sketchfab-embeds/）

這個問題似乎只與OrbitControls發生，軌跡球是不是，我已經搜索並嘗試在許多方式，但還是沒有結果，誰能幫助我？（SR我的英語不好，希望大家理解，如果你不問PLZ）

這是原來misc_controls_orbit代碼我使用：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>three.js webgl - orbit 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 { 
      color: #000; 
      font-family:Monospace; 
      font-size:13px; 
      text-align:center; 
      font-weight: bold; 

      background-color: #fff; 
      margin: 0px; 
      overflow: hidden; 
     } 

     #info { 
      color:#000; 
      position: absolute; 
      top: 0px; width: 100%; 
      padding: 5px; 

     } 

     a { 
      color: red; 
     } 
    </style> 
</head> 

<body> 
    <div id="container"></div> 
    <div id="info"> 
     <a href="http://threejs.org" target="_blank">three.js</a> - orbit controls example 
    </div> 

    <script src="../build/three.min.js"></script> 

    <script src="js/controls/OrbitControls.js"></script> 

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

    <script> 

     if (! Detector.webgl) Detector.addGetWebGLMessage(); 

     var container, stats; 

     var camera, controls, scene, renderer; 

     var cross; 

     init(); 
     animate(); 

     function init() { 

      camera = new THREE.PerspectiveCamera(60, window.innerWidth/window.innerHeight, 1, 1000); 
      camera.position.z = 500; 

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

      scene = new THREE.Scene(); 
      scene.fog = new THREE.FogExp2(0xcccccc, 0.002); 

      // world 

      var geometry = new THREE.CylinderGeometry(0, 10, 30, 4, 1); 
      var material = new THREE.MeshLambertMaterial({ color:0xffffff, shading: THREE.FlatShading }); 

      for (var i = 0; i < 500; i ++) { 

       var mesh = new THREE.Mesh(geometry, material); 
       mesh.position.x = (Math.random() - 0.5) * 1000; 
       mesh.position.y = (Math.random() - 0.5) * 1000; 
       mesh.position.z = (Math.random() - 0.5) * 1000; 
       mesh.updateMatrix(); 
       mesh.matrixAutoUpdate = false; 
       scene.add(mesh); 

      } 


      // lights 

      light = new THREE.DirectionalLight(0xffffff); 
      light.position.set(1, 1, 1); 
      scene.add(light); 

      light = new THREE.DirectionalLight(0x002288); 
      light.position.set(-1, -1, -1); 
      scene.add(light); 

      light = new THREE.AmbientLight(0x222222); 
      scene.add(light); 


      // renderer 

      renderer = new THREE.WebGLRenderer({ antialias: false }); 
      renderer.setClearColor(scene.fog.color, 1); 
      renderer.setSize(window.innerWidth, window.innerHeight); 

      container = document.getElementById('container'); 
      container.appendChild(renderer.domElement); 

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

      // 

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

     } 

     function onWindowResize() { 

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

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

      render(); 

     } 

     function animate() { 

      requestAnimationFrame(animate); 
      controls.update(); 

     } 

     function render() { 

      renderer.render(scene, camera); 
      stats.update(); 

     } 


    </script> 

</body>

來源

2013-11-04 n2g6t1q1

嘗試'controls = new THREE.OrbitControls（camera，renderer.domElement）;'一定要先定義'renderer'。 – WestLangley

感謝您的回答，我試過了，但它仍然滾動整個網頁甚至鼠標進出框架。 – n2g6t1q1

-1

使用畫布渲染WebGL和添加事件偵聽器

使用這個網站：

<canvas id="webglcanvas" width="800" height="600"></canvas>

與此javascript

function onMouseWheel(evt) { 
    evt.preventDefault(); 

    /* TODO : your zoom */ 
} 

function addMouseHandler(canvas) { 
    canvas.addEventListener('mousemove', onMouseMove, false); 
    canvas.addEventListener('mousedown', onMouseDown, false); 
    canvas.addEventListener('mouseup', onMouseUp, false); 
    canvas.addEventListener('onwheel' in document ? 'wheel' : 'mousewheel', onMouseWheel, false); 
} 

function createScene(canvas) { 
    renderer = new THREE.WebGLRenderer({ 
     canvas: canvas, 
     antialias: true 
    }); 

    // Set the viewport size 
    renderer.setSize(canvas.width, canvas.height); 
} 

$(document).ready(function() { 
    var canvas = document.getElementById("webglcanvas"); 

    // create the scene 
    createScene(canvas); 

    // add mouse handling so we can rotate the scene 
    addMouseHandler(canvas); 

    // Run the run loop 
    run(); 
});

來源

2013-11-04 13:49:57 Troopers

謝謝，我意識到這個問題只發生在目前的OrbitControls，舊的OrbitAndPanControls和TrackballControls不會發生，我應該報告這個像一個錯誤？ – n2g6t1q1

當放大較大的網頁時OrbitControls問題

回答

相關問題