19:50更新,突然發現現有範例檔有個控制得更精細的(控制方向的同時輪胎也會做出相應變化)https://threejs.org/examples/#webgl_materials_cubemap_dynamic嗯...老實說,看到不知道是怎麼做的
沒看程式碼跟模型檔之前猜的話,輪子可能本身就是個模型檔
可能是輪子轉的一個模型檔、輪子傾斜(左轉、右轉)一個模型檔或者是不同時間段的動畫
呀~我亂猜的啦!!
畢竟不知道這類3D模型檔是怎麼做、切分的
2D的就單純很多,通常是一個較大或很大的圖檔,由左至右由上而下的分割動作
嗯..觀察看看!!
哦,蠻精明的
有些像是遊戲保護多媒體素材檔的方式
先把.obj檔轉成二進制檔案(理論上怎麼轉的開發者知道就好,沒有固定方式,有些還會加密)
然後程式只讀轉換過的二進制檔案來處理
其具體鍵盤控制相關程式主要是寫在
examples\js\Car.js
而二進制檔案轉換不太確定
可能是在這個檔案
examples\js\loaders\BinaryLoader.js
嗯...簡單來說這程式經過這些步驟之後
我也不知道它的模型檔或者說動畫檔是怎麼設定的了
理論上因為轉換過的二進制檔案是可以下載到電腦上的
若技術能力夠強的人
破譯檔案格式僅是時間早晚的問題
不過最大的問題就是
我不是那個技術能力夠強的人就是了!!
目前只知道
車身可能是examples\obj\veyron\parts\veyron_body_bin.bin
車輪可能是examples\obj\veyron\parts\veyron_wheel_bin.bin
說可能的原因是
判斷方式是用檔名
但如果真的要防的話,檔名可能會是亂取的
有興趣的話可以看下自己手邊特別是單機遊戲的資料夾底下各個檔案的名稱與副檔名
應該會比這個更不好懂
但看了Car.js後
輪子的動畫應該是用這段程式碼實作出來的
也就是說輪子"可能"僅是個靜態模型檔
// steering decay
if ( ! ( controls.moveLeft || controls.moveRight ) ) {
if ( this.wheelOrientation > 0 ) {
this.wheelOrientation = THREE.Math.clamp( this.wheelOrientation - delta * this.WHEEL_ANGULAR_DECCELERATION, 0, this.MAX_WHEEL_ROTATION );
} else {
this.wheelOrientation = THREE.Math.clamp( this.wheelOrientation + delta * this.WHEEL_ANGULAR_DECCELERATION, - this.MAX_WHEEL_ROTATION, 0 );
}
}
最大的疑惑也許解決了
以下才是原先的文章:
嗯...我覺得我在2D方面卡住了
因此最近是在嘗試3D
使用的3D建模軟體是Blender (版本2.79b)
雖然現階段其實還不用提
因為沒做出什麼建樹
只會很基礎、類似Flash也能做出的動畫效果(形狀補間動畫、移動補間動畫)
原因當然是Blender預設就做得出來那兩類動畫
準確來說預設是做得出這些動畫
![]()
那Blender基礎可以看這系列影片來學
https://www.bilibili.com/video/av909518/index_4.html#page=1附帶一提
bilibili的影片可以把網址的bilibili前面多加個kan(看)
這依然是從知乎知道的
因為個人接收大陸那邊的資訊管道不多
像
https://www.kanbilibili.com/video/av909518/index_4.html#page=1來下載影片檔
不過可能要配合轉檔軟體或者是下載FreeFLVplayer
因為下載下來的檔案大多是flash檔
有時會提供mp4檔啦
但不太清楚提供的標準是什麼
我碰到的幾個都是.flv檔居多
操作、版面配置會了後
網路上有很多影片可以學
像
這種影片畫面中央偏左下,有記錄滑鼠與鍵盤的操作狀況
雖然目前我還看不太懂
(像 B鍵框選 與 C鍵圈選 的差異)
但這樣可以感覺到操作沒那麼單純
回正題
現在再去查three.js
three.js功能現在已經很完善了
官網有許多範例
https://threejs.org/examples/甚至有MMD的範例
https://threejs.org/examples/#webgl_loader_mmd_audio那
今天主要是嘗試如何用鍵盤來操作模型檔
後來稍微試了下
three.js已經設計得很易於使用了
因此修改起來也不是很困難
這邊是用這範例修改
可以在three.js官網的download下載完整的範例與程式
若偷懶的話可以點以下超連結
https://github.com/mrdoob/three.js/archive/master.zip若怕連到惡意網站的話還是建議自行google
雖然我想應該不至於啦
它程式與模型檔那些也是放在Github上
那要修改的範例是這個
https://threejs.org/examples/#webgl_loader_fbx(其它類型的模型檔還沒試過
但.position屬性應該是各模型檔、3D物件 像攝影機、光源等都會有的)
修改後的結果如下:
可按A、D左右移動模型檔(W,S鍵沒做,理論上是可以改Z軸座標就好)
為何不用←→鍵來移動
因為會跟three.js不知道哪個檔案設計好的攝影機鏡頭控制鍵衝到<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - FBX loader</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
font-family: Monospace;
background-color: #000;
color: #fff;
margin: 0px;
overflow: hidden;
}
#info {
color: #fff;
position: absolute;
top: 10px;
width: 100%;
text-align: center;
z-index: 100;
display:block;
}
#info a {
color: #046;
font-weight: bold;
}
</style>
</head>
<body>
<div id="info">
<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - FBXLoader<br />
Character and animation from <a href="https://www.mixamo.com/" target="_blank" rel="noopener">Mixamo</a>
</div>
<script src="../build/three.js"></script>
<script src="js/libs/inflate.min.js"></script>
<script src="js/loaders/FBXLoader.js"></script>
<script src="js/controls/OrbitControls.js"></script>
<script src="js/Detector.js"></script>
<script src="js/libs/stats.min.js"></script>
<script>
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var container, stats, controls;
var camera, scene, renderer, light;
var clock = new THREE.Clock();
var mixers = [];
var x=0;
var y=0; init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
camera.position.set( 100, 200, 300 );
controls = new THREE.OrbitControls( camera );
controls.target.set( 0, 100, 0 );
controls.update();
scene = new THREE.Scene();
scene.background = new THREE.Color( 0xa0a0a0 );
scene.fog = new THREE.Fog( 0xa0a0a0, 200, 1000 );
light = new THREE.HemisphereLight( 0xffffff, 0x444444 );
light.position.set( 0, 200, 0 );
scene.add( light );
light = new THREE.DirectionalLight( 0xffffff );
light.position.set( 0, 200, 100 );
light.castShadow = true;
light.shadow.camera.top = 180;
light.shadow.camera.bottom = -100;
light.shadow.camera.left = -120;
light.shadow.camera.right = 120;
scene.add( light );
// scene.add( new THREE.CameraHelper( light.shadow.camera ) );
// ground
var mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2000, 2000 ), new THREE.MeshPhongMaterial( { color: 0x999999, depthWrite: false } ) );
mesh.rotation.x = - Math.PI / 2;
mesh.receiveShadow = true;
scene.add( mesh );
var grid = new THREE.GridHelper( 2000, 20, 0x000000, 0x000000 );
grid.material.opacity = 0.2;
grid.material.transparent = true;
scene.add( grid );
// model
var loader = new THREE.FBXLoader();
loader.load( 'models/fbx/Samba Dancing.fbx', function ( object ) {
//loader.load( '此處改.fbx模型檔路徑', function ( object ) { object.mixer = new THREE.AnimationMixer( object );
mixers.push( object.mixer );
//假如是靜態(沒動畫)的模型檔的話,註解---這段 var action = object.mixer.clipAction( object.animations[ 0 ] );
action.play();
object.traverse( function ( child ) {
if ( child.isMesh ) {
child.castShadow = true;
child.receiveShadow = true;
}
} );
//--- scene.add( object );
} );
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.shadowMap.enabled = true;
container.appendChild( renderer.domElement );
window.addEventListener( 'resize', onWindowResize, false );
window.addEventListener('keydown',move,false);
//↑新增個按下鍵盤事件 // stats
stats = new Stats();
container.appendChild( stats.dom );
}
//***這段是新增的***
function move(e)
{
if(65 == e.keyCode) //按下A
{
x-=10;
}
if(68 == e.keyCode) //按下D
{
x+=10;
}
}
//****************
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
requestAnimationFrame( animate );
if ( mixers.length > 0 ) {
for ( var i = 0; i < mixers.length; i ++ ) {
mixers[ i ].update( clock.getDelta() );
}
}
scene.children[4].position.set( x, y, 0 );
//在這程式中,.fbx模型檔是第五個(從0開始數的話,4是第五個)被加入場景的,因此這麼寫 renderer.render( scene, camera );
stats.update();
}
</script>
</body>
</html>
那此篇就此結束
歸根究柢...
個人的美術能力很差
且腦海中也缺乏↓這類圖像
https://threejs.org/examples/#canvas_particles_spriteshttps://threejs.org/examples/#webgl_materials_cubemap_balls_reflection(反射
一種使用後視覺效果很好的技術
能做出像是金屬表面反射出週遭環境的效果
若three.js應用感覺不到
那像這篇可以體會下
https://www.zhihu.com/question/49642449/answer/368984234當然上述這些我都沒親自做過
不清楚具體難度就是了)
所以在個人2D已經確定不行的狀況下
就算轉3D
估計結果大概也是不太樂觀
雖然說種種跡象表示自己已經不太適合玩遊戲跟開發遊戲了
不過還是再讓我掙扎陣子吧
畢竟不去掙扎我也不知道要做些什麼
看書也感覺有些進不了狀況
(
若自己無法做遊戲或修改遊戲的話
看書好像也沒什麼意思
因為會缺乏理想的分享方式
我藝術不行
所以其它分享、傳達方式像動畫、圖片、音樂等也不太可行
個人就是有些這樣把全部的雞蛋放在同個籃子裡
有些類似共產主義把人類生活與各學科看成一體的
因此沒有所謂跨學科
但也正因為如此
崩一科其它各科也會連帶受到影響
特別是弱點科目還是明顯重要的情形)
創作內容
4/20,讀取.fbx模型檔並使用鍵盤移動(從three.js範例修改而來)、bilibili影片下載、心境抒發
單機版網頁遊戲系列相關 (21)
