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,300);
    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);
        
        // 聚光灯
        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 );
        console.log(this.slight.shadow.camera);
        this.scene.add(helper);
        this.scene.add(new THREE.SpotLightHelper(this.slight))

    }

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

       ...