DriveCar
/
index.html

<!DOCTYPE html>
<html lang="zh">
<head>
    <title>驾驶赛车</title>
    <meta charset="utf-8">
    <style>
        body{
            margin: 0;
            overflow:hidden;//隐藏滚动条
        }
        #tip{
            position: absolute;
            top: 5px;
            left: 25%;
            margin: 0 auto;
            text-align: center;
            width: 50%;
            font-family:楷体;
            color: #ffe343;
            background-color: rgba(57, 57, 57, 0.3);
            font-size: 1.5em;
            border-radius: 5px;
            backdrop-filter: blur(5px);
            text-shadow: 2px 0px 2px black;

        }
        #progressBar{
            position: absolute;
            top: 50px;
            left: 25%;
            margin: 0 auto;
            text-align: center;
            width: 50%;
            font-family:楷体;
            color: #ffe343;
            background-color: rgba(57, 57, 57, 0.3);
            font-size: 1.5em;
            border-radius: 5px;
            backdrop-filter: blur(5px);
            text-shadow: 2px 0px 2px black;
        }
        #download{
            position: absolute;
            top: 20%;
            left: 20px;
            border-radius: 5px;
            padding: 10px;
            background-color: rgba(57, 57, 57, 0.3);
            text-align: center;
            backdrop-filter: blur(5px);
            font-size: 15px;
            font-family:楷体;
        }
        a{
            text-decoration: none;
            color: #f8de43;
            text-shadow: 2px 0px 2px black;
        }
        a:hover{
            color: #0fff06;
        }
    </style>
</head>
<body>
<p id="tip">提示:  WASD:控制方向  空格:刹车  V:切换视角</p>
<p id="progressBar">100MB大场景加载中......</p>
<div id="stats"></div>
<script src="./libs/three.js"></script>
<script src="./libs/OrbitControls.js"></script>
<script src="./libs/GLTFLoader.js"></script>
<script src="./libs/DRACOLoader.js"></script>
<script src="./libs/dat.gui.min.js"></script>
<script src="./libs/physijs/physi.js"></script>
<script src="./libs/stats.min.js"></script>
<!--<script src="libs/renderers/CSS2DRenderer.js"></script>-->

<script>

    'use strict';

    Physijs.scripts.worker = 'libs/physijs/physijs_worker.js';
    Physijs.scripts.ammo = '../physijs/ammo.js';

    let camera,camerad,cameracd, scene, renderer,stats,mouse,AmbientLight,DirectionalLight;
    let control,mesh,raycaster,labelRenderer,positionSphere;
    let clock = new THREE.Clock();
    let cars = new Array(6);//定义汽车的各个部件(原始);
    cars[1] = new THREE.Object3D();

    let body = new THREE.Object3D();//暂时只将body物体存入数组
    let flConstraint, frConstraint,rlConstraint,rrConstraint,wheel2;
    let v=0;//视角切换标志变量
    let mixer=new THREE.AnimationMixer(new THREE.Object3D());//定义一个空动画混合器


    init();
    animate();

    function init() {

        let saveLink = document.createElement('div');
        saveLink.id = 'download';
        saveLink.innerHTML =
            '<a href="#" id="saveLink">多视角截图</a>';
        document.body.appendChild(saveLink);
        document.getElementById("saveLink").addEventListener('click', saveAsImage);


        function saveAsImage() {
            let imgData;
            try {
                renderer.render( scene, camera );
                imgData = renderer.domElement.toDataURL();
                saveFile(imgData, "自由视角.png");

                renderer.render( scene, cameracd );
                imgData = renderer.domElement.toDataURL();
                saveFile(imgData, "车顶视角.png");

                renderer.render( scene, camerad );
                imgData = renderer.domElement.toDataURL();
                saveFile(imgData, "驾驶视角.png");


            } catch (e) {
                console.log(e);
                return 0;
            }

        }

        let saveFile = function (strData, filename) {
            let link = document.createElement('a');
            if (typeof link.download === 'string') {
                document.body.appendChild(link); //Firefox requires the link to be in the body
                link.download = filename;
                link.href = strData;
                link.click();
                document.body.removeChild(link); //remove the link when done
            } else {
                location.replace(uri);
            }
        };


        (function addScene() {
            scene = new Physijs.Scene();
            scene.setGravity(new THREE.Vector3(0,-200,0));
            scene.background = new THREE.CubeTextureLoader()
                .setPath( './src/' )
                .load( [
                    'px.jpg',
                    'nx.jpg',
                    'py.jpg',
                    'ny.jpg',
                    'pz.jpg',
                    'nz.jpg'
                ] );
            // let axesHelper0 = new THREE.AxesHelper( 10000 );
            // scene.add( axesHelper0 );

            AmbientLight = new THREE.AmbientLight( "rgb(178,170,176)",0.5 ); // soft white light
            scene.add( AmbientLight );
            DirectionalLight = new THREE.DirectionalLight( 0xffffff, 1 );//平行光
            DirectionalLight.position.set( 10, 50, 10 );
            scene.add( DirectionalLight );
            // let helper = new THREE.DirectionalLightHelper( DirectionalLight, 10 );
            // scene.add( helper );

            camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 10000000 );
            camera.position.set(0,50,-200);
            camerad = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 10000000 );
            cameracd = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 10000000 );//车顶相机
            cameracd.position.set(300,100,4);
            cameracd.rotateY(Math.PI/2);

            stats = new Stats();
            document.getElementById('stats').appendChild( stats.dom );


            renderer = new THREE.WebGLRenderer( { antialias: true ,preserveDrawingBuffer: true} );
            renderer.gammaOutput=true;
            renderer.gammaFactor=2.2;
            renderer.gammaInput=true;
            renderer.sortObjects = true;

            renderer.setPixelRatio( window.devicePixelRatio );
            renderer.setSize( window.innerWidth, window.innerHeight );
            document.body.appendChild( renderer.domElement );
            console.log(renderer);

            control = new THREE.OrbitControls( camera, renderer.domElement );//相机轨道控件
            control.dampingFactor = 0.1; //阻尼强度
            control.enableDamping = true; // 开启控制阻尼
            // control.target.set(-0.39, 0, 5.57);
            control.rotateSpeed = 0.2;
            control.panSpeed = 0.2;
            control.screenSpacePanning = false;
            //相机控制位置限制
            // control.minDistance = 20;
            // control.maxDistance = 800;
            control.maxPolarAngle = Math.PI / 2.25;
            control.update();

            let geometry = new THREE.SphereGeometry( 10, 32, 32 );
            let material = new THREE.MeshBasicMaterial( {color: 0xffff00} );
            positionSphere = new THREE.Mesh( geometry, material );
            positionSphere.position.set(0, -20, 10);
            // scene.add( positionSphere );

        })();//添加场景

        (function WindowChange() {
            window.addEventListener( 'resize', onWindowResize, false );
            function onWindowResize() {
                camera.aspect = window.innerWidth / window.innerHeight;
                camera.updateProjectionMatrix();
                camerad.aspect = window.innerWidth / window.innerHeight;
                camerad.updateProjectionMatrix();
                cameracd.aspect = window.innerWidth / window.innerHeight;
                cameracd.updateProjectionMatrix();
                renderer.setSize( window.innerWidth, window.innerHeight );
            }
        })();//窗口自适应

        (function addGround() {
            let texture = new THREE.TextureLoader().load( "./src/map2.jpg" );
            texture.wrapS = THREE.RepeatWrapping;
            texture.wrapT = THREE.RepeatWrapping;
            texture.repeat.set( 10, 10 );

            let materialP0 = Physijs.createMaterial(                            //定义地面plan物理材质
                new THREE.MeshPhongMaterial(
                    {
                        color: new THREE.Color( "rgb(135,135,135)" ),
                        map:texture,
                        visible:false,
                    }),
                3, // high friction
                0 // low restitution
            );

            let planG = new THREE.BoxGeometry( 11000, 10, 11000);
            let plan = new Physijs.BoxMesh(
                planG,
                materialP0,
                0 // mass
            );
            plan.position.set(0,-30,0);
            scene.add( plan );
        })();//添加物理地面

        (function sceneGLTFLoader() {
            let directionalLight = new THREE.DirectionalLight( 0xffffff, 1.5 );//平行光
            directionalLight.position.set( 0, 0, 3 );
            scene.add( directionalLight );

            let loader2 = new THREE.GLTFLoader();
            loader2.load( './models/scene.glb', function ( gltf ) {

                console.log(gltf);
                gltf.scene.children[2].children[10].renderOrder =-3 ;
                gltf.scene.children[2].children[9].renderOrder =-2 ;
                gltf.scene.children[2].children[11].renderOrder =-1 ;

                //路人汽车
                gltf.scene.children[2].children[1].material.visible=false;
                // gltf.scene.children[1].material.transparent=true;
                // gltf.scene.children[1].material.opacity=0.7;
                // gltf.scene.children[1].material.color=new THREE.Color( "rgb(43,77,255)" );
                //
                //
                //
                // let materialP = Physijs.createMaterial(
                //     new THREE.MeshLambertMaterial({
                //         color: 'rgb(114,114,114)',
                //         opacity: 1,
                //         transparent: false,
                //         side:2,
                //     }),
                //     .5, // high friction
                //     1 // medium restitution
                // );
                // let otherCar = new Physijs.BoxMesh(gltf.scene.children[1].geometry, materialP, 500);
                // otherCar.scale.set(0.06,0.06,0.06);
                // console.log(otherCar);
                // otherCar.position.set( gltf.scene.children[1].position.x *100,10,gltf.scene.children[1].position.z *100);
                // scene.add(otherCar);


                gltf.scene.translateZ(1860);
                gltf.scene.translateY(-24);
                gltf.scene.translateX(1855);
                gltf.scene.scale.set(1000,1000,1000);

                mixer = new THREE.AnimationMixer( gltf.scene );
                mixer.timeScale=0.2;
                // let a = new  THREE.AnimationAction();
                // a( mixer,gltf.animations[ 0 ]).timescale=0.1;
                // mixer.timeScale(gltf.animations[ 0 ]);
                // mixer.clipAction( gltf.animations[ 0 ] ).play();
                // animate();

                scene.add( gltf.scene );

            },function ( xhr ) {

                // console.log(xhr);
                let pro = Math.floor(xhr.loaded / 109065436 *10000)/100;
                let progressBar = document.getElementById('progressBar');
                progressBar.innerText =
                    '大场景加载中 ' + pro + '%......';
                if (pro === 100){
                    setTimeout(function () {
                        progressBar.style.display = 'none';
                    },2000);

                }

            });
        })();

        (function physyWall() {
            let ground_material = Physijs.createMaterial(
                new THREE.MeshLambertMaterial({color: new THREE.Color("rgb(56,143,255)"), opacity: 0.2, transparent: true}),
                .5, // high friction
                1 // medium restitution
            );

            let groundGeoA1 = new THREE.BoxGeometry(4460, 400, 30);
            let groundBodyA1 = new Physijs.BoxMesh(groundGeoA1, ground_material, 0);

            groundBodyA1.position.set(-670,0, 1080+2500);
            groundBodyA1.castShadow = true;
            scene.add(groundBodyA1);

            // let gruondright={};
            let groundGeoA2 = new THREE.BoxGeometry(4430, 400, 30);
            let groundBodyA2 = new Physijs.BoxMesh(groundGeoA2, ground_material, 0);
            scene.add(groundBodyA2);
            groundBodyA2.position.set(-240,0, 1500+2500);
            groundBodyA2.castShadow = true;
            scene.add(groundBodyA2);
/////////////////////////////////////////////////////////////////////////////////////////////////
            let groundGeoB1 = new THREE.BoxGeometry(30, 400, 3300);
            let groundBodyB1 = new Physijs.BoxMesh(groundGeoB1, ground_material, 0);
            scene.add(groundBodyB1);
            groundBodyB1.position.set(1550,0, -580+2500);
            groundBodyB1.castShadow = true;
            scene.add(groundBodyB1);

            // let gruondright={};
            let groundGeoB2 = new THREE.BoxGeometry(30, 400, 4200);
            let groundBodyB2 = new Physijs.BoxMesh(groundGeoB2, ground_material, 0);
            scene.add(groundBodyB2);
            groundBodyB2.position.set(2000,0, -600+2500);
            groundBodyB2.castShadow = true;
            scene.add(groundBodyB2);
/////////////////////////////////////////////////////////////////////////////////////////////////
            let groundGeoC1 = new THREE.BoxGeometry(5700, 400, 30);
            let groundBodyC1 = new Physijs.BoxMesh(groundGeoC1, ground_material, 0);
            scene.add(groundBodyC1);
            groundBodyC1.position.set(-840,0, -2700+2500);
            groundBodyC1.castShadow = true;
            scene.add(groundBodyC1);

            // let gruondright={};
            let groundGeoC2 = new THREE.BoxGeometry(4850, 400, 30);
            let groundBodyC2 = new Physijs.BoxMesh(groundGeoC2, ground_material, 0);
            scene.add(groundBodyC2);
            groundBodyC2.position.set(-860,0, -2240+2500);
            groundBodyC2.castShadow = true;
            scene.add(groundBodyC2);
/////////////////////////////////////////////////////////////////////////////////////////////////
            let groundGeoD1 = new THREE.BoxGeometry(30, 400, 5120);
            let groundBodyD1 = new Physijs.BoxMesh(groundGeoD1, ground_material, 0);
            scene.add(groundBodyD1);
            groundBodyD1.position.set(-3700,0, -170+2500);
            groundBodyD1.castShadow = true;
            scene.add(groundBodyD1);

            let groundGeoD2 = new THREE.BoxGeometry(30, 400, 4200);
            let groundBodyD2 = new Physijs.BoxMesh(groundGeoD2, ground_material, 0);
            scene.add(groundBodyD2);
            groundBodyD2.position.set(-3270,0, -150+2500);
            groundBodyD2.castShadow = true;
            scene.add(groundBodyD2);
/////////////////////////////////////////////////////////////////////////////////////////////////
            let groundGeoE1 = new THREE.BoxGeometry(30, 400, 890);
            let groundBodyE1 = new Physijs.BoxMesh(groundGeoE1, ground_material, 0);
            scene.add(groundBodyE1);
            groundBodyE1.position.set(-2880,0, 1520+2500);
            groundBodyE1.castShadow = true;
            scene.add(groundBodyE1);

            let groundGeoE2 = new THREE.BoxGeometry(30, 400,890);
            let groundBodyE2 = new Physijs.BoxMesh(groundGeoE2, ground_material, 0);
            scene.add(groundBodyE2);
            groundBodyE2.position.set(-2450,0, 1950+2500);
            groundBodyE2.castShadow = true;
            scene.add(groundBodyE2);
/////////////////////////////////////////////////////////////////////////////////////////////////
            let groundGeoF1 = new THREE.BoxGeometry(1280, 400, 30);
            let groundBodyF1 = new Physijs.BoxMesh(groundGeoF1, ground_material, 0);
            scene.add(groundBodyF1);
            groundBodyF1.position.set(-3100,0, 2400+2500);
            groundBodyF1.castShadow = true;
            scene.add(groundBodyF1);

            // let gruondright={};
            let groundGeoF2 = new THREE.BoxGeometry(380, 400, 30);
            let groundBodyF2 = new Physijs.BoxMesh(groundGeoF2, ground_material, 0);
            scene.add(groundBodyF2);
            groundBodyF2.position.set(-3070,0, 1950+2500);
            groundBodyF2.castShadow = true;
            scene.add(groundBodyF2);


            let boxM = new THREE.TextureLoader().load( "./src/map.jpg" );
            let materialBox = Physijs.createMaterial(
                new THREE.MeshStandardMaterial({
                    color: 'rgb(152, 121, 98)',
                    roughness:0.3,
                    metalness:0.3,
                    map:boxM}),
                .5, // high friction
                2 // medium restitution
            );
            let sphere = new Physijs.SphereMesh(new THREE.SphereGeometry( 30, 32, 32 ), materialBox, 200);
            sphere.position.setX(-310);
            scene.add(sphere);


            for(let i = 1;i<=8;i++){
                for(let j = 0;j<4;j++){
                    let box = new Physijs.BoxMesh(new THREE.BoxGeometry(  50, 50, 50 ), materialBox, 20);
                    box.position.set(-1000 ,20 + j*50,-200 + i*50);
                    scene.add(box);
                }

            }


        })();

        // (function rayCaster() {
        //     raycaster = new THREE.Raycaster();
        //     mouse = new THREE.Vector2();
        //     // window.addEventListener( 'dblclick', MouseDbclick, false );
        //     // function MouseDbclick( event ) {
        //     //
        //     //     // 将鼠标位置归一化为设备坐标。x 和 y 方向的取值范围是 (-1 to +1)
        //     //
        //     //     mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
        //     //     mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
        //     //
        //     //     raycaster.setFromCamera( mouse, camera );
        //     //
        //     //     // 计算物体和射线的焦点
        //     //     let intersects = raycaster.intersectObjects( scene.children );
        //     //     console.log(intersects);
        //     //
        //     //     for ( let i = 0; i < intersects.length; i++ ) {
        //     //         intersects[ 0 ].object.material.wireframe=true;
        //     //         intersects[ 0 ].object.material.color=new THREE.Color( "rgb(211,211,211)" );
        //     //
        //     //     }
        //     //
        //     // }
        // })();//鼠标双击选择物体事件

        (function carLoad() {
            THREE.DRACOLoader.setDecoderPath( './libs/draco/gltf/' );
            let loader = new THREE.GLTFLoader();
            loader.setDRACOLoader( new THREE.DRACOLoader() );
            loader.load( 'models/ferrari.glb', function( gltf ) {
                console.log(gltf);
                let materialP = Physijs.createMaterial(
                    new THREE.MeshLambertMaterial({color: 0xff4444, opacity: 0, transparent: true}),
                    .5, // high friction
                    .5 // medium restitution
                );

                // create the car body
                let geom = new THREE.BoxGeometry(4.4*50, 0.5*50, 50);
                body = new Physijs.BoxMesh(geom, materialP, 5000);
                body.add(cameracd);
                // let axesHelper = new THREE.AxesHelper( 10 );
                // body.add( axesHelper );

                gltf.scene.children[0].children[0].children[11].material.visible=true;//汽车玻璃材质修改
                gltf.scene.children[0].children[0].children[11].material.transparent=true;
                gltf.scene.children[0].children[0].children[11].material.opacity=0.3;
                gltf.scene.children[0].children[0].children[11].material.color=new THREE.Color( "rgb(132,253,255)" );
                // console.log( gltf.scene.children[0].children[0]);

                gltf.scene.children[0].children[5].scale.set(50,50,50);//方向盘模型贴图位置调整
                gltf.scene.children[0].children[5].rotateZ(Math.PI / 2);
                gltf.scene.children[0].children[5].translateZ(13.5);
                gltf.scene.children[0].children[5].rotateX(-0.5);
                gltf.scene.children[0].children[5].rotateY(-0.3);
                gltf.scene.children[0].children[5].position.set(-17,21,17);
                // let axesHelper2 = new THREE.AxesHelper( 1000 );
                // gltf.scene.children[0].children[5].add( axesHelper2 );
                body.add(gltf.scene.children[0].children[5]);

                camerad.position.set(-5,30,16);
                camerad.rotateY(Math.PI / 2);
                body.add(camerad);
                // let helper = new THREE.CameraHelper( camerad );
                // scene.add( helper );


                console.log(gltf.scene.children[0].children[0]);
                // gltf.scene.children[0].children[0].visible=false;//控制车身是否可见
                gltf.scene.children[0].children[0].children[17].material = new THREE.MeshStandardMaterial({
                    roughness:0,
                    metalness:0.7,
                    color:new THREE.Color( 'rgb(12,6,141)' )});//控制车身是否可见
                gltf.scene.children[0].children[0].scale.set(50,50,50);//模型贴图位置调整
                gltf.scene.children[0].children[0].rotateZ(Math.PI / 2);
                gltf.scene.children[0].children[0].translateZ(13.5);
                body.add(gltf.scene.children[0].children[0]);
                // console.log(gltf);
                let geom2 = new THREE.BoxGeometry(1.3*50, 0.5*50, 50);
                let bodyt = new Physijs.BoxMesh(geom2, materialP, 0);
                bodyt.position.set(0,25,0);
                body.add(bodyt);
                scene.add(body);

                let wheel_geometry = new THREE.CylinderGeometry(0.36*50, 0.36*50, 0.27*50, 100);
                let wheel1 = new Physijs.CylinderMesh(
                    wheel_geometry,
                    materialP,
                    100
                );
                wheel1.rotation.x = Math.PI / 2;
                // let axesHelper2 = new THREE.AxesHelper( 1000 );
                // wheel1.add( axesHelper2 );
                wheel1.position.set(1.48*50,-0.05*50,-0.8*50);
                gltf.scene.children[0].children[0].scale.set(50,50,50);//模型贴图位置调整
                gltf.scene.children[0].children[0].rotateY(Math.PI / 2);
                gltf.scene.children[0].children[0].translateY(1.7);
                gltf.scene.children[0].children[0].translateX(1);
                gltf.scene.children[0].children[0].translateZ(-0.7);

                // let axesHelper7 = new THREE.AxesHelper( 100000 );
                // axesHelper7.rotateY(Math.PI / 2);
                // gltf.scene.children[0].children[0].add( axesHelper7 );

                wheel1.add(gltf.scene.children[0].children[0]);
                scene.add(wheel1);

                wheel2 = new Physijs.CylinderMesh(
                    wheel_geometry,
                    materialP,
                    100
                );
                wheel2.rotation.x = Math.PI / 2;
                // let axesHelper3 = new THREE.AxesHelper( 1000 );
                // wheel2.add( axesHelper3 );
                wheel2.position.set(1.48*50,-0.05*50,0.8*50);
                gltf.scene.children[0].children[0].scale.set(50,50,50);//模型贴图位置调整
                gltf.scene.children[0].children[0].rotateY(Math.PI / 2);
                gltf.scene.children[0].children[0].translateY(1.7);
                gltf.scene.children[0].children[0].translateZ(1);

                // let axesHelper8 = new THREE.AxesHelper( 100000 );
                // axesHelper8.rotateY(Math.PI / 2);
                // gltf.scene.children[0].children[0].add( axesHelper8 );

                wheel2.add(gltf.scene.children[0].children[0]);
                scene.add(wheel2);

                let wheel3 = new Physijs.CylinderMesh(
                    wheel_geometry,
                    materialP,
                    100
                );
                wheel3.rotation.x = Math.PI / 2;
                // let axesHelper4 = new THREE.AxesHelper( 1000000 );
                // wheel3.add( axesHelper4 );
                wheel3.position.set(-1.15*50,-0.05*50,-0.8*50);
                gltf.scene.children[0].children[0].scale.set(50,50,50);//模型贴图位置调整
                gltf.scene.children[0].children[0].rotateY(-Math.PI / 2);
                gltf.scene.children[0].children[0].translateY(-1);
                gltf.scene.children[0].children[0].translateX(-1);
                gltf.scene.children[0].children[0].translateZ(-1);

                // let axesHelper7 = new THREE.AxesHelper( 100000 );
                // gltf.scene.children[0].children[0].add( axesHelper7 );

                wheel3.add(gltf.scene.children[0].children[0]);
                scene.add(wheel3);

                let wheel4 = new Physijs.CylinderMesh(
                    wheel_geometry,
                    materialP,
                    100
                );
                wheel4.rotation.x = Math.PI / 2;
                // let axesHelper5 = new THREE.AxesHelper( 100000 );
                // wheel4.add( axesHelper5 );
                wheel4.position.set(-1.15*50,-0.05*50,0.8*50);
                gltf.scene.children[0].children[0].scale.set(50,50,50);//模型贴图位置调整
                gltf.scene.children[0].children[0].rotateY(-Math.PI / 2);
                gltf.scene.children[0].children[0].translateY(-1);
                gltf.scene.children[0].children[0].translateZ(1);
                wheel4.add(gltf.scene.children[0].children[0]);
                scene.add(wheel4);


                flConstraint = new Physijs.DOFConstraint(wheel1, body, new THREE.Vector3(1.48*50,-0.05*50,-0.8*50));
                frConstraint = new Physijs.DOFConstraint(wheel2, body, new THREE.Vector3(1.48*50,-0.05*50,0.8*50));
                rlConstraint = new Physijs.DOFConstraint(wheel3, body, new THREE.Vector3(-1.15*50,-0.05*50,-0.8*50));
                rrConstraint = new Physijs.DOFConstraint(wheel4, body, new THREE.Vector3(-1.15*50,-0.05*50,0.8*50));
                scene.addConstraint(rrConstraint);
                scene.addConstraint(flConstraint);
                scene.addConstraint(rlConstraint);
                scene.addConstraint(frConstraint);


                rrConstraint.setAngularLowerLimit({x: 0, y: 0, z: 0.1});
                rrConstraint.setAngularUpperLimit({x: 0, y: 0, z: 0});
                rlConstraint.setAngularLowerLimit({x: 0, y: 0, z: 0.1});
                rlConstraint.setAngularUpperLimit({x: 0, y: 0, z: 0});

                frConstraint.setAngularLowerLimit({x: 0, y: 0, z: 0});
                frConstraint.setAngularUpperLimit({x: 0, y: 0, z: 0});
                flConstraint.setAngularLowerLimit({x: 0, y: 0, z: 0});
                flConstraint.setAngularUpperLimit({x: 0, y: 0, z: 0});

                flConstraint.enableAngularMotor(2);
                frConstraint.enableAngularMotor(2);

            });
        })();//汽车模型载入及动力引擎装配

        (function button() {
            window.addEventListener( 'keydown', onKeyDown, false );
            function onKeyDown(event) {
                if (event.key === ('v' || 'V')) {
                    v++;
                    switch (v%3) {
                        case 1:document.getElementById('tip').innerHTML = '当前视角: 车辆跟随视角';
                        break;
                        case 2:document.getElementById('tip').innerHTML = '当前视角: 驾驶员视角';
                        break;
                        default:document.getElementById('tip').innerHTML = '当前视角: 漫游视角';
                        break;

                    }
                }else  if (event.key === ('w' || 'W')) {
                    // console.log("W按钮被按下");
                    flConstraint.configureAngularMotor(2, 0.1, 0, 80, 40000*3);
                    frConstraint.configureAngularMotor(2, 0.1, 0, 80, 40000*3);

                } else if (event.key === ('s' || 'S')) {
                    // console.log("S按钮被按下");
                    flConstraint.configureAngularMotor(2, 0.1, 0, -70, 40000*2);
                    frConstraint.configureAngularMotor(2, 0.1, 0, -70, 40000*2);
                }else if (event.key === ('a' || 'A')) {
                    // console.log("A按钮被按下");
                    rrConstraint.setAngularLowerLimit({x: 0, y: 0.6, z: 0.1});
                    rrConstraint.setAngularUpperLimit({x: 0, y: 0.6, z: 0});
                    rlConstraint.setAngularLowerLimit({x: 0, y: 0.6, z: 0.1});
                    rlConstraint.setAngularUpperLimit({x: 0, y: 0.6, z: 0});
                }else if (event.key === ('d' || 'D')) {
                    // console.log("D按钮被按下");
                    rrConstraint.setAngularLowerLimit({x: 0, y: -0.6, z: 0.1});
                    rrConstraint.setAngularUpperLimit({x: 0, y: -0.6, z: 0});
                    rlConstraint.setAngularLowerLimit({x: 0, y: -0.6, z: 0.1});
                    rlConstraint.setAngularUpperLimit({x: 0, y: -0.6, z: 0});
                }
                // else if (event.key === 'Shift') {
                //     flConstraint.configureAngularMotor(2, 0.1, 0, 120, 40000*3);
                //     frConstraint.configureAngularMotor(2, 0.1, 0, 120, 40000*3);
                // }
                else if (event.key === ' ') {
                    // console.log("空格按钮被按下");
                    frConstraint.setAngularLowerLimit({x: 0, y: 0, z: 0});
                    frConstraint.setAngularUpperLimit({x: 0, y: 0, z: 0});
                    flConstraint.setAngularLowerLimit({x: 0, y: 0, z: 0});
                    flConstraint.setAngularUpperLimit({x: 0, y: 0, z: 0});
                }
            }
            document.addEventListener( 'keyup', onKeyUp, false );
            function onKeyUp(event)
            {
                if (event.key === ('w'||'W')||event.key ===('s'||'S')) {
                    // console.log("W或S按钮被抬起");
                    flConstraint.configureAngularMotor(2, 0.1, 0, 0, 0);
                    frConstraint.configureAngularMotor(2, 0.1, 0, 0, 0);
                }
                else if (event.key === ('a'||'A')||event.key ===('d'||'D')) {
                    // console.log("A或D按钮被抬起");
                    rrConstraint.setAngularLowerLimit({x: 0, y: 0, z: 0.1});
                    rrConstraint.setAngularUpperLimit({x: 0, y: 0, z: 0});
                    rlConstraint.setAngularLowerLimit({x: 0, y: 0, z: 0.1});
                    rlConstraint.setAngularUpperLimit({x: 0, y: 0, z: 0});
                }
            }

        })();//汽车键盘控制时间


        (function gui() {
            let gui = new dat.GUI();

            gui.add( AmbientLight, 'intensity', 0, 5, 0.01 );
            gui.add( DirectionalLight, 'intensity', 0, 4, 0.01 );
            // gui.add( positionSphere.position, 'x', -700, 400, 0.01 );
            // gui.add( positionSphere.position, 'y', -100, 400, 0.01 );
            // gui.add( positionSphere.position, 'z', -100, 400, 0.01 );
            gui.close();

        })();


    }


    function animate() {

        if(v%3===1)//车顶视角
        {
            if(cars[0]){
                camera.lookAt(cars[0].position); //orbitcontrol替代方案
            }

            // camera.position.x = body.position.x;//相机跟随物体
            // camera.position.z = body.position.z+200;
            // cameracd.lookAt(body.position.x-130,body.position.y,body.position.z);

            requestAnimationFrame( animate );

            let delta = clock.getDelta();
            mixer.update( delta );

            renderer.render( scene, cameracd );
            // labelRenderer.render( scene, cameracd );
            scene.simulate(undefined, 2);
            stats.update();
        }
        else if(v%3===2)//驾驶视角
        {
            // control.update();
            requestAnimationFrame( animate );

            let delta = clock.getDelta();
            mixer.update( delta );

            renderer.render( scene, camerad );
            // labelRenderer.render( scene, camerad );
            scene.simulate(undefined, 2);
            stats.update();
        }
        else //自由视角
        {
            // camera.position.x = cameracd.position.x;
            // camera.position.y = cameracd.position.y;
            // camera.position.z = cameracd.position.z;
            requestAnimationFrame( animate );

            let delta = clock.getDelta();
            mixer.update( delta );

            control.update();

            stats.update();
            renderer.render( scene, camera );
            // labelRenderer.render( scene, camera );
            scene.simulate(undefined, 2);

        }

    }


</script>

</body>
</html>