Shiny Box - StandardMaterial

Some box with standardMaterial. Pointlight. Shadows

by hirako2000

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/95/three.min.js"></script>

CSS

body {
  margin: 0;
}

JavaScript 1.7

let renderer;
let scene;
let camera;
let mesh;
let geometry;
let material;
let light;

init();
animate();

// initialize stuff
function init() {

	// Renderer
	renderer = new THREE.WebGLRenderer({
  	antialias: true
  });
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.shadowMap.type = THREE.PCFSoftShadowMap;
  renderer.shadowMap.enabled = true;
  
  // Add  renderer's dom element to dom
  document.body.appendChild(renderer.domElement);
  
  // Scene 
  scene = new THREE.Scene();
  
  // Camera
  // fov — Camera frustum vertical field of view.
  // aspect — Camera frustum aspect ratio.
  // near — Camera frustum near plane.
  // far — Camera frustum far plane.
  camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1000);
  camera.position.z = 5;
  

  
  addLight();
  addPlane();
  
  addSphere();
}

function addSphere() {
  // Mesh
  // Height, Width, Depth
  geometry = new THREE.BoxGeometry(2, 2, 2);
  geometry = new THREE.SphereGeometry(1, 64, 64);
  
  var texture = new THREE.TextureLoader().load( "https://cdn-images-1.medium.com/max/1600/1*rUxJt0LnuVviT6dxiQmkMg.png" );
  
  var normalTexture = new THREE.TextureLoader().load( "https://i.pinimg.com/originals/20/66/bc/2066bcec2dda47acc7061c3da2175657.jpg" );
  
  
	texture.mapping = THREE.SphericalReflectionMapping;

  material = new THREE.MeshStandardMaterial({
  	//color: 0xffffff,
    roughness: 0.05,
    //shininess: 1,
    metalness: 0.96,
    envMap: texture,
    normalMap: normalTexture
  });
  
  mesh = new THREE.Mesh(geometry, material);
  mesh.castShadow = true;
  scene.add(mesh);
  
  const geometry2 = new THREE.SphereGeometry(1, 64, 64);
  
 
  const material2 = new THREE.MeshStandardMaterial({
  	//color: 0xffffff,
    roughness: 0.15,
    //shininess: 1,,, 
    metalness: 0.30,
    envMap: texture 
  });
  
  const mesh2 = new THREE.Mesh(geometry2, material2);
  mesh2.position.x += 2;
  mesh2.castShadow = true;
  scene.add(mesh2)

}

function...