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 @@
height: 375px !important;
display: block; */
/* transform: rotate(90deg);
transform-origin: center center; */
transform-origin: calc(100vw / 2) calc(100vw / 2); */
}
</style>
<script src="//yun.duiba.com.cn/aurora/assets/4723050c150b41f362ecf483e9cf98eb31c4a15b.js"></script>
</head>
<body>
<canvas id="stage"></canvas>
<div class="ss">
<canvas id="stage"></canvas>
</div>
<div id="test"></div>
<script type="importmap">
{
"imports": {
......@@ -124,11 +127,9 @@
window['hideLoading'] = function() {
document.querySelector('.load-container').style.display = 'none'
}
Ammo().then(() => {
const dome = document.getElementById('stage')
new StageScene(dome)
})
console.log(Ammo)
const dome = document.getElementById('stage')
new StageScene(dome)
})
</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 @@
"scripts": {
"dev": "node ./scripts/devServer -p 9016",
"build": "webpack --config webpack.prod.js",
"flushRes": "node scripts/flushRes",
"handleRes": "node scripts/delRel && node scripts/copyRes && node scripts/imageMin",
"upload": "node scripts/upload",
"prod": "npm run handleRes && npm run upload && npm run buildTS",
......
resource/res.json
View file @ 27d4b17d
{
"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",
"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{
chassisRidigBody: Ammo.btRigidBody
raycastVehicle: Ammo.btRaycastVehicle
btVehicleTuning: Ammo.btVehicleTuning
sppedBoard: HTMLElement // 速度面板
luntaiIns: GltfModel // 轮胎模型
speedNum: number
constructor(pos: THREE.Vector3, quat: THREE.Quaternion) {
super()
......@@ -122,142 +123,6 @@ export class Vehicle extends PreloadGroup{
// new THREE.BoxGeometry(1, 1, 1),
// 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{
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()
var t = new THREE.CylinderGeometry(radius, radius, width, 24, 1);
t.rotateZ(Math.PI / 2);
......@@ -317,6 +182,7 @@ export class Vehicle extends PreloadGroup{
luntai.visible = !VehicleDebugConfig.debugger
group.add(luntai)
this.add(group)
group.position.set(pos.x(), pos.y(), pos.z())
return group;
}
......@@ -396,9 +262,8 @@ export class Vehicle extends PreloadGroup{
const tuning = this.btVehicleTuning
// vehicle.updateFriction(delta)
var speed = vehicle.getCurrentSpeedKmHour();
this.sppedBoard.innerHTML = (speed < 0 ? '(R) ' : '') + Math.abs(speed).toFixed(1) + ' km/h';
// 记录当前速度
const speed = this.speedNum = vehicle.getCurrentSpeedKmHour();
let breakingForce = 0;
let engineForce = 0;
......
src/ResJson.ts
View file @ 27d4b17d
export const ResJson = {
"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",
"name": "gltf"
......
src/index.ts
View file @ 27d4b17d
......@@ -2,20 +2,43 @@ import { CarScene } from "./CarScene"
import * as THREE from 'three'
import { RES } from "./module/RES"
import { ResJson } from "./ResJson"
import { EventDispatcher } from "./module/EventDispatcher"
window['THREE'] = THREE
export class StageScene {
renderDom: HTMLCanvasElement
stage: CarScene
UIParentNode: HTMLElement
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)
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?: {
data: any
}, ...arg1: any[]) => any
export class EventDispatcher<EventsKeyName extends string = string> {
private listeners: {
[key in EventsKeyName]?: {
......@@ -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) {
const once = (...args: any[]) => {
listener.apply(context, args)
......@@ -54,7 +57,8 @@ export class EventDispatcher<EventsKeyName extends string = string> {
if (!this.listeners[type]) {
return
}
this.listeners[type]!.forEach(item => {
const array = this.listeners[type].slice(0)
array.forEach(item => {
const {
listener,
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 {
// _renderer.shadowMap.enabled = true
// _renderer.shadowMap.type = PCFShadowMap
_renderer.setSize(window.innerWidth, window.innerHeight)
// this.camera.updateProjectionMatrix()
// _renderer.setViewport(0, 0, 812, 375)
_renderer.setPixelRatio(window.devicePixelRatio)
_renderer.outputEncoding = sRGBEncoding;
document.body.appendChild(_renderer.domElement)
// document.body.appendChild(_renderer.domElement)
}
......@@ -123,7 +121,7 @@ export class PerspectiveScene extends ScenePreloadGroup {
/**
* 清除事件
*/
private removeEvents() {
private __removeEvents() {
window.removeEventListener('resize', this.onWindowResize)
}
......@@ -137,6 +135,7 @@ export class PerspectiveScene extends ScenePreloadGroup {
this.renderer.setSize(window.innerWidth, window.innerHeight)
}
requestId: number
/**
* 帧循环
*/
......@@ -149,6 +148,12 @@ export class PerspectiveScene extends ScenePreloadGroup {
// frame rander
this.renderer.render(this.scene, this.camera)
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 {
* @param str
* @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;
var type = str.substring(str.lastIndexOf(".") + 1, str.length);
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