【three.js】マリオワールドを再現してみました
趣味のモデリングを生かしてweb上にマリオワールドを再現してみました
DEMO
使用したプラグイン
three.js
OrbitControls.js
TDSLoader.js
初めて自分で作成したモデルを読み込んで作成できたものなので
動かすことができて純粋に嬉しかった作品
手順を簡単に
１、ライノセラスでパーツごとのモデリングを作成
２、three.jsでパーツを読み込み、配置
３、htmlでcanvas使用して表示する
コード
プラグインの読み込み
<script src="three.js"></script>
<script src="OrbitControls.js"></script>
<script src="TDSLoader.js"></script>html
<body>
<canvas id="myCanvas"></canvas>
</body>js
window.addEventListener('load', init);
function init(){
const renderer = new THREE.WebGLRenderer({
canvas: document.querySelector('#myCanvas')
});
renderer.setPixelRatio(window.devicePixelRatio);
// 背景
renderer.setClearColor(0X7AA0FF);
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(45, 1.0);
camera.position.set(0, -300, 100);
const controls = new THREE.OrbitControls(camera);
const directionalLight = new THREE.DirectionalLight(0xffffff);
directionalLight.position.set(1, 1, 1);
scene.add(directionalLight);
const ambientLight = new THREE.AmbientLight(0xffffff);
scene.add(ambientLight);
const loader = new THREE.TDSLoader();
//mario.3dsの読み込み
const mario = 'source/mario.3ds';
loader.load(mario, function(object){
objmodel = object.clone();
objmodel.scale.set(1,1,1);//縮尺の初期化
objmodel.rotation.set(0,0,135);//角度の初期化
objmodel.position.set(-100,0,0);//位置の初期化
scene.add(objmodel);
});
//block.3dsの読み込み
const block = 'source/block.3ds';
loader.load(block, function(object4){
objmodel = object4.clone();
objmodel.scale.set(1,1,1);//縮尺の初期化
objmodel.rotation.set(0,0,0);//角度の初期化
objmodel.position.set(-40,0,60);//位置の初期化
scene.add(objmodel);
});
tick();
// 毎フレーム時に実行されるループイベント
function tick() {
// レンダリング
renderer.render(scene, camera);
requestAnimationFrame(tick);
}
// 初期化のために実行
onResize();
// リサイズイベント発生時に実行
window.addEventListener('resize', onResize);
function onResize() {
// サイズを取得
const width = window.innerWidth;
const height = window.innerHeight;
// レンダラーのサイズを調整する
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(width, height);
// カメラのアスペクト比を正す
camera.aspect = width / height;
camera.updateProjectionMatrix();
}
}これで実装完了
DEMO