| 1 | <!DOCTYPE html>
|
| 2 | <html lang="en">
|
| 3 | <head>
|
| 4 | <title>three.js webgl - geometry - cube</title>
|
| 5 | <meta charset="utf-8">
|
| 6 | <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
|
| 7 | <style>
|
| 8 | body {
|
| 9 | margin: 0px;
|
| 10 | background-color: #000000;
|
| 11 | overflow: hidden;
|
| 12 | }
|
| 13 | </style>
|
| 14 | </head>
|
| 15 | <body>
|
| 16 |
|
| 17 | <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r79/three.js"></script>
|
| 18 | <script>
|
| 19 | var camera, scene, renderer;
|
| 20 | var mesh;
|
| 21 | init();
|
| 22 | animate();
|
| 23 | function init() {
|
| 24 | camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
|
| 25 | camera.position.z = 400;
|
| 26 | scene = new THREE.Scene();
|
| 27 | var texture = new THREE.TextureLoader().load( 'textures/crate.gif' );
|
| 28 | var geometry = new THREE.BoxBufferGeometry( 200, 200, 200 );
|
| 29 | var material = new THREE.MeshBasicMaterial( { map: texture } );
|
| 30 | mesh = new THREE.Mesh( geometry, material );
|
| 31 | scene.add( mesh );
|
| 32 | renderer = new THREE.WebGLRenderer();
|
| 33 | renderer.setPixelRatio( window.devicePixelRatio );
|
| 34 | renderer.setSize( window.innerWidth, window.innerHeight );
|
| 35 | document.body.appendChild( renderer.domElement );
|
| 36 |
|
| 37 | window.addEventListener( 'resize', onWindowResize, false );
|
| 38 | }
|
| 39 | function onWindowResize() {
|
| 40 | camera.aspect = window.innerWidth / window.innerHeight;
|
| 41 | camera.updateProjectionMatrix();
|
| 42 | renderer.setSize( window.innerWidth, window.innerHeight );
|
| 43 | }
|
| 44 | function animate() {
|
| 45 | requestAnimationFrame( animate );
|
| 46 | mesh.rotation.x += 0.005;
|
| 47 | mesh.rotation.y += 0.01;
|
| 48 | renderer.render( scene, camera );
|
| 49 | }
|
| 50 | </script>
|
| 51 |
|
| 52 | </body>
|
| 53 | </html> |
| \ | No newline at end of file |