<html>
	<head>
		<title></title>
		<style>
			body { margin: 0; }
			canvas { width: 100%; height: 100% }
		</style>
	</head>
	<body>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/87/three.min.js"></script>
		<script src="JS/OrbitControls.js"></script>
		<script src="JS/OBJLoader.js"></script>
		<script type="module" src="JS/MTLLoader.js"></script>
		<script type="module" src="JS/Script2.js?ver=<?php echo md5(uniqid(microtime(true), true));?>"></script>
		<div style="">
		<canvas id="c" style="width: 100%;"></canvas>
		</div>
	</body>

</html>


import * as THREE from 'https://threejsfundamentals.org/threejs/resources/threejs/r122/build/three.module.js';
import {OrbitControls} from 'https://threejsfundamentals.org/threejs/resources/threejs/r122/examples/jsm/controls/OrbitControls.js';
import {OBJLoader2} from 'https://threejsfundamentals.org/threejs/resources/threejs/r122/examples/jsm/loaders/OBJLoader2.js';

function main() {
  //把影像放到Canvas
  const canvas = document.querySelector('#c');
  const renderer = new THREE.WebGLRenderer({canvas});
  //
  const fov = 45; //默認50
  const aspect = 2;  //預設2 the canvas default
  const near = 0.1; //預設0.1
  const far = 100;
  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
  //向機從哪啪社
  camera.position.set(0, 10, 20);
  //相機看哪裡
  //camera.lookAt({ x:0, y:0, z:0 });

  const controls = new OrbitControls(camera, canvas);
  controls.target.set(0, 5, 0);
  //不要進入物件內部
  controls.minDistance = 0;
  controls.maxDistance = 100.0;
  controls.autoRotate = true;     
  controls.autoRotateSpeed = 2.0;    
  controls.update(); 
  
  
  

  const scene = new THREE.Scene();
  //整個背景顏色
  scene.background = new THREE.Color('cyan');
  scene.background = new THREE.Color('grey');

  //場地大小
  {
    const planeSize = 200;
    const planeGeo = new THREE.PlaneBufferGeometry(planeSize, planeSize);
  }

  // 顯示三軸(平時隱藏)
  /*
  {
    var axis = new THREE.AxisHelper(1000);
    //紅，中間Z記得，藍
    axis.position.set(0,0,0);
    scene.add(axis);
  }
  */

  {
    const skyColor = 0xB1E1FF;  // light blue
    //背影的光線
    const groundColor = 0xB97A20;  // brownish orange
    const intensity = 0.9;
    const light = new THREE.HemisphereLight(skyColor, groundColor, intensity);
    scene.add(light);
  }

  //方向光一（可調整光線）可以多組
  {
    const color = 0xFFFFFF;
    const intensity = 0.5;
    const light = new THREE.DirectionalLight(color, intensity);
    light.position.set(10, 10, 10);
    light.target.position.set(0, 0, 0);
    scene.add(light);
    scene.add(light.target);
  }


  //載入物件
  {
    const objLoader = new OBJLoader2();
    objLoader.load('https://threejsfundamentals.org/threejs/resources/models/windmill/windmill.obj', (root) => {
      scene.add(root);
    });
  }

  function resizeRendererToDisplaySize(renderer) {
    const canvas = renderer.domElement;
    const width = canvas.clientWidth;
    const height = canvas.clientHeight;
    const needResize = canvas.width !== width || canvas.height !== height;
    if (needResize) {
      renderer.setSize(width, height, false);
    }
    return needResize;
  }

  function render() {

    if (resizeRendererToDisplaySize(renderer)) {
      const canvas = renderer.domElement;
      camera.aspect = canvas.clientWidth / canvas.clientHeight;
      camera.updateProjectionMatrix();
    }

    renderer.render(scene, camera);

    requestAnimationFrame(render);
  }

  requestAnimationFrame(render);
}

main();
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.