Raycaster_test

by yi hom

HTML

<script src="https://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>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://jyunming-chen.github.io/tutsplus/js/KeyboardState.js"></script>
<div id="turn">Raycaster_test
</div>

CSS

#turn {
  position: absolute;
  top: 2%;
  width: 100%;
  padding: 10px;
  text-align: center;
  color: #ffff00
}

body {
  overflow: hidden;
}

JavaScript

var camera, scene, renderer;
var controls;
var raycaster;
var pickables = [];
var intersects;

var sand, SandGeometry, SandMaterial;
var cube;
var geometry, Material, size = 10;
var dis = new THREE.Vector3();
var sum = 0;
var pick = false;
var keyboard = new KeyboardState();

init();
animate();

function sandplane() {
  SandFunc = function(u0, v0) {
    return new THREE.Vector3(-20 + 40 * u0, 0, -20 + 40 * v0);
  };
  SandGeometry = new THREE.ParametricGeometry(SandFunc, 39, 39);
  SandGeometry.computeFaceNormals();
  SandGeometry.computeVertexNormals();

  SandMaterial = new THREE.MeshPhongMaterial({
    wireframe: true,
    side: THREE.DoubleSide,
    polygonOffset: true,
    polygonOffsetFactor: +1.0,
    polygonOffsetUnits: +4.0
  });


  sand = new THREE.Mesh(SandGeometry, SandMaterial);
  sand.position.set(0, 0, 0);
  scene.add(sand);
}

function object() {
  geometry = new THREE.BoxGeometry(size, size, size);
  material = new THREE.MeshPhongMaterial({
    color: 0x00ffff
  });
  cube = new THREE.Mesh(geometry, material);
  scene.add(cube);
}

function init() {
  scene = new THREE.Scene();
  renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setClearColor(0x888888);
  document.body.appendChild(renderer.domElement);

  camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1000);
  camera.position.z = 100;
  controls = new THREE.OrbitControls(camera, renderer.domElement);

  var light = new THREE.PointLight(0xffffff, 1, 100);
  light.position.set(20, 20, 20);
  scene.add(light);

  var light1 = new THREE.PointLight(0xffffff, 1, 100);
  light1.position.set(-20, 20, -20);
  scene.add(light1);

  var axisHelper = new THREE.AxisHelper(100);
  scene.add(axisHelper);

  sandplane();
  object();

  pickables = [cube];
  raycaster = new THREE.Raycaster();
	
  window.addEventListener('resize', onWindowResize, false);
}

function onWindowResize() {
  camera.aspect = window.innerWidth...