JSFiddle - React, Tailwind, and code Playground

by hijiangtao

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/84/three.js"></script>
<canvas id="mainCanvas"></canvas>

JavaScript

"use strict"

let globj = function(id) {
  let obj = new Object();

  // 创建渲染器
  obj.renderer = new THREE.WebGLRenderer({
    canvas: document.getElementById(id),
    antialias: true
  });
  obj.renderer.setClearColor(0x666666);
  obj.renderer.setSize(600, 400);
  obj.renderer.shadowMap.enabled = true;
  obj.renderer.shadowMap.type = THREE.PCFSoftShadowMap;

  // 创建场景
  obj.scene = new THREE.Scene();

  obj.setCamera = function(type, props, position) {
    if (type === 'perspective') {
      this.camera = new THREE.PerspectiveCamera(...props);
      this.camera.position.set(...position);
    } else {
      this.camera = new THREE.OrthographicCamera(...props);
      this.camera.position.set(...position);

    }

    this.camera.lookAt(new THREE.Vector3(0, 0, 0));
    this.scene.add(this.camera);
  }

  obj.setLight = function() {
    // 环境光, 一般设置为白色或者灰色
    this.alight = new THREE.AmbientLight(0x666666);
    this.scene.add(this.alight);

    // Spotlight and shadow settings
    this.slight = new THREE.SpotLight(0xffffff, 1.5, 100);
    this.slight.position.set(-25, 40, 30);
    this.slight.target = this.carbody;
    this.slight.castShadow = true;

    this.slight.shadowDarkness = 0.5;
    // this.slight.shadow.camera.near = 1;
    // this.slight.shadow.camera.far = 100;
    // this.slight.shadow.camera.fov = 30;
    this.slight.shadow.mapSize.width = 1024; //阴影精度
    this.slight.shadow.mapSize.height = 1024; //阴影精度

    this.scene.add(this.slight);

    // 添加阴影
    var helper = new THREE.CameraHelper(this.slight.shadow.camera);
    this.scene.add(new THREE.SpotLightHelper(this.slight));
    this.scene.add(helper);
  }

  obj.generateCar = function() {
    let carsize = [40, 20, 20],
      tssize = [4, 1.5, 14, 20],
      carcircle = [];

    this.carbody = new THREE.Mesh(new THREE.BoxGeometry(...carsize),
      new THREE.MeshStandardMaterial({
        color: 0xffffff
      }));
    this.carbody.position.set(0, carsize[1] * 0.25, 0);
    this.carbody.castShadow =...