Skip to content

T
ThreeJsLesson
Commit 4ce8cf29 authored by Master Q's avatar Master Q
Browse files
Options

添加空气墙

parent 311081b3
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 18706 additions and 42 deletions
public/environments/RoomEnvironment.js 0 → 100644
View file @ 4ce8cf29
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
View file @ 4ce8cf29
......@@ -30,7 +30,7 @@
<script src="bundle.js"></script>
<script>
window.addEventListener("load", function () {
console.log('load')
window.screen.orientation.lock("landscape-primary");
})
</script>
......
public/qiche_V5.gltf 0 → 100644
View file @ 4ce8cf29
This diff is collapsed.
public/qiche_V6.gltf 0 → 100644
View file @ 4ce8cf29
This diff is collapsed.
src/CarScene/index.ts
View file @ 4ce8cf29
......@@ -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
View file @ 4ce8cf29
......@@ -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
View file @ 4ce8cf29
......@@ -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 0 → 100644
View file @ 4ce8cf29
// @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
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment