Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!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 vr-mode-ui="enabled: false">

      <a-assets>
        <img id="sla" src="data:image/jpeg;base64,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">
      </a-assets>
        
      <a-camera look-controls-enabled="false">
          
        <a-cursor color="#000" scale="2.5 2.5 2.5">
        </a-cursor>    
          
      </a-camera> 
                    
      <a-plane  
        id="plane01"    
        position="0 1 -4"  
        rotation="-0 0 0"  
        width="4" 
        height="4" 
        color="#ffffff" 
        src="#sla" 
        side="double">
      </a-plane>
        
      <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="#000000"></a-sky>
        
    </a-scene>      
  </body>
</html>
              
            
!

CSS

              
                * {
  margin: 0;
  padding: 0;
  border: 0;
}

body {
  background: #fdf;
  font: 30px sans-serif;
}
              
            
!

JS

              
                // forked from siouxcitizen's "A-Frame Practice 12 Torus Knot" http://jsdo.it/siouxcitizen/Couw
//A-Frameをためしてみました
//
//Planeにテクスチャを貼り付けてみました
//クリックでPlaneの色が変わるようにしてみました
//Planeの色が変わったときにテクスチャがどのように見えるか試してみました
//
//
//参考サイト
//
//Building a 360° Image Gallery 
//https://aframe.io/docs/0.6.0/guides/building-a-360-image-gallery.html
//
//A FRAMEの使い方
//https://github.com/katsube/neec2017A/wiki/A-FRAME%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9
//
// aframe/docs/components/material.md
//https://github.com/aframevr/aframe/blob/master/docs/components/material.md
//

var sceneEl;

var plane01;
var planeColor = 0; //0:白 → 1:赤 → 2:青 → 3:緑 → 4:紫 → 5:黄色 → 1:白へもどる

var isMouseDown = false;

function init() {

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

    plane01.addEventListener("click", onMouseClick);

}

function render() {
  
    requestAnimationFrame(render);
    
}
// マウスをクリックしたとき
function onMouseClick(event) {
    if (planeColor == 0) {//Boxの色を白から赤に変えます

       plane01.setAttribute("color", "#ff0000");
       planeColor = 1; 
        
    } else if (planeColor == 1) {//Boxの色を赤から青に変えます

       plane01.setAttribute("color", "#0000ff");
       planeColor = 2; 
        
    } else if (planeColor == 2) {//Boxの色を青から緑に変えます

       plane01.setAttribute("color", "#00ff00");
       planeColor = 3; 
        
    } else if (planeColor == 3) {//Boxの色を緑から紫に変えます 

       plane01.setAttribute("color", "#ff00ff");
       planeColor = 4;
        
    } else if (planeColor == 4) {//Boxの色を紫から黄色に変えます 

       plane01.setAttribute("color", "#ffff00");
       planeColor = 5;
        
    } else if (planeColor == 5) {//Boxの色を黄色から白に変えます 

       plane01.setAttribute("color", "#ffffff");
       planeColor = 0;
        
    }    

}

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

// マウスを動かした時
function onMouseMove(event) {
    if (isMouseDown) {
        // 3DモデルをX軸とY軸方向に回転させます       
        if ( plane01 )            
		    plane01.setAttribute("rotation", (getMouseX(event)*2)+" "+(getMouseY(event)*2)+" 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();
};


              
            
!
999px

Console