專題 詹 四面牆

part.1

by joe chan

HTML

<h1 style="text-align:center">Drive
<br>Use w a s d to control home to star
</h1>

<hr>
<div id="container2" style="background:pink; float:left; margin:3px; width:45vw; height:45vw"></div>
<div id="container" style="float:right; margin:3px; width:45vw; height:45vw">
</div>
<br>
<hr style="clear:both">
<div style="text-align:center; width:100vw;"></div>

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

CSS

.dbutton {
  padding: 4px;
  background: green;
  border-radius: 4px;
  cursor: pointer;
}

.dbutton.selected {
  background: orange;
}

JavaScript

var camera, scene, renderer;
var camera2, scene2, renderer2;
var controls;

var keyboard = new KeyboardState();

var positionP = new THREE.Vector3();
var upTemp = new THREE.Vector3();

var car;
var stop = true,
  direction = 0;
var pos, vel, force;
var angle = 0,
  pow = 30;
var mass = 1;
var clock = new THREE.Clock();
var localtoworld; 

var changeCF = new THREE.Vector3();

init();
animate();

function buildModel() {

  var materialArray = [
    new THREE.MeshBasicMaterial({ // +x
      color: 0x009900,
      side: THREE.BackSide
    }),
    new THREE.MeshBasicMaterial({ // -x
      color: 0x880088,
      side: THREE.BackSide
    }),
    new THREE.MeshBasicMaterial({ // +y
      color: 0x999999,
      side: THREE.BackSide

    }),
    new THREE.MeshBasicMaterial({ // -Y
      color: 0x990000,
      wireframe: true,
      visible: false
    }),
    new THREE.MeshBasicMaterial({ // +z
      color: 0x009999,
      side: THREE.BackSide

    }),
    new THREE.MeshBasicMaterial({ // -Z
      color: 0xFFFF00,
      side: THREE.BackSide
    })
  ];
  var material = new THREE.MultiMaterial(materialArray);
  cube = new THREE.Mesh(new THREE.BoxGeometry(150, 150, 150), material);

  return cube;
}

function init() {
  var ww = $("#container").innerWidth();
  var hh = $("#container").innerHeight();
  renderer = new THREE.WebGLRenderer();
  renderer.setSize(ww, hh);
  renderer.setClearColor(0x888888);
  $("#container").append(renderer.domElement);

  renderer2 = new THREE.WebGLRenderer();
  renderer2.setSize(ww, hh);
  renderer2.setClearColor(0x888888);
  $("#container2").append(renderer2.domElement);

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

  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(90, ww / hh, 1, 1000);
  camera.position.z = 50;

  camera2 = new THREE.PerspectiveCamera(50, ww / hh, 1, 1000);
  camera2.position.z = 250;


  var grid = new THREE.GridHelper(600, 60, 'red', 'white');
  grid.position.y = -75;
  scene.add(grid);
  var axe =...