JSFiddle - React, Tailwind, and code Playground

by j91157j91157

HTML

<title>Hello Three.js</title>
<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://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/stats.js/r16/Stats.min.js"></script>

<div>
  <input id='angle' type='text'>
  <button id='myButton'>顯示XYZ軸</button>
</div>

CSS

body {
  overflow: hidden;
}

div {
  position: absolute;
  top: 90vh;
  left: 43vw;
}

#angle {
  height: 20px;
  width: 45px
}

JavaScript

var renderer, camera, controls, scene;
var stats;
var cubeGeometry, cubeMaterial, cube;

init();
animate();
rotate();

function init() {
  renderer = new THREE.WebGLRenderer({ //renderer = 呈現，建立算圖引擎
    antialias: true //進行抗鋸齒算圖
  });
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setClearColor(0xAAAAAA); //背景顏色，用16進位色碼表示。
  document.body.appendChild(renderer.domElement);

  camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1000); //(相機平截鏡頭垂直視野，相機平截鏡頭縱橫比，離相機鏡頭最近，離相機鏡頭最遠)
  camera.position.z = 50; // important  可視為程式剛開始執行的時候camera所要呈現的視角，這裡我們視角座標為(0,0,50)。

  controls = new THREE.OrbitControls(camera, renderer.domElement); //控制視角遠近的 function

  scene = new THREE.Scene(); //創造場景的呈現樣貌 (XYZ軸以及方格子)

  let gridXZ = new THREE.GridHelper(100, 20, 'yellow', 'white'); //(大小, 每個邊格子劃分數, 中心線的顏色, 網格線條的顏色)
  scene.add(gridXZ); //顯示十字軸以及方格

  let axes = new THREE.AxisHelper(10); //(大小)
  scene.add(axes); //顯示XYZ軸 (紅,綠,藍)

  stats = new Stats(); //顯示FPS
  stats.domElement.style.position = 'absolute';
  stats.domElement.style.top = '0px';
  stats.domElement.style.left = '0px';
  stats.domElement.style.zIndex = 100;
  document.body.appendChild(stats.domElement);

  $('#myButton').click(function() { //切換軸的顯示
    axes.material.visible = !axes.material.visible; //顯示 = 不顯示
  });
  

  window.addEventListener('resize', onWindowResize, false);

  cubeGeometry = new THREE.BoxGeometry(100, 1, 1);
  cubeMaterial = new THREE.MeshNormalMaterial();
  cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
  scene.add(cube);
}


function animate() {
  controls.update(); //更新控制視角遠近動畫
  stats.update(); //FPS隨時更新
  renderer.render(scene, camera); //算圖
  requestAnimationFrame(animate); //一種不斷對算圖更新的方法，當畫面有進行任何更動時可以不斷更新!!!
}

function onWindowResize() {
  var width = window.innerWidth;
  var height = window.innerHeight;
  camera.aspect = width / height;
  camera.updateProjectionMatrix();
  renderer.setSize(width, height);
}

function rotate() {
 ...