0410

by joe chan

HTML

<div id="info">demo page
  <br>
  <p id="v1">
    view 1
  </p>
  <p id="v2">
    view 2
  </p>
</div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/84/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://jyunming-chen.github.io/tutsplus/js/KeyboardState.js"></script>
<script src="https://rawgit.com/jyunming-chen/tutsplus/master/js/text2D.js"></script>

CSS

#info {
  position: absolute;
  top: 0px;
  width: 100%;
  padding: 10px;
  text-align: center;
  color: #7ECCF9
}

body {
  overflow: hidden;
}

JavaScript

var camera, scene, renderer, mesh, light, controls;
var sprite, puck;
var angle = 0;
var puck = [];
var pbody, poeple;
var counter = 0;

var wall = [];
var num = 1;

var raycaster;
var mouse = new THREE.Vector2();
var pickables = [];

init();
animate();

function init() {
  scene = new THREE.Scene();

  camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1000);
  camera.position.set(0, 200, 100);
  scene.add(camera);
  window.addEventListener('resize', onWindowResize, false);

  ///////////////////////////

  light = new THREE.PointLight(0xffffff);
  light.position.set(0, 150, 0);
  var clonelight = light.clone();
  clonelight.position.set(-75, 10, 30);
  scene.add(clonelight);
  scene.add(light);


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

  var axis = new THREE.AxisHelper(70);
  scene.add(axis);

  renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setClearColor(0x666666);

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

  document.body.appendChild(renderer.domElement);
  ////////////////////////////////////////////////////////////////////////wall

  var geometry = new THREE.PlaneGeometry(170, 70);
  var material = new THREE.MeshLambertMaterial({
    color: 0xaaaaaa,
    side: THREE.DoubleSide,
    transparent: true,
    opacity: 0.5,
    visible: true
  });

  var plane = new THREE.Mesh(geometry, material);
  plane.rotation.x = -Math.PI / 2;
  plane.position.set(0, 0, 35);

  pickables = [plane];
  var wallMaterial = new THREE.MeshLambertMaterial();
  var wall_Geometry = new THREE.BoxGeometry(1, 20, 60);


  for (var i = 0; i < 3; i++) {
    wall[i] = new THREE.Mesh(wall_Geometry, wallMaterial);
    wall[i].position.y = 10;
    wall[i].position.z = 40;
    scene.add(wall[i]);
  }
  wall[0].position.x = -70;
  wall[1].position.x = -35;
  wall[2].position.x = 10;

  var wall_s = new THREE.Mesh(new...