添加空气墙

public/environments/RoomEnvironment.js

+import { BackSide } from "../constants";
+import { BoxGeometry } from "../geometries/BoxGeometry";
+import { PointLight } from "../lights/PointLight";
+import { MeshBasicMaterial } from "../materials/MeshBasicMaterial";
+import { MeshStandardMaterial } from "../materials/MeshStandardMaterial";
+import { Mesh } from "../objects/Mesh";
+import { Scene } from "../scenes/Scene";
+
+class RoomEnvironment extends Scene {
+
+	constructor() {
+
+		super();
+		const geometry = new BoxGeometry();
+		geometry.deleteAttribute( 'uv' );
+		const roomMaterial = new MeshStandardMaterial( {
+			side: BackSide
+		} );
+		const boxMaterial = new MeshStandardMaterial();
+		const mainLight = new PointLight( 0xffffff, 5.0, 28, 2 );
+		mainLight.position.set( 0.418, 16.199, 0.300 );
+		this.add( mainLight );
+		const room = new Mesh( geometry, roomMaterial );
+		room.position.set( - 0.757, 13.219, 0.717 );
+		room.scale.set( 31.713, 28.305, 28.591 );
+		this.add( room );
+		const box1 = new Mesh( geometry, boxMaterial );
+		box1.position.set( - 10.906, 2.009, 1.846 );
+		box1.rotation.set( 0, - 0.195, 0 );
+		box1.scale.set( 2.328, 7.905, 4.651 );
+		this.add( box1 );
+		const box2 = new Mesh( geometry, boxMaterial );
+		box2.position.set( - 5.607, - 0.754, - 0.758 );
+		box2.rotation.set( 0, 0.994, 0 );
+		box2.scale.set( 1.970, 1.534, 3.955 );
+		this.add( box2 );
+		const box3 = new Mesh( geometry, boxMaterial );
+		box3.position.set( 6.167, 0.857, 7.803 );
+		box3.rotation.set( 0, 0.561, 0 );
+		box3.scale.set( 3.927, 6.285, 3.687 );
+		this.add( box3 );
+		const box4 = new Mesh( geometry, boxMaterial );
+		box4.position.set( - 2.017, 0.018, 6.124 );
+		box4.rotation.set( 0, 0.333, 0 );
+		box4.scale.set( 2.002, 4.566, 2.064 );
+		this.add( box4 );
+		const box5 = new Mesh( geometry, boxMaterial );
+		box5.position.set( 2.291, - 0.756, - 2.621 );
+		box5.rotation.set( 0, - 0.286, 0 );
+		box5.scale.set( 1.546, 1.552, 1.496 );
+		this.add( box5 );
+		const box6 = new Mesh( geometry, boxMaterial );
+		box6.position.set( - 2.193, - 0.369, - 5.547 );
+		box6.rotation.set( 0, 0.516, 0 );
+		box6.scale.set( 3.875, 3.487, 2.986 );
+		this.add( box6 ); // -x right
+
+		const light1 = new Mesh( geometry, createAreaLightMaterial( 50 ) );
+		light1.position.set( - 16.116, 14.37, 8.208 );
+		light1.scale.set( 0.1, 2.428, 2.739 );
+		this.add( light1 ); // -x left
+
+		const light2 = new Mesh( geometry, createAreaLightMaterial( 50 ) );
+		light2.position.set( - 16.109, 18.021, - 8.207 );
+		light2.scale.set( 0.1, 2.425, 2.751 );
+		this.add( light2 ); // +x
+
+		const light3 = new Mesh( geometry, createAreaLightMaterial( 17 ) );
+		light3.position.set( 14.904, 12.198, - 1.832 );
+		light3.scale.set( 0.15, 4.265, 6.331 );
+		this.add( light3 ); // +z
+
+		const light4 = new Mesh( geometry, createAreaLightMaterial( 43 ) );
+		light4.position.set( - 0.462, 8.89, 14.520 );
+		light4.scale.set( 4.38, 5.441, 0.088 );
+		this.add( light4 ); // -z
+
+		const light5 = new Mesh( geometry, createAreaLightMaterial( 20 ) );
+		light5.position.set( 3.235, 11.486, - 12.541 );
+		light5.scale.set( 2.5, 2.0, 0.1 );
+		this.add( light5 ); // +y
+
+		const light6 = new Mesh( geometry, createAreaLightMaterial( 100 ) );
+		light6.position.set( 0.0, 20.0, 0.0 );
+		light6.scale.set( 1.0, 0.1, 1.0 );
+		this.add( light6 );
+
+	}
+
+	dispose() {
+
+		const resources = new Set();
+		this.traverse( object => {
+
+			if ( object.isMesh ) {
+
+				resources.add( object.geometry );
+				resources.add( object.material );
+
+			}
+
+		} );
+
+		for ( const resource of resources ) {
+
+			resource.dispose();
+
+		}
+
+	}
+
+}
+
+function createAreaLightMaterial( intensity ) {
+
+	const material = new MeshBasicMaterial();
+	material.color.setScalar( intensity );
+	return material;
+
+}
+
+export {RoomEnvironment}

public/index.html

@@ -30,7 +30,7 @@
   <script src="bundle.js"></script>
   <script>
     window.addEventListener("load", function () {
-      console.log('load')
+      window.screen.orientation.lock("landscape-primary");
     })
     
   </script>

src/CarScene/index.ts

@@ -8,6 +8,7 @@ import { GLTFLoader } from "../module/loaders/GLTFLoader";
 import { createAmmoTerrainBody, createRigidBodyByThreeObject, createTriangleShapeByGeometry } from "./tools";
 import { MeshBasicMaterial } from "three";
 import Stats from 'three/examples/jsm/libs/stats.module'
+import { RoomEnvironment } from '../module/environment/RoomEnvironment';
 
 function gradTexture(color: [number[], string[]]) {
   var c = document.createElement("canvas");
@@ -107,7 +108,7 @@ export class CarScene extends PerspectiveScene {
     
     this.camera.position.set(20, 20, 20)
     this.camera.far = 400
-    // this.OrbitControlsIns.enabled = false
+    this.OrbitControlsIns.enabled = false
     // this.OrbitControlsIns.enablePan = false
     // this.OrbitControlsIns.enableDamping = true
 
@@ -147,6 +148,10 @@ export class CarScene extends PerspectiveScene {
     reflectionCube.encoding = THREE.sRGBEncoding;
     this.scene.background = reflectionCube;
 
+    // let pmremGenerator = new THREE.PMREMGenerator(this.renderer)
+    // pmremGenerator.compileEquirectangularShader();
+    // this.scene.environment = pmremGenerator.fromScene(new RoomEnvironment(), 0.04).texture;
+
     // this.scene.background = new THREE.Color(0x000a6b)
     // 下面的 fog 雾化 会影响最后成像
     this.scene.fog = new THREE.Fog(0xa0a0a0, 10, 400)
@@ -154,11 +159,10 @@ export class CarScene extends PerspectiveScene {
     const dirLight = this.dirLight = new THREE.DirectionalLight(0xffffff, 1)
     dirLight.castShadow = true
     dirLight.position.set(20, 20, 20)
-    // dirLight.target.position.set(0, 0, 0)
     this.scene.add(dirLight)
     this.scene.add(new THREE.DirectionalLightHelper(dirLight))
 
-    this.scene.add(new THREE.AmbientLight(0xffffff, 0.6))
+    this.scene.add(new THREE.AmbientLight(0xcccccc, 1))
 
     dirLight.castShadow = true
     console.log(dirLight.shadow)
@@ -188,7 +192,10 @@ export class CarScene extends PerspectiveScene {
     this.scene.add(new THREE.AxesHelper(100))
     this.scene.add(new THREE.GridHelper(100, 20))
 
-    // let imgTexture = new THREE.TextureLoader().load('http://qnpic.top/yoona2.jpg')
+    let imgTexture = new THREE.TextureLoader().load('judgeLineMap.png')
+    // @ts-ignore
+    window['imgTexture'] = imgTexture
+    console.log('=======imgTexture=======', imgTexture, imgTexture.image)
     // imgTexture.wrapS = imgTexture.wrapT = THREE.RepeatWrapping;
     // imgTexture.encoding = THREE.sRGBEncoding;
     // imgTexture.anisotropy = 16;
@@ -210,13 +217,55 @@ export class CarScene extends PerspectiveScene {
 
   }
 
+  addMapWall() {
+    const wallList: {
+      rotationDeg: number,
+      pos: THREE.Vector3
+    }[] = [
+      {
+        rotationDeg: 0,
+        pos: new THREE.Vector3(0, 10, 80)
+      },
+      {
+        rotationDeg: Math.PI / 2,
+        pos: new THREE.Vector3(-80, 10, 0)
+      },
+      {
+        rotationDeg: 0,
+        pos: new THREE.Vector3(0, 10, -80)
+      },
+      {
+        rotationDeg: Math.PI / 2,
+        pos: new THREE.Vector3(80, 10, 0)
+      }
+    ]
+
+    for (let config of wallList) {
+      const wall = new THREE.Mesh(
+        new THREE.BoxGeometry(196, 20),
+        new THREE.MeshBasicMaterial({
+          wireframe: false,
+          opacity: 0,
+        })
+      )
+      wall.visible = false
+      wall.quaternion.copy(
+        new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(0, 1, 0), config.rotationDeg)
+      )
+      wall.position.copy(config.pos)
+      // this.scene.add(
+      //   wall
+      // )
+      this.ammoPhysicWorld.addMesh(wall)
+    }
+
+  }
+
   ammoPhysicWorld: AmmoPhysicWorld
   initAmmoPhySicWorld() {
     this.ammoPhysicWorld = new AmmoPhysicWorld()
-
     console.log(this.ammoPhysicWorld)
-    
-    
+    this.addMapWall()
     
     interface GltfModel {
       animations: THREE.AnimationClip[],
@@ -240,8 +289,6 @@ export class CarScene extends PerspectiveScene {
               scaleNum: 200
             }
           ))
-          // @ts-ignore
-          window['qigan11'] = obj
         } else if (obj.name === 'shamo' && (obj as THREE.Mesh).isMesh) {
           terrainMesh = obj as THREE.Mesh
         } else if (obj.name === 'shitou') {
@@ -255,6 +302,8 @@ export class CarScene extends PerspectiveScene {
           ))
         } else if (obj.name.startsWith('qimian')) {
           obj.castShadow = true
+        } else if (obj.name.startsWith('cao')) {
+          // obj.castShadow = true
         }
       })
 
@@ -264,6 +313,8 @@ export class CarScene extends PerspectiveScene {
         terrainMesh.receiveShadow = true
         // @ts-ignore
         terrainMesh.material.side = THREE.FrontSide
+        // @ts-ignore
+        // terrainMesh.material.wireframe = true
       }
 
       // 旗子动画
@@ -295,29 +346,29 @@ export class CarScene extends PerspectiveScene {
       this.ammoPhysicWorld.addDynamicBody(vehicleIns)
       // @ts-ignore
       window['vehicleIns'] = vehicleIns
-      this.dirLight.target = vehicleIns.chassisMesh
-
-      const planeGeometry = new THREE.BoxGeometry(100, 2, 100)
-      // planeGeometry.rotateX( - Math.PI / 2 ); // 这里加了旋转矩阵 物理世界 记得要转换一下
-      const planeMesh = new THREE.Mesh(planeGeometry, new THREE.MeshPhongMaterial({
-        color: 0xffffff,
-        side: THREE.DoubleSide,
-        // wireframe: true
-      }))
-      planeMesh.receiveShadow = true
-      planeMesh.position.y = -1
-      this.scene.add(planeMesh)
-      this.ammoPhysicWorld.addMesh(planeMesh, {
-        friction: 10,
-        restitution: 0.1,
-        mass: 0
-      })
-      this.ammoPhysicWorld.addRigidBodyWithMeshObj(createRigidBodyByThreeObject(
-        planeMesh,
-        {
-          mass: 0
-        }
-      ))
+      this.dirLight && (this.dirLight.target = vehicleIns.chassisMesh)
+
+      // const planeGeometry = new THREE.BoxGeometry(100, 2, 100)
+      // // planeGeometry.rotateX( - Math.PI / 2 ); // 这里加了旋转矩阵 物理世界 记得要转换一下
+      // const planeMesh = new THREE.Mesh(planeGeometry, new THREE.MeshPhongMaterial({
+      //   color: 0xffffff,
+      //   side: THREE.DoubleSide,
+      //   // wireframe: true
+      // }))
+      // planeMesh.receiveShadow = true
+      // planeMesh.position.y = -1
+      // this.scene.add(planeMesh)
+      // this.ammoPhysicWorld.addMesh(planeMesh, {
+      //   friction: 10,
+      //   restitution: 0.1,
+      //   mass: 0
+      // })
+      // this.ammoPhysicWorld.addRigidBodyWithMeshObj(createRigidBodyByThreeObject(
+      //   planeMesh,
+      //   {
+      //     mass: 0
+      //   }
+      // ))
 
       // 下面是测试模型数据
       const boxGeometry = new THREE.BoxGeometry(1,1,1, 10, 10, 10)
@@ -627,17 +678,18 @@ export class CarScene extends PerspectiveScene {
     if (this.vehicleIns && !this.OrbitControlsIns.enabled) {
       const carPosition = this.vehicleIns.chassisMesh.position
       // 跟随 Car
-      _defaultVector3.set(0, 10, -25)
+      _defaultVector3.set(0, 5, -15)
       // const m3 = new THREE.Matrix3()
       // relativeCameraOffset.applyMatrix3(m3.setFromMatrix4(this.vehicleIns.chassisMesh.matrixWorld))
       _defaultVector3.applyMatrix4(this.vehicleIns.chassisMesh.matrixWorld)
+      _defaultVector3.y = this.vehicleIns.chassisMesh.position.y + 5
       this.camera.position.lerp(_defaultVector3, 0.1)
       // this.camera.position.copy(_defaultVector3)
       this.camera.lookAt(carPosition)
 
       
     }
-    if (this.vehicleIns) {
+    if (this.vehicleIns && this.dirLight) {
       const carPosition = this.vehicleIns.chassisMesh.position
       _defaultVector3.set(10, 10, 10)
       _defaultVector3.addVectors(_defaultVector3, carPosition)

src/CarScene/vehicle.ts

@@ -83,7 +83,7 @@ export class Vehicle extends THREE.Object3D{
     // Vehicle contants
     // classis 底盘
     var chassisWidth = 1.8;
-    var chassisHeight = .6;
+    var chassisHeight = 1;
     var chassisLength = 4;
     var massVehicle = 800;
 
@@ -103,10 +103,10 @@ export class Vehicle extends THREE.Object3D{
     body.setActivationState(4);
 
     var chassisMesh = this.chassisMesh = this.createChassisMesh(chassisWidth, chassisHeight, chassisLength);
-    GLTFLoaderIns.load('qiche.gltf', (gltf: GltfModel) => {
+    GLTFLoaderIns.load('qiche_V6.gltf', (gltf: GltfModel) => {
       chassisMesh.add(gltf.scene)
       gltf.scene.visible = !VehicleDebugConfig.debugger
-      gltf.scene.translateY(-0.6)
+      gltf.scene.translateY(-1)
 
       gltf.scene.traverse(function(obj) {
         // @ts-ignore
@@ -346,11 +346,11 @@ export class Vehicle extends THREE.Object3D{
     var wheelRadiusBack = .4;
     var wheelWidthBack = .3;
     var wheelHalfTrackBack = 0.8;
-    var wheelAxisHeightBack = .3;
+    var wheelAxisHeightBack = 0;
 
     var wheelAxisFrontPosition = 1.5;
     var wheelHalfTrackFront = 0.8;
-    var wheelAxisHeightFront = .3;
+    var wheelAxisHeightFront = 0;
     var wheelRadiusFront = .35;
     var wheelWidthFront = 0.2;
 
@@ -412,7 +412,7 @@ export class Vehicle extends THREE.Object3D{
     const turnLeft = this.actions.left || KeyBoardStateStore.isPressed('a')
 
     if (!isAccelerating && !isBreaking && speed !== 0) {
-      if (Math.abs(speed) < 0.02) {
+      if (Math.abs(speed) < 0.2) {
         speed = 0
       } else {
         if (speed > 0) {

src/module/PerspectiveScene.ts

@@ -3,7 +3,8 @@ import {
   PCFShadowMap,
   PerspectiveCamera,
   Scene,
-  WebGLRenderer
+  WebGLRenderer,
+  sRGBEncoding
 } from 'three'
 import { EventDispatcher } from './EventDispatcher';
 import { OrbitControls } from './OrbitControls/index';
@@ -68,6 +69,7 @@ export class PerspectiveScene extends EventDispatcher<EVENTS_ENUM> {
     // _renderer.shadowMap.type = PCFShadowMap
     _renderer.setSize(window.innerWidth, window.innerHeight)
     _renderer.setPixelRatio(window.devicePixelRatio)
+    _renderer.outputEncoding = sRGBEncoding;
     document.body.appendChild(_renderer.domElement)
 
   }

src/module/environment/RoomEnvironment.ts

+// @ts-nocheck
+
+import {
+  Scene,
+  BoxGeometry,
+  MeshBasicMaterial,
+  MeshStandardMaterial,
+  BackSide,
+  PointLight,
+  Mesh
+} from 'three'
+
+class RoomEnvironment extends Scene {
+
+	constructor() {
+
+		super();
+		const geometry = new BoxGeometry();
+		geometry.deleteAttribute( 'uv' );
+		const roomMaterial = new MeshStandardMaterial( {
+			side: BackSide
+		} );
+		const boxMaterial = new MeshStandardMaterial();
+		const mainLight = new PointLight( 0xffffff, 5.0, 28, 2 );
+		mainLight.position.set( 0.418, 16.199, 0.300 );
+		this.add( mainLight );
+		const room = new Mesh( geometry, roomMaterial );
+		room.position.set( - 0.757, 13.219, 0.717 );
+		room.scale.set( 31.713, 28.305, 28.591 );
+		this.add( room );
+		const box1 = new Mesh( geometry, boxMaterial );
+		box1.position.set( - 10.906, 2.009, 1.846 );
+		box1.rotation.set( 0, - 0.195, 0 );
+		box1.scale.set( 2.328, 7.905, 4.651 );
+		this.add( box1 );
+		const box2 = new Mesh( geometry, boxMaterial );
+		box2.position.set( - 5.607, - 0.754, - 0.758 );
+		box2.rotation.set( 0, 0.994, 0 );
+		box2.scale.set( 1.970, 1.534, 3.955 );
+		this.add( box2 );
+		const box3 = new Mesh( geometry, boxMaterial );
+		box3.position.set( 6.167, 0.857, 7.803 );
+		box3.rotation.set( 0, 0.561, 0 );
+		box3.scale.set( 3.927, 6.285, 3.687 );
+		this.add( box3 );
+		const box4 = new Mesh( geometry, boxMaterial );
+		box4.position.set( - 2.017, 0.018, 6.124 );
+		box4.rotation.set( 0, 0.333, 0 );
+		box4.scale.set( 2.002, 4.566, 2.064 );
+		this.add( box4 );
+		const box5 = new Mesh( geometry, boxMaterial );
+		box5.position.set( 2.291, - 0.756, - 2.621 );
+		box5.rotation.set( 0, - 0.286, 0 );
+		box5.scale.set( 1.546, 1.552, 1.496 );
+		this.add( box5 );
+		const box6 = new Mesh( geometry, boxMaterial );
+		box6.position.set( - 2.193, - 0.369, - 5.547 );
+		box6.rotation.set( 0, 0.516, 0 );
+		box6.scale.set( 3.875, 3.487, 2.986 );
+		this.add( box6 ); // -x right
+
+		const light1 = new Mesh( geometry, createAreaLightMaterial( 50 ) );
+		light1.position.set( - 16.116, 14.37, 8.208 );
+		light1.scale.set( 0.1, 2.428, 2.739 );
+		this.add( light1 ); // -x left
+
+		const light2 = new Mesh( geometry, createAreaLightMaterial( 50 ) );
+		light2.position.set( - 16.109, 18.021, - 8.207 );
+		light2.scale.set( 0.1, 2.425, 2.751 );
+		this.add( light2 ); // +x
+
+		const light3 = new Mesh( geometry, createAreaLightMaterial( 17 ) );
+		light3.position.set( 14.904, 12.198, - 1.832 );
+		light3.scale.set( 0.15, 4.265, 6.331 );
+		this.add( light3 ); // +z
+
+		const light4 = new Mesh( geometry, createAreaLightMaterial( 43 ) );
+		light4.position.set( - 0.462, 8.89, 14.520 );
+		light4.scale.set( 4.38, 5.441, 0.088 );
+		this.add( light4 ); // -z
+
+		const light5 = new Mesh( geometry, createAreaLightMaterial( 20 ) );
+		light5.position.set( 3.235, 11.486, - 12.541 );
+		light5.scale.set( 2.5, 2.0, 0.1 );
+		this.add( light5 ); // +y
+
+		const light6 = new Mesh( geometry, createAreaLightMaterial( 100 ) );
+		light6.position.set( 0.0, 20.0, 0.0 );
+		light6.scale.set( 1.0, 0.1, 1.0 );
+		this.add( light6 );
+
+	}
+
+	dispose() {
+
+		const resources = new Set();
+		this.traverse( object => {
+
+			if ( object.isMesh ) {
+
+				resources.add( object.geometry );
+				resources.add( object.material );
+
+			}
+
+		} );
+
+		for ( const resource of resources ) {
+
+			resource.dispose();
+
+		}
+
+	}
+
+}
+
+function createAreaLightMaterial( intensity ) {
+
+	const material = new MeshBasicMaterial();
+	material.color.setScalar( intensity );
+	return material;
+
+}
+
+export {RoomEnvironment}
\ No newline at end of file