Scrolling Problem

with jQuery solution

by jmchen

HTML

<h1 style="text-align:center"> 
Picking with Embedded 3JS, variable width 
</h1>

<hr/>
<div id="container">
    <canvas id="cnvs"></canvas>
</div>
<hr style="clear:both">
<p>add a line</p>
<p>add a line</p>
<p>add a line</p>
<p>add a line</p>
<p>add a line</p>
<p>add a line</p>
<p>add a line</p>
<p>add a line</p>
<p>add a line</p>
<p>add a line</p>
<p>add a line</p>
<p>add a line</p>
<p>add a line</p>
<script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.min.js"></script>
<script src="https://dl.dropboxusercontent.com/u/3587259/Code/Threejs/OrbitControls.js">
    
</script>

CSS

#container {
    width:60vw;
    height: 60vw;
    float:left;
    background-color:pink;
    margin: 10px;
}

JavaScript

var scene, renderer, camera;
var controls;
var plane, cyl;
var mouse = new THREE.Vector2();
var theCanvasFrame;

init();
animate();

///////////////////////////////////////////////////////////////////////////
$( '#cnvs' ).bind( 'mousewheel DOMMouseScroll', function ( e ) {
    var e0 = e.originalEvent,
        delta = e0.wheelDelta || -e0.detail;
    
    this.scrollTop += ( delta < 0 ? 1 : -1 ) * 30;
    e.preventDefault();
});
///////////////////////////////////////////////////////////////////////////

function init() {
    var theCanvas = document.getElementById("cnvs");
    theCanvasFrame = document.getElementById("container");

    renderer = new THREE.WebGLRenderer({
        canvas: theCanvas,
        antialias: true
    });
    var ww = theCanvasFrame.clientWidth;
    var hh = theCanvasFrame.clientHeight;
    renderer.setSize(ww, hh);
    renderer.setClearColor(0x555555);

    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera(45, ww / hh, 1, 10000);
    camera.position.x = 0;
    camera.position.y = 80;
    camera.position.z = 200;
    camera.lookAt(new THREE.Vector3(0, 0, 0));

    var cyl_geom = new THREE.CylinderGeometry(10, 10, 6, 32);
    var cyl_mat = new THREE.MeshLambertMaterial({
        color: 0xff2211
    });
    cyl = new THREE.Mesh(cyl_geom, cyl_mat);
    cyl.position.set(-20, 0, 20);
    scene.add(cyl);

    // add control here (after the camera is defined)
    controls = new THREE.OrbitControls(camera, renderer.domElement);

    var gridXZ = new THREE.GridHelper(100, 20);
    gridXZ.setColors(new THREE.Color(0xff0000), new THREE.Color(0xffffff));
    gridXZ.position.set(0, 0, 0);
    scene.add(gridXZ);

    // build an invisible plane, overlapping the grid
    plane = new THREE.Mesh(
    new THREE.PlaneBufferGeometry(200, 200, 8, 8),
    new THREE.MeshBasicMaterial({
        color: 0xff0000,
        opacity: 0.25,
        transparent: true
    }));
    plane.rotation.x = -Math.PI / 2;
    plane.visible = false; //...