Gold Material

by Kirubel Girma

HTML

<script src="https://raw.githubusercontent.com/mrdoob/three.js/3510fdd91725f7681db845efd889c5e29e6e7446/examples/js/exporters/OBJExporter.js"></script>
<script src="//cdn.rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://raw.githubusercontent.com/mrdoob/three.js/3510fdd91725f7681db845efd889c5e29e6e7446/examples/js/exporters/OBJExporter.js"></script>

CSS

body {
	  margin: 0;
}

JavaScript

var camera, scene, renderer;

init();
animate();

function init() {
  //CREATE CAMERA
  camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 10000);
  camera.position.set(0, 0, 1000);

  //CREATE SCENE
  scene = new THREE.Scene();

  //CREATE LIGHT
  var light = new THREE.AmbientLight(0xb5b5b5); // soft white light
  scene.add(light);

  //ENVIROMENT MAP 'ACTIVE'
  var r1 = "https://raw.githubusercontent.com/kgirma/ring/master/";
  var urls1 = [
    r1 + "pos-x.png",
    r1 + "neg-x.png",
    r1 + "pos-y.png",
    r1 + "neg-y.png",
    r1 + "pos-z.png",
    r1 + "neg-z.png"
  ];

  //CREATE AN ENVIROMENT CUBE
  var textureCube = new THREE.CubeTextureLoader().load(urls1);
  textureCube.format = THREE.RGBFormat;


  //CREATE MESH
  var sphere1 = new THREE.SphereBufferGeometry(400.0, 60, 24, 100, 9);
  var torus1 = new THREE.TorusGeometry(400.0, 60, 24, 100, 100);


  //...CREATE COLOR FOR MATERIAL
  var goldColor = new THREE.Color("rgb(243, 201, 104)");

  //CREATE MATERIAL
  var goldMaterial = new THREE.MeshBasicMaterial({
    specular: 0xffffff,
    emissive: 0xffffff,
    color: goldColor,
    shininess: 100,
    metalness: 1,
    envMap: textureCube,
  });

  //CONVERT THE FONT TO JSON USING AN ONLINE TOOL
  var loader = new THREE.FontLoader();
  loader.load('https://raw.githubusercontent.com/kgirma/ring/master/Milkshake_Regular.json', function(font) {

    var textGeometry = new THREE.TextGeometry("Kirusoft Dev.", {
      font: font,
      size: 120,
      height: 15,
      curveSegments: 12,
      bevelThickness: 1,
      bevelSize: 1,
      bevelEnabled: true
    });

    var goldMaterial = new THREE.MeshBasicMaterial({
      specular: 0xffffff,
      emissive: 0xffffff,
      color: goldColor,
      shininess: 100,
      metalness: 1,
      envMap: textureCube,
    });



    var ring_rg = new THREE.RingGeometry(200, 220, 200, 1, 0, Math.PI * 4);
    var ring_mbm = new THREE.MeshBasicMaterial({
      color: 0xffff00,
     ...