JSFiddle - React, Tailwind, and code Playground

by vcxiaohan

HTML

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>three.js webgl - decal splatter</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<link type="text/css" rel="stylesheet" href="main.css">
	</head>
	<body>
    <button id="btn">switch antoRotate</button>
		<div id="container"></div>
    <script src="https://cdn.jsdelivr.net/npm/three@0.143.0/build/three.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.143.0/examples/js/geometries/DecalGeometry.js"></script>
	</body>
</html>

CSS

#btn {
  position: fixed;
  top: 0;
  left: 0;
}

JavaScript

var autoRotate = false
document.getElementById('btn').addEventListener('click', function() {
	autoRotate = !autoRotate
})


const container = document.getElementById('container');

let renderer, scene, camera, stats;
let object = new THREE.Object3D(),
  mesh;
let raycaster;
let line;

const intersection = {
  intersects: false,
  point: new THREE.Vector3(),
  normal: new THREE.Vector3()
};
const mouse = new THREE.Vector2();
const intersects = [];

const decalMaterial = new THREE.MeshPhongMaterial({
  specular: 0x444444,
  transparent: true,
  polygonOffset:true,
  polygonOffsetUnits:-10,
  polygonOffsetFactor:-1,
});

const decals = [];
let mouseHelper;
const position = new THREE.Vector3();
const orientation = new THREE.Euler();
const size = new THREE.Vector3(10, 10, 10);

const params = {
  minScale: 10,
  maxScale: 20,
  rotate: true,
  clear: function() {

  }
};

window.addEventListener('load', init);

function init() {

  renderer = new THREE.WebGLRenderer({
    antialias: true
  });
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);
  container.appendChild(renderer.domElement);

  scene = new THREE.Scene();

  camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
  camera.position.z = 120;

  scene.add(new THREE.AmbientLight(0x443333));

  const dirLight1 = new THREE.DirectionalLight(0xffddcc, 1);
  dirLight1.position.set(1, 0.75, 0.5);
  scene.add(dirLight1);

  const dirLight2 = new THREE.DirectionalLight(0xccccff, 1);
  dirLight2.position.set(-1, 0.75, -0.5);
  scene.add(dirLight2);

  const geometry = new THREE.BufferGeometry();
  geometry.setFromPoints([new THREE.Vector3(), new THREE.Vector3()]);

  line = new THREE.Line(geometry, new THREE.LineBasicMaterial());
  scene.add(line);

  loadLeePerrySmith();

  raycaster = new THREE.Raycaster();

  mouseHelper = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 10), new THREE.MeshNormalMaterial());
 ...