three.js - Materials with Dual Tones

by mmalex

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/91/three.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

CSS

body {
  overflow: hidden;
}

JavaScript

//ref: https://stackoverflow.com/questions/55324801/materials-with-dual-tones/55326658#55326658

var renderer;
var camera;
var controls;

var scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(54, window.innerWidth / window.innerHeight, 0.1, 1000);

renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(new THREE.Color(0x5e5e5e));
document.body.appendChild(renderer.domElement);

camera.position.x = -1;
camera.position.y = 5;
camera.position.z = 0;
camera.lookAt(0, 0, 0);

controls = new THREE.OrbitControls(camera);

var spotLight0 = new THREE.SpotLight(0xff000, 2.5, 25, Math.PI / 12);
spotLight0.position.set(0, 10, 10);
scene.add(spotLight0);
var spotLightHelper0 = new THREE.SpotLightHelper(spotLight0);
//scene.add(spotLightHelper0);

var spotLight1 = new THREE.SpotLight(0x0000ff, 2.5, 25, Math.PI / 12);
spotLight1.position.set(10, 10, 0);
scene.add(spotLight1);
var spotLightHelper1 = new THREE.SpotLightHelper(spotLight1);
//scene.add(spotLightHelper1);

var size = 10;
var divisions = 10;
var gridHelper = new THREE.GridHelper(size, divisions);
scene.add(gridHelper);

var loader = new THREE.TextureLoader();
loader.load("https://i.imgur.com/Y8SI8Fy.jpg", function(texture) {
  var geometry = new THREE.BufferGeometry();

  var vertices = new Float32Array([-1.0, 0.0, -1.0,
    1.0, 0.0, 1.0,
    1.0, 0.0, -1.0,

    1.0, 0.0, 1.0, -1.0, 0.0, -1.0, -1.0, 0.0, 1.0,
  ]);

  var texCoords = new Float32Array([
    0, 0,
    1, 1,
    0, 1,
    1, 1,
    0, 0,
    1, 0,
  ]);

  // itemSize = 3 because there are 3 values (components) per vertex
  geometry.addAttribute('position', new THREE.BufferAttribute(vertices, 3));
  geometry.addAttribute('uv', new THREE.BufferAttribute(texCoords, 2));
  geometry.computeVertexNormals();

  var material = new THREE.MeshPhongMaterial({
    // color: 0x00ff00,
    map: texture
  });
  var cube = new THREE.Mesh(geometry, material);
 ...