Some Three JS scene

Simple three js scene

by hirako2000

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/93/three.js"></script>
<div class="overlay">
  <span class="trigger" onclick="toon()">
    toon
  </span>
  <span class="trigger" onclick="standard()">
    standard
  </span>
</div>

CSS

body {
  margin: 0;
}

.overlay {
  position: fixed;
  margin-left: 10px;
}

.trigger {
  font-family: monospace;
  color: white;
  padding: 5px;
}

JavaScript 1.7

let scene;
let camera;
let renderer;
let coneMesh;
let planeMesh

let toonMaterial = new THREE.MeshToonMaterial({
  color: 0xffff00,
  roughness: 0.1
 });
 
let standardMaterial = new THREE.MeshStandardMaterial({
  color: 0x00ff00,
  roughness: 0.1
});

function toon() {
	coneMesh.material = toonMaterial;
  planeMesh.material = toonMaterial;
}

function standard() {
	planeMesh.material = standardMaterial;
  coneMesh.material = standardMaterial;
}

init();
animate();

function init() {
	scene = new THREE.Scene();
  setupCamera();
  setupRenderer();
  addMesh();
  addLight();
  addPlane();
}

function addLight() {
	const pointLight = new THREE.PointLight({
  	intensity: 1,
    color: 0xffffff
  });
  pointLight.position.y = 0;
  pointLight.position.x = 0;
  pointLight.castShadow = true; 
  scene.add(pointLight);
}

function addPlane() {
	const planeGeo = new THREE.BoxGeometry(100, 1, 100);
  const material = new THREE.MeshToonMaterial({
  	color: 0xffff00,
   	roughness: 1
   });
  planeMesh = new THREE.Mesh(planeGeo, material);
  planeMesh.position.y = -2;
  planeMesh.receiveShadow = true;
  scene.add(planeMesh);
}

function addMesh() {
	let geometry = new THREE.BoxGeometry(1, 1, 1);
  let material = new THREE.MeshToonMaterial({
  	color: 0x00ff00,
    roughness: 0.1
   });
	coneMesh = new THREE.Mesh(geometry, material);
  coneMesh.castShadow = true; 
  coneMesh.position.y = -1;
  scene.add(coneMesh);
}

function animate() {
	requestAnimationFrame(animate);
  render();
}

function render() {
	coneMesh.rotation.z += 0.01;
  coneMesh.rotation.x += 0.02;
	renderer.render(scene, camera);
}

function setupRenderer() {
	renderer = new THREE.WebGLRenderer({antialias: true});
  renderer.setSize(window.innerWidth, window.innerHeight);
  
  renderer.shadowMap.enabled = true;
	renderer.shadowMap.type = THREE.PCFSoftShadowMap; 
	document.body.appendChild(renderer.domElement);
}

function setupCamera() {
	camera = new THREE.PerspectiveCamera(50, window.innerWidth /...