2017-07-31 22:26:07

License: MIT License

Fork: 1

Fav: 0

View: 840

Play
Stop
Reload

Fullscreen

Smart Phone

Fork tree

Readme
JavaScript 75 lines
HTML 42 lines
CSS 10 lines

A-Frame Practice 32 MagicaVoxelのサンプルキャラの3Dモデル表示その７

// forked from siouxcitizen's "A-Frame Practice 31 MagicaVoxelのサンプルキャラの3Dモデル表示その６" http://jsdo.it/siouxcitizen/KMAs
//A-Frameをためしてみました
//
//MogicaVoxelのサンプルキャラクターの3Dモデルを表示してみました
//

var sceneEl;

var obj3DModel;

var isMouseDown = false;

function init() {

sceneEl = document.querySelector("a-scene");
    obj3DModel = sceneEl.querySelector("#sampleCharaObj");  
    
    // マウス、タッチ処理を呼び出すイベントリスナーをセット
    document.addEventListener("mousedown", onMouseDown);
    document.addEventListener("touchstart", onMouseDown);
    document.addEventListener("mouseup", onMouseUp);
    document.addEventListener("touchend", onMouseUp);
    document.addEventListener("mousemove", onMouseMove);
    document.addEventListener("touchmove", onMouseMove);

}

function render() {
  
    requestAnimationFrame(render);
    
}

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

// マウスを動かした時
function onMouseMove(event) {
    if (isMouseDown) {
        // 3DモデルをX軸とY軸方向に回転させます       
        if ( obj3DModel )            
		    obj3DModel.setAttribute("rotation", (getMouseY(event)/10)+" "+(getMouseX(event)/10)+" 0");

if ( obj3DModel )            
		    obj3DModel.setAttribute("rotation", (getMouseY(event)/10)+" "+(getMouseX(event)/10)+" 0");        
    }
}

// マウスを離したとき
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.onload = function() {
    init(); 
    render();
};

<!DOCTYPE html>
<html>
  <head>
    <title>Hello, WebVR! - A-Frame</title>
    <meta name="description" content="Hello, WebVR! - A-Frame">
    <script src="https://aframe.io/releases/0.6.0/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>

<a-assets>    
          
        
        <a-asset-item id="sampleChara-obj" src="http://jsrun.it/assets/q/R/r/h/qRrh5"></a-asset-item>
        
        <a-asset-item id="comn-obj-mtl" src="http://jsrun.it/assets/M/c/B/O/McBON"></a-asset-item>
          
      </a-assets>
         
      <a-camera look-controls-enabled="false">
      </a-camera> 
       
      
      <a-entity id="sampleCharaObj" obj-model="obj: #sampleChara-obj; mtl: #comn-obj-mtl" scale="0.1 0.1 0.1" position="0 0.5 -2.5" rotation="0 0 0"></a-entity>  
        
      <a-light 
          type="directional"
          color="#FFF"
          intensity="0.5"
          position="-1 1 2">
      </a-light>  
        
      <a-light
          type="ambient"
          color="#888888">
      </a-light>
        
      <a-sky color="#00ffff"></a-sky>
        
    </a-scene>      
  </body>
</html>

A-Frame Practice 32 MagicaVoxelのサンプルキャラの3Dモデル表示その７

// forked from siouxcitizen's "A-Frame Practice 31 MagicaVoxelのサンプルキャラの3Dモデル表示その６" http://jsdo.it/siouxcitizen/KMAs A-Frameをためしてみました MogicaVoxelのサンプルキャラクターの3Dモデルを表示してみました // forked from siouxcitizen's "A-Frame Practice 31 MagicaVoxelのサンプルキャラの3Dモデル表示その６" http://jsdo.it/siouxcitizen/KMAs //A-Frameをためしてみました // //MogicaVoxelのサンプルキャラクターの3Dモデルを表示してみました // var sceneEl; var obj3DModel; var isMouseDown = false; function init() { sceneEl = document.querySelector("a-scene"); obj3DModel = sceneEl.querySelector("#sampleCharaObj"); // マウス、タッチ処理を呼び出すイベントリスナーをセット document.addEventListener("mousedown", onMouseDown); document.addEventListener("touchstart", onMouseDown); document.addEventListener("mouseup", onMouseUp); document.addEventListener("touchend", onMouseUp); document.addEventListener("mousemove", onMouseMove); document.addEventListener("touchmove", onMouseMove); } function render() { requestAnimationFrame(render); } // マウスを押したとき function onMouseDown(event) { isMouseDown = true; } // マウスを動かした時 function onMouseMove(event) { if (isMouseDown) { // 3DモデルをX軸とY軸方向に回転させます if ( obj3DModel ) obj3DModel.setAttribute("rotation", (getMouseY(event)/10)+" "+(getMouseX(event)/10)+" 0"); if ( obj3DModel ) obj3DModel.setAttribute("rotation", (getMouseY(event)/10)+" "+(getMouseX(event)/10)+" 0"); } } // マウスを離したとき 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.onload = function() { init(); render(); }; <!DOCTYPE html> <html> <head> <title>Hello, WebVR! - A-Frame</title> <meta name="description" content="Hello, WebVR! - A-Frame"> <script src="https://aframe.io/releases/0.6.0/aframe.min.js"></script> </head> <body> <a-scene> <a-assets>  <a-asset-item id="sampleChara-obj" src="http://jsrun.it/assets/q/R/r/h/qRrh5"></a-asset-item>  <a-asset-item id="comn-obj-mtl" src="http://jsrun.it/assets/M/c/B/O/McBON"></a-asset-item> </a-assets> <a-camera look-controls-enabled="false"> </a-camera>  <a-entity id="sampleCharaObj" obj-model="obj: #sampleChara-obj; mtl: #comn-obj-mtl" scale="0.1 0.1 0.1" position="0 0.5 -2.5" rotation="0 0 0"></a-entity> <a-light type="directional" color="#FFF" intensity="0.5" position="-1 1 2"> </a-light> <a-light type="ambient" color="#888888"> </a-light> <a-sky color="#00ffff"></a-sky> </a-scene> </body> </html>* { margin: 0; padding: 0; border: 0; } body { background: #fdf; font: 30px sans-serif; }

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

siouxcitizen

URL
http://twitter.com/siouxcitizen/

混沌としてきたので投稿コードをまとめてみました Naver : http://matome.naver.jp/odai/2142288467101177901

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

旧ブログ : http://oretaikan.blog20.fc2.com 作りかけ新ブログ : http://oreorekaihatsu.blogspot.jp/

Size

Width: px
Height: px

code

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

QR Code

Discussion

Questions on this code?

Forked

sort by

A-Frame Practice 33 MagicaVoxe

siouxcitizen

75/42/10
- 3D
- 3DModel
- 3Dモデル
- A-Frame
- AFrame
- MagicaVoxel
- Three.js
- VR
- WebGL
- WebVR
- library&test
- user_interface

A-Frame Practice 32 MagicaVoxelのサンプルキャラの3Dモデル表示その７

Description What kind of game?

Control Device

Fullscreen

Author

Default Panel

Size

code

Discussion

Tags

Forked