Edson-Geisse/cubo-three-js.markdown

## cubo-three-js.markdown

      
    Raw
  

              cubo-three-js.markdown
            
          
    Cubo - Three.js

Simple project with library "Three.js"
Projeto simples com a biblioteca "Three.js"
A Pen by Jonatas Santos on CodePen.
License.

  
## index.html
<html>
<head>
<meta charset="utf-8" />

    <!--Three.js biblioteca principal-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r79/three.min.js"></script>

</head>
<body>
<div id="container" class="container"></div>

</body>
</html>

## script.js
var scene, camera, renderer;
var geometry, material, mesh;


function Executar() {

    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
    camera.position.z = 500;

    geometry = new THREE.BoxGeometry(200, 200, 200);
    material = new THREE.MeshBasicMaterial({  color: 0xD1A963, wireframe: true });

    mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);

    renderer = new THREE.WebGLRenderer({antialias:true});
    renderer.setClearColor(0x1F5A94);
    renderer.setSize(window.innerWidth, window.innerHeight);

  var show = document.getElementById('container');

 show.appendChild(renderer.domElement);


    function animate() {

        requestAnimationFrame(animate);

        mesh.rotation.x += 0.01;
        mesh.rotation.y += 0.02;

        renderer.render(scene, camera);

    }
         animate();
}

window.onload = Executar;


## style.scss
@mixin reset(){margin:0;padding:0;}
*{@include reset;}

@mixin css_container($h_medidas,$l_medidas){
  height:$h_medidas;
  width:$l_medidas;
  margin-left:45%;
  margin-top:10%;
  border-radius: 5px;
}

div{
  .container{
    @include css_container(100%,100%);

  }
}
	<html>
	<head>
	<meta charset="utf-8" />

	<!--Three.js biblioteca principal-->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r79/three.min.js"></script>

	</head>
	<body>
	<div id="container" class="container"></div>

	</body>
	</html>
	var scene, camera, renderer;
	var geometry, material, mesh;


	function Executar() {

	scene = new THREE.Scene();

	camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
	camera.position.z = 500;

	geometry = new THREE.BoxGeometry(200, 200, 200);
	material = new THREE.MeshBasicMaterial({ color: 0xD1A963, wireframe: true });

	mesh = new THREE.Mesh(geometry, material);
	scene.add(mesh);

	renderer = new THREE.WebGLRenderer({antialias:true});
	renderer.setClearColor(0x1F5A94);
	renderer.setSize(window.innerWidth, window.innerHeight);

	var show = document.getElementById('container');

	show.appendChild(renderer.domElement);




	function animate() {

	requestAnimationFrame(animate);

	mesh.rotation.x += 0.01;
	mesh.rotation.y += 0.02;

	renderer.render(scene, camera);

	}
	animate();
	}

	window.onload = Executar;
	@mixin reset(){margin:0;padding:0;}
	*{@include reset;}

	@mixin css_container($h_medidas,$l_medidas){
	height:$h_medidas;
	width:$l_medidas;
	margin-left:45%;
	margin-top:10%;
	border-radius: 5px;
	}

	div{
	.container{
	@include css_container(100%,100%);

	}
	}