Scrolling Problem

by 蔡 育曄

HTML

<h1 style="font-size:2em; text-align:center; margin:15px"> 
Hw3 Helper
</h1>

<hr>

<div id="container">
<!--canvas id='mycanvas'></canvas-->
</div>

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur quam lectus, porta eget tincidunt eget, auctor eget lorem. Cras sed est eu tellus consequat semper a ac dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas feugiat
  luctus augue sed pellentesque. In laoreet tincidunt lacinia. In pellentesque egestas enim ut auctor. Mauris et urna at est varius faucibus quis at sapien. Nam hendrerit velit at bibendum fringilla. Sed ut dignissim dui, eget sagittis est. Pellentesque
  varius nibh ut nunc condimentum viverra. Fusce erat felis, laoreet vitae ex sit amet, venenatis lobortis nibh. Suspendisse lectus massa, malesuada vel ullamcorper sed, iaculis eu dolor. Donec accumsan diam non dolor aliquet, a cursus arcu hendrerit.
  Quisque accumsan sed quam at dictum.
</p>
<br>
<p>
  Nullam finibus felis et varius mollis. Donec sapien tellus, lacinia sit amet orci non, posuere laoreet nunc. Vivamus gravida turpis est, vulputate sagittis leo facilisis in. Sed aliquet ornare gravida. Nullam eget velit et lacus lacinia eleifend quis
  in metus. Vestibulum nec congue libero. Duis eu quam eu sem fermentum dapibus et vel ex. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
</p>
<hr>
<p>
  Vivamus et leo non turpis varius blandit. Aliquam sed metus ac nisl elementum fermentum et suscipit mauris. Curabitur nulla justo, aliquam at arcu nec, ullamcorper rutrum massa. Nam malesuada massa lorem, laoreet consectetur tortor fringilla quis. Ut
  in lacinia diam, ut elementum libero. Quisque tempor libero eget felis malesuada malesuada. In efficitur, ipsum id lacinia fermentum, tortor enim rhoncus ipsum, ac lobortis magna neque et neque. Class aptent taciti sociosqu ad litora torquent per conubia
  nostra, per inceptos himenaeos. Cras est dolor, condimentum tincidunt...

CSS

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

p {
  margin: 10px;
  text-align: justify;
}

JavaScript

var scene, renderer, camera;
var mouse = new THREE.Vector2();
var raycaster = new THREE.Raycaster();
var pickables = [];

init();
animate();

function init() {

  renderer = new THREE.WebGLRenderer({
    antialias: true
  });
  var ww = $('#container').innerWidth();
  var hh = $('#container').innerHeight();
  renderer.setSize(ww, hh);
  renderer.setClearColor(0x555555);
  $('#container').append(renderer.domElement);

  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;

	let controls = new THREE.OrbitControls(camera, renderer.domElement);

  var gridXZ = new THREE.GridHelper(200, 20, 'red', 'white');
  scene.add(gridXZ);

  window.addEventListener('resize', onWindowResize, false);
  //$('#container').on ("mousemove", onDocumentMouseMove);
  window.addEventListener('mousedown', onDocumentMouseDown, false);
 	//////////////////////////////////////
  let wall = new THREE.Mesh (new THREE.BoxGeometry (60,40,10), new THREE.MeshNormalMaterial());
  scene.add (wall);
  wall.position.set (0, 20, -5);
  
  let wall2 = new THREE.Mesh (new THREE.BoxGeometry (10,40,60), new THREE.MeshNormalMaterial());
  scene.add (wall2);
  wall2.position.set (-35, 20, 20);

	let loader = new THREE.TextureLoader();
  loader.crossOrigin = "";
  tex = loader.load ("https://i.imgur.com/M6la82f.jpg");

	let painting = new THREE.Mesh (new THREE.PlaneGeometry(30,30), new THREE.MeshBasicMaterial({map: tex,side:THREE.DoubleSide}));
  scene.add (painting);
  painting.position.y =15;
  painting.position.z = 1;
  painting.name = 'jmchen';

  tex2 = loader.load ("https://i.imgur.com/pZHBC5u.jpg");
	let painting2 = new THREE.Mesh (new THREE.PlaneGeometry(30,30), new THREE.MeshBasicMaterial({map: tex2}));
  scene.add (painting2);
  painting2.rotation.y = Math.PI/2;
  painting2.position.y = 15;
  painting2.position.x = -27
  painting2.position.z = 20;
  painting2.name = 'confucius';

 ...