2017-10-10 23:22:07

License: MIT License

Fork: 1

Fav: 0

View: 891

Play
Stop
Reload

Fullscreen

Smart Phone

Fork tree

Readme
JavaScript 132 lines
HTML 5 lines
CSS 10 lines

Three.js r87でMagicaVoxelによるobj形式の「しかばね戦士」3Dモデル表示(WebGL使用)

// forked from siouxcitizen2.0's "Three.js r87でMagicaVoxelによるobj形式の「しかばね」3Dモデル表示(WebGL使用)" http://jsdo.it/siouxcitizen2.0/wUkY
//
//Three.js r87でobjファイル形式の3Dモデルを表示してみました　　
//マウスドラッグによる3Dモデルの回転もつけてみました
//
//
//以下の自分のコードを参考にしました
//
//A-Frame Practice 21 MagicaVoxelによるobj形式の「しかばね戦士」3Dモデル表示
//http://jsdo.it/siouxcitizen/aPfu
//

var scene, renderer;
var camera;
var mesh;

var isMouseDown = false;
 
function init() {
    
    //シーンを作成
    scene = new THREE.Scene(); 
    
    //カメラを作成
    camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 ); 
    camera.position.z = 25; 
    camera.position.y = 15; 
    
    //レンダラーを作成
    renderer = new THREE.WebGLRenderer(); 
    renderer.setSize( window.innerWidth, window.innerHeight ); 
    document.body.appendChild( renderer.domElement ); 
    //背景色を設定
    renderer.setClearColor(0x000000, 1); 
    
    //光源を作成
    var light = new THREE.DirectionalLight("#c1582d", 1);
    var ambient = new THREE.AmbientLight("#85b2cd");
    light.position.set( 0, -70, 100 ).normalize();
    scene.add(light);
    scene.add(ambient);

// 3Dモデル用テクスチャ画像の読込
    var imageLoader = new THREE.ImageLoader( manager );
    imageLoader.load( '/assets/9/9/W/G/99WGE.png', function ( image ) {

texture.image = image;
        texture.needsUpdate = true;

} );
    
    // 3Dモデル読込
    var objLoader = new THREE.OBJLoader( manager );
    objLoader.load( '/assets/s/O/J/M/sOJMa', function ( object ) {

object.traverse( function ( child ) {

if ( child instanceof THREE.Mesh ) {

child.material.map = texture;
                child.material.wireframe = false;
            }

} );

object.scale.set( 2, 2, 2 );
        mesh = object;
        scene.add( mesh );

}, onProgress, onError );
    
    document.addEventListener("mousedown", onMouseDown);
    document.addEventListener("touchstart", onMouseDown);
    document.addEventListener("mouseup", onMouseUp);
    document.addEventListener("touchend", onMouseUp);
    document.addEventListener("mousemove", onMouseMove);
    document.addEventListener("touchmove", onMouseMove);

render();   
}

function render() {
    requestAnimationFrame( render ); 
    renderer.render(scene, camera); 
}

// マウスを押したとき
function onMouseDown(event) {
    isMouseDown = true;
}

// マウスを動かした時
function onMouseMove(event) {
    if (isMouseDown) {
        // 3DモデルをX軸とY軸方向に回転させます
        if ( mesh ) {
            mesh.rotation.y = getMouseX(event)/50;
            mesh.rotation.x = getMouseY(event)/50;

}
    }
}

// マウスを離したとき
function onMouseUp(event) {
    isMouseDown = false;
}

function getMouseX(event) {
    if (event.type.indexOf("touch") == -1)
        return event.clientX;
    else
        return event.touches[0].clientX;
}

function getMouseY(event) {
    if (event.type.indexOf("touch") == -1)
        return event.clientY;
    else
        return event.touches[0].clientY;
}

window.addEventListener('DOMContentLoaded', init);

Three.js r87でMagicaVoxelによるobj形式の「しかばね戦士」3Dモデル表示(WebGL使用)

// forked from siouxcitizen2.0's "Three.js r87でMagicaVoxelによるobj形式の「しかばね」3Dモデル表示(WebGL使用)" http://jsdo.it/siouxcitizen2.0/wUkY Three.js r87でobjファイル形式の3Dモデルを表示してみました　　マウスドラッグによる3Dモデルの回転もつけてみました以下の自分のコードを参考にしました A-Frame Practice 21 MagicaVoxelによるobj形式の「しかばね戦士」3Dモデル表示 http://jsdo.it/siouxcitizen/aPfu // forked from siouxcitizen2.0's "Three.js r87でMagicaVoxelによるobj形式の「しかばね」3Dモデル表示(WebGL使用)" http://jsdo.it/siouxcitizen2.0/wUkY // //Three.js r87でobjファイル形式の3Dモデルを表示してみました　　 //マウスドラッグによる3Dモデルの回転もつけてみました // // //以下の自分のコードを参考にしました // //A-Frame Practice 21 MagicaVoxelによるobj形式の「しかばね戦士」3Dモデル表示 //http://jsdo.it/siouxcitizen/aPfu // var scene, renderer; var camera; var mesh; var isMouseDown = false; function init() { //シーンを作成 scene = new THREE.Scene(); //カメラを作成 camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 ); camera.position.z = 25; camera.position.y = 15; //レンダラーを作成 renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); //背景色を設定 renderer.setClearColor(0x000000, 1); //光源を作成 var light = new THREE.DirectionalLight("#c1582d", 1); var ambient = new THREE.AmbientLight("#85b2cd"); light.position.set( 0, -70, 100 ).normalize(); scene.add(light); scene.add(ambient); var texture = new THREE.Texture(); var manager = new THREE.LoadingManager(); manager.onProgress = function ( item, loaded, total ) {}; var onProgress = function ( xhr ) {}; var onError = function ( xhr ) {}; // 3Dモデル用テクスチャ画像の読込 var imageLoader = new THREE.ImageLoader( manager ); imageLoader.load( '/assets/9/9/W/G/99WGE.png', function ( image ) { texture.image = image; texture.needsUpdate = true; } ); // 3Dモデル読込 var objLoader = new THREE.OBJLoader( manager ); objLoader.load( '/assets/s/O/J/M/sOJMa', function ( object ) { object.traverse( function ( child ) { if ( child instanceof THREE.Mesh ) { child.material.map = texture; child.material.wireframe = false; } } ); object.scale.set( 2, 2, 2 ); mesh = object; scene.add( mesh ); }, onProgress, onError ); document.addEventListener("mousedown", onMouseDown); document.addEventListener("touchstart", onMouseDown); document.addEventListener("mouseup", onMouseUp); document.addEventListener("touchend", onMouseUp); document.addEventListener("mousemove", onMouseMove); document.addEventListener("touchmove", onMouseMove); render(); } function render() { requestAnimationFrame( render ); renderer.render(scene, camera); } // マウスを押したとき function onMouseDown(event) { isMouseDown = true; } // マウスを動かした時 function onMouseMove(event) { if (isMouseDown) { // 3DモデルをX軸とY軸方向に回転させます if ( mesh ) { mesh.rotation.y = getMouseX(event)/50; mesh.rotation.x = getMouseY(event)/50; } } } // マウスを離したとき function onMouseUp(event) { isMouseDown = false; } function getMouseX(event) { if (event.type.indexOf("touch") == -1) return event.clientX; else return event.touches[0].clientX; } function getMouseY(event) { if (event.type.indexOf("touch") == -1) return event.clientY; else return event.touches[0].clientY; } window.addEventListener('DOMContentLoaded', init);  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/87/three.min.js"></script>  <script src="https://cdn.rawgit.com/mrdoob/three.js/r87/examples/js/loaders/OBJLoader.js"></script>* { margin: 0; padding: 0; border: 0; overflow: hidden; } body { background: #000; }

Play on jsdo.it games
- Author
- Share
- ブログに埋め込む
- QR
- Tag
Download

Complete!

Description What kind of game?

Control Device

	Smartphone Controllerjsdo.it WebSocket Controller»
	Mouse
	Keyboard
	Touch Device

Fullscreen

Activated
Inactivated

jsdo.it games から削除する Submit

siouxcitizen2

URL
https://twitter.com/siouxcitizen

Yahoo Open ID が機能しなくなったのでjsdo.itの第二アカウント作成しました

jsdo.itの第一アカウント http://jsdo.it/siouxcitizen

第一アカウントも含めて混沌としてきたので、投稿コードを以下のようにまとめてみました Naver : http://matome.naver.jp/odai/2142288467101177901

作業用BGMにYoutube動画を連続再生するプログラムもまとめてみました直リンク : http://matome.naver.jp/odai/2143666226200730001 アーティスト別の再生動画の一覧付きリスト : http://matome.naver.jp/odai/2142630899820574901

ブログ : http://oreorekaihatsu.blogspot.jp/

Size

Width: px
Height: px

code

<script type="text/javascript" src="http://jsdo.it/blogparts/W1M6/js"></script>

QR Code

Discussion

Questions on this code?

Forked

sort by

Three.js r87でMagicaVoxelによるobj

siouxcitizen

132/5/10
- 3D
- 3DModel
- MagicaVoxel
- Texture
- Three.js
- WebGL
- art&design
- html5_elements&api
- library&test
- user_interface

Three.js r87でMagicaVoxelによるobj形式の「しかばね戦士」3Dモデル表示(WebGL使用)

Description What kind of game?

Control Device

Fullscreen

Author

Default Panel

Size

code

Discussion

Tags

Forked