JSFiddle - React, Tailwind, and code Playground

by RGMGx

HTML

<!DOCTYPE html>
<div id="info">Plurk社區<br>

  
</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: 20%;
  padding: 0px;
  text-align: center;
  color: #ff0000
}

body {
  overflow: hidden;
}

JavaScript

var container, stats;
var camera1,
  scene, renderer, light;
var controls, water
var theObject = new THREE.Object3D()
var theObject2 = new THREE.Object3D()
var theObject3 = new THREE.Object3D()
var keyboard = new KeyboardState();
var group = new THREE.Group();
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, 4000);
  camera1.position.set(150, 2000, -300);
container = document.createElement('div');
  document.body.appendChild(container);
scene.background = new THREE.Color(0xffffff);
  scene.fog = new THREE.Fog(0xffffff, 1000, 4000);

  scene.add(camera1);

  //
  // LIGHTS

  scene.add(new THREE.AmbientLight(0x222222));

  light = new THREE.DirectionalLight(0xffffff, 2.25);
  light.position.set(200, 450, 500);

  light.castShadow = true;

  light.shadow.mapSize.width = 1024;
  light.shadow.mapSize.height = 512;

  light.shadow.camera.near = 100;
  light.shadow.camera.far = 1200;

  light.shadow.camera.left = -1000;
  light.shadow.camera.right = 1000;
  light.shadow.camera.top = 350;
  light.shadow.camera.bottom = -350;

  scene.add(light);
  var gt = new THREE.TextureLoader().load("https://rgmgx.github.io/textures/grasslight-big.jpg");
  var gg = new THREE.DodecahedronGeometry(320.5)
  var gm = new...