| | 38 | |
| | 39 | {{{ |
| | 40 | #!javascript |
| | 41 | <script src="https://rawgithub.com/mrdoob/three.js/master/build/three.min.js"></script> |
| | 42 | <script type="text/javascript"> |
| | 43 | function initScene() |
| | 44 | { |
| | 45 | var scene = new THREE.Scene(); |
| | 46 | var canvas = document.getElementById("myCanvas"); |
| | 47 | var camera = new THREE.PerspectiveCamera(75, canvas.offsetWidth/canvas.offsetHeight, 0.1, 1000); |
| | 48 | var renderer = new THREE.WebGLRenderer({canvas: canvas}); |
| | 49 | renderer.setSize(canvas.offsetWidth, canvas.offsetHeight); |
| | 50 | var geometry = new THREE.CubeGeometry(2,2,2); |
| | 51 | var material = new THREE.MeshBasicMaterial({color: 0xfa0a0a}); |
| | 52 | var cube = new THREE.Mesh(geometry, material); |
| | 53 | scene.add(cube); camera.position.z = 5; |
| | 54 | var render = function () { |
| | 55 | requestAnimationFrame(render); |
| | 56 | cube.rotation.x += 0.01; |
| | 57 | cube.rotation.y += 0.01; |
| | 58 | renderer.render(scene, camera); |
| | 59 | }; |
| | 60 | render(); |
| | 61 | } |
| | 62 | |
| | 63 | window.onload = window.onresize = function() { |
| | 64 | initScene(); |
| | 65 | } |
| | 66 | </script> |
| | 67 | <canvas id="myCanvas" width="400" height="300" style="background: lightgrey; float:right;"> |
| | 68 | Your browser does not support the HTML5 canvas tag. |
| | 69 | </canvas> |
| | 70 | }}} |