Skip to content

Instantly share code, notes, and snippets.

@videlais

videlais/example3code.js Secret

Created Jan 13, 2017
Embed
What would you like to do?
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r83/three.min.js"></script>
</head>
<body>
<script>
var camera, scene, renderer, geometry, material, mesh;
var texture;
function init() {
// Load a texture
texture = new THREE.TextureLoader().load( "checkered.png" );
// Create a scene
scene = new THREE.Scene();
// Create a geometry
// Create a box (cube) of 10 width, length, and height
geometry = new THREE.BoxGeometry( 10, 10, 10 );
// Create a MeshBasicMaterial with a loaded texture
material = new THREE.MeshBasicMaterial( { map: texture} );
// Combine the geometry and material into a mesh
mesh = new THREE.Mesh( geometry, material );
// Add the mesh to the scene
scene.add( mesh );
// Create a camera
// Set a Field of View (FOV) of 75 degrees
// Set an Apsect Ratio of the inner width divided by the inner height of the window
// Set the 'Near' distance at which the camera will start rendering scene objects to 2
// Set the 'Far' (draw distance) at which objects will not be rendered to 1000
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 2, 1000 );
// Move the camera 'out' by 30
camera.position.z = 30;
// Create a WebGL Rendered
renderer = new THREE.WebGLRenderer();
// Set the size of the rendered to the inner width and inner height of the window
renderer.setSize( window.innerWidth, window.innerHeight );
// Add in the created DOM element to the body of the document
document.body.appendChild( renderer.domElement );
}
function animate() {
// Call the requestAnimationFrame function on the animate function
// (thus creating an infinite loop)
requestAnimationFrame( animate );
// Rotate the x position of the mesh by 0.03
mesh.rotation.x += 0.03;
// Rotate the y position of the mesh by 0.02
mesh.rotation.y += 0.02;
// Render everything using the created renderer, scene, and camera
renderer.render( scene, camera );
}
init();
animate();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.