ShaneDrury/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>GLSL demo</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-size: 0;
        }
        canvas {
            width: 100%;
            height: 100%;
        }
    </style>
    <script type="importmap">
        {
          "imports": {
            "three": "https://unpkg.com/three@0.159.0/build/three.module.js",
            "three/addons/": "https://unpkg.com/three@0.159.0/examples/jsm/"
          }
        }
    </script>
</head>
<body>
<script id="vertexShader" type="x-shader/x-vertex">
void main() {
  gl_Position = projectionMatrix * modelViewMatrix * vec4(position.x+10.0, position.y, position.z+5.0, 1.0);
}
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
void main() {
  gl_FragColor = vec4(0.0, 0.58, 0.86, 1.0);
}
</script>
<script type="module">
  import * as THREE from 'three';
  const WIDTH = window.innerWidth;
  const HEIGHT = window.innerHeight;

  const renderer = new THREE.WebGLRenderer({ antialias: true });
  renderer.setSize(WIDTH, HEIGHT);
  renderer.setClearColor(0xdddddd, 1);
  document.body.appendChild(renderer.domElement);

  const scene = new THREE.Scene();

  const camera = new THREE.PerspectiveCamera(70, WIDTH / HEIGHT);
  camera.position.z = 50;
  scene.add(camera);

  const boxGeometry = new THREE.BoxGeometry(10, 10, 10);

  const shaderMaterial = new THREE.ShaderMaterial({
    vertexShader: document.getElementById("vertexShader").textContent,
    fragmentShader: document.getElementById("fragmentShader").textContent,
  });

  const cube = new THREE.Mesh(boxGeometry, shaderMaterial);
  scene.add(cube);
  cube.rotation.set(0.4, 0.2, 0);

  function render() {
    requestAnimationFrame(render);
    renderer.render(scene, camera);
  }
  render();
</script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>GLSL demo</title>
	<style>
	body {
	margin: 0;
	padding: 0;
	font-size: 0;
	}
	canvas {
	width: 100%;
	height: 100%;
	}
	</style>
	<script type="importmap">
	{
	"imports": {
	"three": "https://unpkg.com/three@0.159.0/build/three.module.js",
	"three/addons/": "https://unpkg.com/three@0.159.0/examples/jsm/"
	}
	}
	</script>
	</head>
	<body>
	<script id="vertexShader" type="x-shader/x-vertex">
	void main() {
	gl_Position = projectionMatrix * modelViewMatrix * vec4(position.x+10.0, position.y, position.z+5.0, 1.0);
	}
	</script>
	<script id="fragmentShader" type="x-shader/x-fragment">
	void main() {
	gl_FragColor = vec4(0.0, 0.58, 0.86, 1.0);
	}
	</script>
	<script type="module">
	import * as THREE from 'three';
	const WIDTH = window.innerWidth;
	const HEIGHT = window.innerHeight;

	const renderer = new THREE.WebGLRenderer({ antialias: true });
	renderer.setSize(WIDTH, HEIGHT);
	renderer.setClearColor(0xdddddd, 1);
	document.body.appendChild(renderer.domElement);

	const scene = new THREE.Scene();

	const camera = new THREE.PerspectiveCamera(70, WIDTH / HEIGHT);
	camera.position.z = 50;
	scene.add(camera);

	const boxGeometry = new THREE.BoxGeometry(10, 10, 10);

	const shaderMaterial = new THREE.ShaderMaterial({
	vertexShader: document.getElementById("vertexShader").textContent,
	fragmentShader: document.getElementById("fragmentShader").textContent,
	});

	const cube = new THREE.Mesh(boxGeometry, shaderMaterial);
	scene.add(cube);
	cube.rotation.set(0.4, 0.2, 0);

	function render() {
	requestAnimationFrame(render);
	renderer.render(scene, camera);
	}
	render();
	</script>
	</body>
	</html>