Skip to content

T
ThreeJsLesson
Commit 27d4b17d authored by Master Q's avatar Master Q
Browse files
Options

dom 操作添加

parent 0ea1b78f
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1128 additions and 454 deletions
index.html
View file @ 27d4b17d
...@@ -99,13 +99,16 @@ ...@@ -99,13 +99,16 @@
height: 375px !important; height: 375px !important;
display: block; */ display: block; */
/* transform: rotate(90deg); /* transform: rotate(90deg);
transform-origin: center center; */ transform-origin: calc(100vw / 2) calc(100vw / 2); */
} }
</style> </style>
<script src="//yun.duiba.com.cn/aurora/assets/4723050c150b41f362ecf483e9cf98eb31c4a15b.js"></script> <script src="//yun.duiba.com.cn/aurora/assets/4723050c150b41f362ecf483e9cf98eb31c4a15b.js"></script>
</head> </head>
<body> <body>
<canvas id="stage"></canvas> <div class="ss">
<canvas id="stage"></canvas>
</div>
<div id="test"></div>
<script type="importmap"> <script type="importmap">
{ {
"imports": { "imports": {
...@@ -124,11 +127,9 @@ ...@@ -124,11 +127,9 @@
window['hideLoading'] = function() { window['hideLoading'] = function() {
document.querySelector('.load-container').style.display = 'none' document.querySelector('.load-container').style.display = 'none'
} }
console.log(Ammo)
Ammo().then(() => { const dome = document.getElementById('stage')
const dome = document.getElementById('stage') new StageScene(dome)
new StageScene(dome)
})
}) })
</script> </script>
......
output.js
View file @ 27d4b17d
This diff is collapsed.
output.js.map
View file @ 27d4b17d
This diff is collapsed.
package.json
View file @ 27d4b17d
...@@ -6,6 +6,7 @@ ...@@ -6,6 +6,7 @@
"scripts": { "scripts": {
"dev": "node ./scripts/devServer -p 9016", "dev": "node ./scripts/devServer -p 9016",
"build": "webpack --config webpack.prod.js", "build": "webpack --config webpack.prod.js",
"flushRes": "node scripts/flushRes",
"handleRes": "node scripts/delRel && node scripts/copyRes && node scripts/imageMin", "handleRes": "node scripts/delRel && node scripts/copyRes && node scripts/imageMin",
"upload": "node scripts/upload", "upload": "node scripts/upload",
"prod": "npm run handleRes && npm run upload && npm run buildTS", "prod": "npm run handleRes && npm run upload && npm run buildTS",
......
resource/res.json
View file @ 27d4b17d
{ {
"groups": [ "groups": [
{
"keys": "brake-icon.png,camera-icon.png,engine-icon.png,left-icon.png,reset-icon.png,right-icon.png",
"name": "UI"
},
{ {
"keys": "luntai.gltf,qiche_V6.gltf,shamo_V10.gltf", "keys": "luntai.gltf,qiche_V6.gltf,shamo_V10.gltf",
"name": "gltf" "name": "gltf"
......
src/CarScene/GameConfig.ts 0 → 100644
View file @ 27d4b17d
import * as THREE from 'three'
const _v3 = new THREE.Vector3()
export const GameConfig = {
h: 8,
helperDebuger: false,
collisionDebuger: false,
initVehiclePos: new THREE.Vector3(0, 3, 0),
CameraPosConfig: (function() {
let posList = [
0, 8, -20,
0, 20, -16
]
const posListLen = posList.length / 3
let i = 0
return {
change() {
_v3.set(posList[i * 3], posList[i * 3 + 1], posList[i * 3 + 2])
i = (++i) % posListLen
return _v3
}
}
})()
}
\ No newline at end of file
src/CarScene/dom.ts 0 → 100644
View file @ 27d4b17d
type CreateElementProps = Partial<{
attrs: Record<string, string>,
styles: Partial<CSSStyleDeclaration>,
events: Partial<Record<keyof WindowEventMap, {
callback: (this: HTMLObjectElement) => any,
options?: boolean | AddEventListenerOptions
}>>
}>
export const Dom = new Proxy(({} as Record<keyof HTMLElementTagNameMap, (p: CreateElementProps, ...children: HTMLObjectElement[] | string[]) => HTMLObjectElement>), {
get(target, property: keyof HTMLElementTagNameMap) {
return function(props:CreateElementProps = {}, ...children: HTMLObjectElement[] | string[]) {
const el = document.createElement(property);
const attrs = props.attrs
const styles = props.styles
const events = props.events
if (
attrs
) {
for (let prop in attrs) {
el.setAttribute(prop, attrs[prop]);
}
}
if (styles) {
for (let k in styles) {
el.style[k] = styles[k]
}
}
if (
events
) {
for (let eventName in events) {
const cfg = events[eventName as keyof WindowEventMap]
el.addEventListener(eventName, cfg.callback, cfg.options)
}
}
for (let child of children) {
if (typeof child === 'string') {
console.log('child')
// @ts-ignore
child = document.createTextNode(child);
}
// @ts-ignore
child && el.appendChild(child);
}
return el;
}
}
});
\ No newline at end of file
src/CarScene/index.ts
View file @ 27d4b17d
This diff is collapsed.
src/CarScene/vehicle.ts
View file @ 27d4b17d
...@@ -64,10 +64,11 @@ export class Vehicle extends PreloadGroup{ ...@@ -64,10 +64,11 @@ export class Vehicle extends PreloadGroup{
chassisRidigBody: Ammo.btRigidBody chassisRidigBody: Ammo.btRigidBody
raycastVehicle: Ammo.btRaycastVehicle raycastVehicle: Ammo.btRaycastVehicle
btVehicleTuning: Ammo.btVehicleTuning btVehicleTuning: Ammo.btVehicleTuning
sppedBoard: HTMLElement // 速度面板
luntaiIns: GltfModel // 轮胎模型 luntaiIns: GltfModel // 轮胎模型
speedNum: number
constructor(pos: THREE.Vector3, quat: THREE.Quaternion) { constructor(pos: THREE.Vector3, quat: THREE.Quaternion) {
super() super()
...@@ -122,142 +123,6 @@ export class Vehicle extends PreloadGroup{ ...@@ -122,142 +123,6 @@ export class Vehicle extends PreloadGroup{
// new THREE.BoxGeometry(1, 1, 1), // new THREE.BoxGeometry(1, 1, 1),
// materialDynamic // materialDynamic
// )) // ))
this.sppedBoard = createElement('div', 'speedboard', {
position: 'fixed',
backgroundColor: 'yellow',
padding: '3px 20px',
left: "0px",
bottom: "0px"
})
createElement('div', 'left', {
position: 'fixed',
width: '80px',
height: '80px',
backgroundColor: 'blue',
left: '30px',
bottom: '30px'
}, {
mousedown: () => {
this.doAction('left')
},
mouseup: () => {
this.cancelAction('left')
},
touchstart: (e) => {
const target = e.target as HTMLElement & {
touchColor: string,
originColor: string
}
target.style.backgroundColor = target.touchColor
this.doAction('left')
},
touchend: (e) => {
const target = e.target as HTMLElement & {
touchColor: string,
originColor: string
}
target.style.backgroundColor = target.originColor
this.cancelAction('left')
}
})
createElement('div', 'right', {
position: 'fixed',
width: '80px',
height: '80px',
backgroundColor: 'blue',
left: '130px',
bottom: '30px'
}, {
mousedown: () => {
this.doAction('right')
},
mouseup: () => {
this.cancelAction('right')
},
touchstart: (e) => {
const target = e.target as HTMLElement & {
touchColor: string,
originColor: string
}
target.style.backgroundColor = target.touchColor
this.doAction('right')
},
touchend: (e) => {
const target = e.target as HTMLElement & {
touchColor: string,
originColor: string
}
target.style.backgroundColor = target.originColor
this.cancelAction('right')
}
})
createElement('div', 'acceleration', {
position: 'fixed',
width: '80px',
height: '80px',
backgroundColor: 'blue',
right: '130px',
bottom: '30px'
}, {
mousedown: () => {
this.doAction('acceleration')
},
mouseup: () => {
this.cancelAction('acceleration')
},
touchstart: (e) => {
const target = e.target as HTMLElement & {
touchColor: string,
originColor: string
}
target.style.backgroundColor = target.touchColor
this.doAction('acceleration')
},
touchend: (e) => {
const target = e.target as HTMLElement & {
touchColor: string,
originColor: string
}
target.style.backgroundColor = target.originColor
this.cancelAction('acceleration')
}
})
createElement('div', 'braking', {
position: 'fixed',
width: '80px',
height: '80px',
backgroundColor: 'blue',
right: '30px',
bottom: '30px'
}, {
mousedown: () => {
this.doAction('braking')
},
mouseup: () => {
this.cancelAction('braking')
},
touchstart: (e) => {
const target = e.target as HTMLElement & {
touchColor: string,
originColor: string
}
target.style.backgroundColor = target.touchColor
this.doAction('braking')
},
touchend: (e) => {
const target = e.target as HTMLElement & {
touchColor: string,
originColor: string
}
target.style.backgroundColor = target.originColor
this.cancelAction('braking')
}
})
} }
...@@ -301,10 +166,10 @@ export class Vehicle extends PreloadGroup{ ...@@ -301,10 +166,10 @@ export class Vehicle extends PreloadGroup{
wheelInfo.set_m_rollInfluence(rollInfluence); wheelInfo.set_m_rollInfluence(rollInfluence);
this.wheelMeshes[index] = this.createWheelMesh(radius, width); this.wheelMeshes[index] = this.createWheelMesh(radius, width, pos);
} }
createWheelMesh = (radius: number, width: number) => { createWheelMesh = (radius: number, width: number, pos: Ammo.btVector3) => {
const group = new THREE.Group() const group = new THREE.Group()
var t = new THREE.CylinderGeometry(radius, radius, width, 24, 1); var t = new THREE.CylinderGeometry(radius, radius, width, 24, 1);
t.rotateZ(Math.PI / 2); t.rotateZ(Math.PI / 2);
...@@ -317,6 +182,7 @@ export class Vehicle extends PreloadGroup{ ...@@ -317,6 +182,7 @@ export class Vehicle extends PreloadGroup{
luntai.visible = !VehicleDebugConfig.debugger luntai.visible = !VehicleDebugConfig.debugger
group.add(luntai) group.add(luntai)
this.add(group) this.add(group)
group.position.set(pos.x(), pos.y(), pos.z())
return group; return group;
} }
...@@ -396,9 +262,8 @@ export class Vehicle extends PreloadGroup{ ...@@ -396,9 +262,8 @@ export class Vehicle extends PreloadGroup{
const tuning = this.btVehicleTuning const tuning = this.btVehicleTuning
// vehicle.updateFriction(delta) // vehicle.updateFriction(delta)
var speed = vehicle.getCurrentSpeedKmHour(); // 记录当前速度
const speed = this.speedNum = vehicle.getCurrentSpeedKmHour();
this.sppedBoard.innerHTML = (speed < 0 ? '(R) ' : '') + Math.abs(speed).toFixed(1) + ' km/h';
let breakingForce = 0; let breakingForce = 0;
let engineForce = 0; let engineForce = 0;
......
src/ResJson.ts
View file @ 27d4b17d
export const ResJson = { export const ResJson = {
"groups": [ "groups": [
{
"keys": "brake-icon.png,camera-icon.png,engine-icon.png,left-icon.png,reset-icon.png,right-icon.png",
"name": "UI"
},
{ {
"keys": "luntai.gltf,qiche_V6.gltf,shamo_V10.gltf", "keys": "luntai.gltf,qiche_V6.gltf,shamo_V10.gltf",
"name": "gltf" "name": "gltf"
......
src/index.ts
View file @ 27d4b17d
...@@ -2,20 +2,43 @@ import { CarScene } from "./CarScene" ...@@ -2,20 +2,43 @@ import { CarScene } from "./CarScene"
import * as THREE from 'three' import * as THREE from 'three'
import { RES } from "./module/RES" import { RES } from "./module/RES"
import { ResJson } from "./ResJson" import { ResJson } from "./ResJson"
import { EventDispatcher } from "./module/EventDispatcher"
window['THREE'] = THREE window['THREE'] = THREE
export class StageScene { export class StageScene {
renderDom: HTMLCanvasElement
stage: CarScene
UIParentNode: HTMLElement
constructor( constructor(
canvas?: HTMLCanvasElement canvas: HTMLCanvasElement,
UIParentNode: HTMLElement
) { ) {
this.initStage(canvas) this.renderDom = canvas
this.UIParentNode = UIParentNode
this.initStage()
} }
async initStage(dom?: HTMLCanvasElement) { async initStage() {
RES.loadConfig(ResJson) RES.loadConfig(ResJson)
new CarScene(dom) // @ts-ignore
Ammo().then(() => {
this.stage = new CarScene(this.renderDom, this.UIParentNode)
})
} }
}
\ No newline at end of file destroy() {
this.stage.destroy()
}
}
type GDType = {
'orientationChange': {
isPortrait: boolean // 是否是竖屏
}
}
export const GDispather = new EventDispatcher<keyof GDType>()
\ No newline at end of file
src/module/EventDispatcher.ts
View file @ 27d4b17d
...@@ -3,7 +3,6 @@ type EventCall<T extends any> = (e?: { ...@@ -3,7 +3,6 @@ type EventCall<T extends any> = (e?: {
data: any data: any
}, ...arg1: any[]) => any }, ...arg1: any[]) => any
export class EventDispatcher<EventsKeyName extends string = string> { export class EventDispatcher<EventsKeyName extends string = string> {
private listeners: { private listeners: {
[key in EventsKeyName]?: { [key in EventsKeyName]?: {
...@@ -42,6 +41,10 @@ export class EventDispatcher<EventsKeyName extends string = string> { ...@@ -42,6 +41,10 @@ export class EventDispatcher<EventsKeyName extends string = string> {
// } // }
} }
removeAllEventListener() {
this.listeners = Object.create(null)
}
onceEventListener(type: EventsKeyName, listener: EventCall<EventsKeyName>, context?: any) { onceEventListener(type: EventsKeyName, listener: EventCall<EventsKeyName>, context?: any) {
const once = (...args: any[]) => { const once = (...args: any[]) => {
listener.apply(context, args) listener.apply(context, args)
...@@ -54,7 +57,8 @@ export class EventDispatcher<EventsKeyName extends string = string> { ...@@ -54,7 +57,8 @@ export class EventDispatcher<EventsKeyName extends string = string> {
if (!this.listeners[type]) { if (!this.listeners[type]) {
return return
} }
this.listeners[type]!.forEach(item => { const array = this.listeners[type].slice(0)
array.forEach(item => {
const { const {
listener, listener,
context context
......
src/module/NewEventDispatcher.ts 0 → 100644
View file @ 27d4b17d
// type BaseEventMap = {
// [eventName: string]: any
// }
// type BaseEvent = {
// type: string
// }
// type AddRecordArgs2<T extends Record<string, any>, E extends >
// /**
// * Event object.
// */
// export interface Event extends BaseEvent {
// target?: any;
// [attachment: string]: any;
// }
// export class NewEventDispatcher<E extends BaseEventMap> {
// }
\ No newline at end of file
src/module/PerspectiveScene.ts
View file @ 27d4b17d
...@@ -100,11 +100,9 @@ export class PerspectiveScene extends ScenePreloadGroup { ...@@ -100,11 +100,9 @@ export class PerspectiveScene extends ScenePreloadGroup {
// _renderer.shadowMap.enabled = true // _renderer.shadowMap.enabled = true
// _renderer.shadowMap.type = PCFShadowMap // _renderer.shadowMap.type = PCFShadowMap
_renderer.setSize(window.innerWidth, window.innerHeight) _renderer.setSize(window.innerWidth, window.innerHeight)
// this.camera.updateProjectionMatrix()
// _renderer.setViewport(0, 0, 812, 375)
_renderer.setPixelRatio(window.devicePixelRatio) _renderer.setPixelRatio(window.devicePixelRatio)
_renderer.outputEncoding = sRGBEncoding; _renderer.outputEncoding = sRGBEncoding;
document.body.appendChild(_renderer.domElement) // document.body.appendChild(_renderer.domElement)
} }
...@@ -123,7 +121,7 @@ export class PerspectiveScene extends ScenePreloadGroup { ...@@ -123,7 +121,7 @@ export class PerspectiveScene extends ScenePreloadGroup {
/** /**
* 清除事件 * 清除事件
*/ */
private removeEvents() { private __removeEvents() {
window.removeEventListener('resize', this.onWindowResize) window.removeEventListener('resize', this.onWindowResize)
} }
...@@ -137,6 +135,7 @@ export class PerspectiveScene extends ScenePreloadGroup { ...@@ -137,6 +135,7 @@ export class PerspectiveScene extends ScenePreloadGroup {
this.renderer.setSize(window.innerWidth, window.innerHeight) this.renderer.setSize(window.innerWidth, window.innerHeight)
} }
requestId: number
/** /**
* 帧循环 * 帧循环
*/ */
...@@ -149,6 +148,12 @@ export class PerspectiveScene extends ScenePreloadGroup { ...@@ -149,6 +148,12 @@ export class PerspectiveScene extends ScenePreloadGroup {
// frame rander // frame rander
this.renderer.render(this.scene, this.camera) this.renderer.render(this.scene, this.camera)
this.OrbitControlsIns.update() this.OrbitControlsIns.update()
requestAnimationFrame(this.frameLoop.bind(this)) this.requestId = requestAnimationFrame(this.frameLoop.bind(this))
}
destroy() {
cancelAnimationFrame(this.requestId)
this.__removeEvents()
this.removeAllEventListener()
} }
} }
\ No newline at end of file
src/module/RES.ts
View file @ 27d4b17d
...@@ -455,7 +455,7 @@ export namespace RES { ...@@ -455,7 +455,7 @@ export namespace RES {
* @param str * @param str
* @return 已加载好得素材或null * @return 已加载好得素材或null
*/ */
export function getRes(str: `${string}.${'png' | 'jpg' | 'gltf'}`)/*: Texture | VideoEntity*/ { export function getRes(str: `${string}.${'png' | 'jpg' | 'gltf'}` | string)/*: Texture | VideoEntity*/ {
if (!str) return null; if (!str) return null;
var type = str.substring(str.lastIndexOf(".") + 1, str.length); var type = str.substring(str.lastIndexOf(".") + 1, str.length);
if (type == "png" || type == "jpg") { if (type == "png" || type == "jpg") {
......
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