JSFiddle - React, Tailwind, and code Playground

by RGMGx

HTML

<!DOCTYPE html>
<div id="info">Hw1 drive with keyboard<br>

  <button id="toggle" style="width:20%">viewpoint change</button>
</div>

<div id="container"></div>

<script src="https://threejs.org/build/three.min.js"></script>

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

<script src="https://threejs.org/examples/js/objects/Water.js"></script>
<script src="https://threejs.org/examples/js/objects/Sky.js"></script>

<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://threejs.org/examples/js/WebGL.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/stats.js/r16/Stats.min.js"></script>

<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>


<script src="https://cdn.jsdelivr.net/gh/mrdoob/three.js@2410ad1a8f5844df00191600eafda59def537830/examples/js/loaders/MTLLoader.js"></script>
<script src="https://cdn.jsdelivr.net/gh/mrdoob/three.js@2410ad1a8f5844df00191600eafda59def537830/examples/js/loaders/OBJLoader.js"></script>
<script src="https://jyunming-chen.github.io/tutsplus/js/KeyboardState.js"></script>

<script src="https://cdn.jsdelivr.net/gh/mrdoob/three.js@2410ad1a8f5844df00191600eafda59def537830/src/core/Clock.js"></script>

CSS

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

body {
  overflow: hidden;
}

JavaScript

var container, stats;
var camera1, camera2 = new THREE.PerspectiveCamera(),
  scene, renderer, light;
var controls, water
var theObject = new THREE.Object3D()
var keyboard = new KeyboardState();

var clock;
var power;
var pos = new THREE.Vector3();
var vel = new THREE.Vector3();
var force = new THREE.Vector3();
var turn = false;
(function() {
  Math.clamp = function(val, min, max) {
    return Math.min(Math.max(val, min), max);

  }
})();

init();
animate();

$("#toggle").click(function() {
  turn = !turn;
});

function init() {

  clock = new THREE.Clock();
  power = 5.0;
  angle = 0.0;
  container = document.getElementById('container');



  //
  renderer = new THREE.WebGLRenderer({
    antialias: true
  });
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);
  container.appendChild(renderer.domElement);
  //
  scene = new THREE.Scene();
  //
  camera1 = new THREE.PerspectiveCamera(55, window.innerWidth / window.innerHeight, 1, 20000);
  camera1.position.set(30, 60, -120);


  //
  light = new THREE.DirectionalLight(0xffffff, 0.8);
  scene.add(light);



  // Water
  var waterGeometry = new THREE.PlaneBufferGeometry(10000, 10000);
  water = new THREE.Water(
    waterGeometry, {

      textureWidth: 700,
      textureHeight: 700,
      waterNormals: new THREE.TextureLoader().load('https://cdn.rawgit.com/mrdoob/three.js/dev/examples/textures/waternormals.jpg', function(texture) {
        texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
      }),
      alpha: 1.0,
      sunDirection: light.position.clone().normalize(),
      sunColor: 0xffffff,
      waterColor: 0x001e0f,
      distortionScale: 3.7,
      fog: scene.fog !== undefined
    }
  );

  water.rotation.x = -Math.PI / 2;
  scene.add(water);
  // Skybox
  var sky = new THREE.Sky();
  sky.scale.setScalar(1000);
  scene.add(sky);
  var uniforms = sky.material.uniforms;
  uniforms.turbidity.value = 10;
  uniforms.rayleigh.value = 2;
 ...