body {
margin: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
canvas {
width: 100%;
height: 100%;
}
.label {
position: absolute;
width: 100%;
text-align: center;
top: 0;
color: #fff;
}
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 30, window.innerWidth/window.innerHeight, 0.1, 1000 );
var mesh;
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
// add icosahedron
var geometry = new THREE.OctahedronGeometry( 20 );
var color = new THREE.Color( "#7833aa" );
console.log(color.getHex());
var textureLoader = new THREE.TextureLoader();
textureLoader.crossOrigin = true;
textureLoader.load('https://s3-us-west-2.amazonaws.com/s.cdpn.io/53148/4268-bump.jpg', function(texture) {
var material = new THREE.MeshPhongMaterial( {color: color.getHex(), bumpMap: texture} );
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
render();
});
camera.position.z = 100;
var light = new THREE.PointLight( 0xFFFFFF , 1.5);
light.position.set( 10, 0, 80 );
scene.add( light );
var light = new THREE.PointLight( 0xFFFFFF , 1.5);
light.position.set( 25, 0, -80 );
scene.add( light );
var render = function () {
requestAnimationFrame( render );
mesh.rotation.x += 0.01;
mesh.rotation.y += 0.01;
renderer.render(scene, camera);
};
This Pen doesn't use any external CSS resources.