Skip to content

T
ThreeJsLesson
Commit 18f37e0e authored by Master Q's avatar Master Q
Browse files
Options

资源处理

parent 4ce8cf29
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 926 additions and 174 deletions
index.html 0 → 100644
View file @ 18f37e0e
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<title>Three</title>
<style>
* {
padding: 0;
margin: 0;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-touch-callout:none;
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
touch-action: none;
}
div {
user-select: none;
}
.load-container {
position: fixed;
width: 100vw;
height: 100vh;
margin: auto;
background: #ffffff;
z-index: 1000;
}
.load-container .boxLoading {
width: 50px;
height: 50px;
margin: auto;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.load-container .boxLoading:before {
content: "";
width: 50px;
height: 5px;
background: #000;
opacity: 0.1;
position: absolute;
top: 59px;
left: 0;
border-radius: 50%;
animation: shadow 0.5s linear infinite;
}
.load-container .boxLoading:after {
content: "";
width: 50px;
height: 50px;
background: #00adb5;
animation: animate 0.5s linear infinite;
position: absolute;
top: 0;
left: 0;
border-radius: 3px;
}
@keyframes animate {
17% {
border-bottom-right-radius: 3px;
}
25% {
transform: translateY(9px) rotate(22.5deg);
}
50% {
transform: translateY(18px) scale(1,0.9) rotate(45deg);
border-bottom-right-radius: 40px;
}
75% {
transform: translateY(9px) rotate(67.5deg);
}
100% {
transform: translateY(0) rotate(90deg);
}
}
@keyframes shadow {
0%,
100% {
transform: scale(1,1);
}
50% {
transform: scale(1.2,1);
}
}
</style>
<script src="//yun.duiba.com.cn/aurora/assets/4723050c150b41f362ecf483e9cf98eb31c4a15b.js"></script>
</head>
<body>
<div class="load-container">
<div class="boxLoading"></div>
</div>
<!-- 这里的 bundle 就是 webpack 临时打包出来 -->
<script src="/bundle.js"></script>
<script>
window.addEventListener("load", function () {
// window.screen.orientation.lock("landscape-primary");
window['showLoading'] = function() {
document.querySelector('.load-container').style.display = 'block'
}
window['hideLoading'] = function() {
document.querySelector('.load-container').style.display = 'none'
}
})
</script>
</body>
</html>
\ No newline at end of file
package.json
View file @ 18f37e0e
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
"description": "three and oimo for car", "description": "three and oimo for car",
"main": "index.ts", "main": "index.ts",
"scripts": { "scripts": {
"dev": "webpack-dev-server", "dev": "node ./scripts/devServer -p 9016",
"build": "webpack" "build": "webpack"
}, },
"keywords": [ "keywords": [
...@@ -22,5 +22,8 @@ ...@@ -22,5 +22,8 @@
"webpack": "^5.74.0", "webpack": "^5.74.0",
"webpack-cli": "^4.10.0", "webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.9.3" "webpack-dev-server": "^4.9.3"
},
"devDependencies": {
"webpack-merge": "^5.8.0"
} }
} }
public/environments/RoomEnvironment.js deleted 100644 → 0
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 deleted 100644 → 0
View file @ 4ce8cf29
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<title>Three</title>
<style>
* {
padding: 0;
margin: 0;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-touch-callout:none;
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
touch-action: none;
}
div {
user-select: none;
}
</style>
<script src="./ammo.js"></script>
</head>
<body>
<!-- 这里的 bundle 就是 webpack 临时打包出来 -->
<script src="bundle.js"></script>
<script>
window.addEventListener("load", function () {
window.screen.orientation.lock("landscape-primary");
})
</script>
</body>
</html>
\ No newline at end of file
resource/res.json 0 → 100644
View file @ 18f37e0e
{
"groups": [
{
"keys": "luntai.gltf,qiche_V6.gltf,shamo_V10.gltf",
"name": "gltf"
},
{
"keys": "nx1.jpg,ny1.jpg,nz1.jpg,px1.jpg,py1.jpg,pz1.jpg",
"name": "skybox"
}
],
"path": "./resource/"
}
\ No newline at end of file
scripts/devServer.js 0 → 100644
View file @ 18f37e0e
const path = require("path");
const runScript = require("./runScript");
const argv = process.argv;
const fs = require("fs");
// const skinUrl = "./resource/skin.json";
// fs.watchFile(skinUrl, { persistent: true, interval: 2000 }, (curr, prev) => {
// const skinDataAll = fs.readFileSync(skinUrl)
// var endFile = `export const SkinJson = ${skinDataAll}`
// fs.writeFileSync("./src/SkinJson.ts", endFile);
// console.log("SkinJson.ts文件已更新")
// })
// 修改resource文件夹任意内容自动刷新资源
fs.watch('./resource/', { recursive: true }, (event, filename) => {
if (
filename === ".DS_Store"
|| filename === "res.json"
|| filename === "skin.json"
) return;
runScript(path.resolve('./scripts/flushRes.js'), (err) => {
console.log(err);
});
});
runScript(path.resolve('./scripts/flushRes.js'), (err) => {
console.log(err);
});
const webpackDevServer = require('webpack-dev-server');
const webpack = require('webpack');
const config = require('../webpack.dev.js');
// webpackDevServer.addDevServerEntrypoints(config, options);
const compiler = webpack(config);
const server = new webpackDevServer(config.devServer, compiler);
const runServer = async () => {
const ipV4 = await webpackDevServer.internalIP('v4')
console.log('========== ipV4 ==========', ipV4)
server.options.host = ipV4
const argvPort = +argv[argv.indexOf("-p") + 1]
argvPort && (server.options.port = +argv[argv.indexOf("-p") + 1])
await server.start()
}
runServer()
\ No newline at end of file
scripts/flushRes.js 0 → 100644
View file @ 18f37e0e
//生成res.json
//遍历资源文件夹，生成
var fs = require('fs');
var path = require("path");
var readPath = "./resource/"
var files = fs.readdirSync(readPath);
var obj = { groups: [] };//每项包括keys合name
files.forEach(function (file) {
//路径
let fPath = path.join(readPath, file);
//只处理文件夹
if (fs.statSync(fPath).isDirectory()) {
//继续读每个子文件夹，json和png名字有相同的，只留json，
var sonFiles = fs.readdirSync(fPath);
//没有文件
if (!sonFiles.length) return
//取出所有json
var jsons = sonFiles.filter((f) => { return f.substr(-5) == ".json" })
//去掉json所带png的图片
sonFiles = sonFiles.filter((f) => { return jsons.indexOf(f.substring(0, f.length - 4) + ".json") == -1 })
//去掉mac上的缓存文件
sonFiles = sonFiles.filter((f) => { return f != '.DS_Store' })
var group = {
keys: "",
name: file
}
for (var i = 0; i < sonFiles.length; i++) {
if (i != 0) group.keys += ",";
group.keys += sonFiles[i]
}
obj.groups.push(group)
}
})
obj.path="./resource/"
console.log("资源更新完成")
//生成json
fs.writeFileSync(readPath + "res.json", JSON.stringify(obj, "", "\t"));
//TS也更新
var endPath = './src/';
var endFile = `export const ResJson = ${JSON.stringify(obj, "", "\t")}`
fs.writeFileSync(endPath + "ResJson.ts", endFile);
\ No newline at end of file
scripts/runScript.js 0 → 100644
View file @ 18f37e0e
/*
* runScript.js
* Created by 还有醋v on 2021/5/8.
* Copyright © 2021 haiyoucuv. All rights reserved.
*/
const childProcess = require('child_process');
module.exports = function runScript(scriptPath, callback) {
let invoked = false;
const process = childProcess.fork(scriptPath);
process.on('error', function (err) {
if (invoked) return;
invoked = true;
callback(err);
});
process.on('exit', function (code) {
if (invoked) return;
invoked = true;
const err = code === 0 ? null : new Error('exit code ' + code);
callback(err);
});
}
src/CarScene/index.ts
View file @ 18f37e0e
...@@ -143,7 +143,7 @@ export class CarScene extends PerspectiveScene { ...@@ -143,7 +143,7 @@ export class CarScene extends PerspectiveScene {
initUi() { initUi() {
const reflectionCube = new THREE.CubeTextureLoader() const reflectionCube = new THREE.CubeTextureLoader()
.setPath( '天空盒子4/' ) .setPath( '/resource/skybox/' )
.load( [ 'px1.jpg', 'nx1.jpg', 'py1.jpg', 'ny1.jpg', 'pz1.jpg', 'nz1.jpg' ] ); .load( [ 'px1.jpg', 'nx1.jpg', 'py1.jpg', 'ny1.jpg', 'pz1.jpg', 'nz1.jpg' ] );
reflectionCube.encoding = THREE.sRGBEncoding; reflectionCube.encoding = THREE.sRGBEncoding;
this.scene.background = reflectionCube; this.scene.background = reflectionCube;
...@@ -272,7 +272,7 @@ export class CarScene extends PerspectiveScene { ...@@ -272,7 +272,7 @@ export class CarScene extends PerspectiveScene {
scene: THREE.Scene, scene: THREE.Scene,
} }
GLTFLoaderIns.load('shamo_V10.gltf', (ins: GltfModel) => { GLTFLoaderIns.setPath('/resource/gltf/').load('shamo_V10.gltf', (ins: GltfModel) => {
console.log(ins) console.log(ins)
let terrainMesh: THREE.Mesh let terrainMesh: THREE.Mesh
......
src/CarScene/vehicle.ts
View file @ 18f37e0e
...@@ -103,7 +103,7 @@ export class Vehicle extends THREE.Object3D{ ...@@ -103,7 +103,7 @@ export class Vehicle extends THREE.Object3D{
body.setActivationState(4); body.setActivationState(4);
var chassisMesh = this.chassisMesh = this.createChassisMesh(chassisWidth, chassisHeight, chassisLength); var chassisMesh = this.chassisMesh = this.createChassisMesh(chassisWidth, chassisHeight, chassisLength);
GLTFLoaderIns.load('qiche_V6.gltf', (gltf: GltfModel) => { GLTFLoaderIns.setPath('/resource/gltf/').load('qiche_V6.gltf', (gltf: GltfModel) => {
chassisMesh.add(gltf.scene) chassisMesh.add(gltf.scene)
gltf.scene.visible = !VehicleDebugConfig.debugger gltf.scene.visible = !VehicleDebugConfig.debugger
gltf.scene.translateY(-1) gltf.scene.translateY(-1)
...@@ -356,7 +356,7 @@ export class Vehicle extends THREE.Object3D{ ...@@ -356,7 +356,7 @@ export class Vehicle extends THREE.Object3D{
const LuntaiIns = this.luntaiIns = await new Promise<GltfModel>(resolve => { const LuntaiIns = this.luntaiIns = await new Promise<GltfModel>(resolve => {
GLTFLoaderIns.load('luntai.gltf', (ins: GltfModel) => { GLTFLoaderIns.setPath('/resource/gltf/').load('luntai.gltf', (ins: GltfModel) => {
ins.scene.traverse(function(obj) { ins.scene.traverse(function(obj) {
// @ts-ignore // @ts-ignore
......
src/ResJson.ts 0 → 100644
View file @ 18f37e0e
export const ResJson = {
"groups": [
{
"keys": "luntai.gltf,qiche_V6.gltf,shamo_V10.gltf",
"name": "gltf"
},
{
"keys": "nx1.jpg,ny1.jpg,nz1.jpg,px1.jpg,py1.jpg,pz1.jpg",
"name": "skybox"
}
],
"path": "./resource/"
}
\ No newline at end of file
src/index.ts
View file @ 18f37e0e
import { CarScene } from "./CarScene" import { CarScene } from "./CarScene"
import * as THREE from 'three' import * as THREE from 'three'
import { RES } from "./module/RES"
import { ResJson } from "./ResJson"
window['THREE'] = THREE window['THREE'] = THREE
...@@ -8,7 +10,10 @@ export class StageScene { ...@@ -8,7 +10,10 @@ export class StageScene {
this.initStage() this.initStage()
} }
initStage() { async initStage() {
RES.loadConfig(ResJson)
await RES.loadGroup('skybox')
// @ts-expect-error // @ts-expect-error
Ammo().then(() => { Ammo().then(() => {
new CarScene() new CarScene()
......
src/module/RES.ts 0 → 100644
View file @ 18f37e0e
This diff is collapsed.
src/module/UI/PreloadGroup/PreloadGroup.ts 0 → 100644
View file @ 18f37e0e
import * as THREE from 'three'
import { RES } from '../../RES'
export class PreloadGroup extends THREE.Group {
get groupNames(): string[] { return null }
constructor(...args: any[]) {
super()
this._preloadRes()
}
_preloadRes() {
new Promise((resolve, reject) => {
if (this.groupNames && this.groupNames.length) {
Promise.all(
this.groupNames.map(name => RES.loadGroup(name))
).then(resolve, reject)
} else {
resolve(1)
}
}).then(this.initUi)
}
protected initUi() {}
}
\ No newline at end of file
webpack.config.js → webpack.common.js
View file @ 18f37e0e
...@@ -28,12 +28,6 @@ module.exports = { ...@@ -28,12 +28,6 @@ module.exports = {
}, },
output: { output: {
filename: 'bundle.js', filename: 'bundle.js',
path: path.resolve(__dirname, './dist') path: path.resolve(__dirname, './dist'),
},
devServer: {
port: '0.0.0.0',
hot: true,
open: true,
port: 9017
} }
} }
\ No newline at end of file
webpack.dev.js 0 → 100644
View file @ 18f37e0e
const {
merge
} = require('webpack-merge');
const common = require('./webpack.common.js');
const path = require('path')
// const webpack = require('webpack');
// const MockWebpackPlugin = require('mock-webpack-plugin');
// const mockConfig = require('./mock/config.js');
module.exports = merge(common, {
mode: "development",
devtool: 'eval-source-map',
devServer: {
port: '0.0.0.0',
hot: true,
open: true,
port: 9017,
proxy: {
},
static: '.'
}
// plugins: [
// new MockWebpackPlugin({
// config: mockConfig,
// port: 3000
// })
// ]
});
yarn.lock
View file @ 18f37e0e
...@@ -2053,7 +2053,7 @@ webpack-dev-server@^4.9.3: ...@@ -2053,7 +2053,7 @@ webpack-dev-server@^4.9.3:
webpack-dev-middleware "^5.3.1" webpack-dev-middleware "^5.3.1"
ws "^8.4.2" ws "^8.4.2"
webpack-merge@^5.7.3: webpack-merge@^5.7.3, webpack-merge@^5.8.0:
version "5.8.0" version "5.8.0"
resolved "http://npm.dui88.com:80/webpack-merge/-/webpack-merge-5.8.0.tgz#2b39dbf22af87776ad744c390223731d30a68f61" resolved "http://npm.dui88.com:80/webpack-merge/-/webpack-merge-5.8.0.tgz#2b39dbf22af87776ad744c390223731d30a68f61"
integrity sha1-Kznb8ir4d3atdEw5AiNzHTCmj2E= integrity sha1-Kznb8ir4d3atdEw5AiNzHTCmj2E=
......
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