Simple project with library "Three.js" Projeto simples com a biblioteca "Three.js"
A Pen by Jonatas Santos on CodePen.
Simple project with library "Three.js" Projeto simples com a biblioteca "Three.js"
A Pen by Jonatas Santos on CodePen.
<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%); | |
} | |
} |
Ok