pushmatrix/cube.js Secret

## cube.js
<!DOCTYPE html>
<html>
  <head>
    <title>Three.js Cube</title>
    <style>
      body {
        margin: 0;
      }
      canvas {
        width: 500px;
        height: 500px;
      }
    </style>

    <script type="importmap">
      {
        "imports": {
          "three": "https://unpkg.com/three@latest/build/three.module.js",
          "three/addons/": "https://unpkg.com/three@latest/examples/jsm/"
        }
      }
    </script>
  </head>
  <body>
    <canvas id="canvas1" width="1000" height="1000"></canvas>

    <script type="module">
      import * as THREE from "three";
      import { OrbitControls } from "three/addons/controls/OrbitControls.js";

      // Create scene, camera, and renderer
      var scene = new THREE.Scene();
      var camera = new THREE.PerspectiveCamera(
        75,
        window.innerWidth / window.innerHeight,
        0.1,
        1000
      );
      var renderer = new THREE.WebGLRenderer({
        canvas: document.createElement("canvas"),
      });

      renderer.setPixelRatio(window.devicePixelRatio);
      renderer.setSize(500, 500);

      // Create cube
      var geometry = new THREE.BoxGeometry();
      var material = new THREE.MeshStandardMaterial();
      var cube = new THREE.Mesh(geometry, material);
      scene.add(cube);

      camera.position.z = 5;

      var directionalLight = new THREE.DirectionalLight(0xffffff, 10.5);

      directionalLight.position.set(0, 2, 3);

      var ambientLight = new THREE.AmbientLight();
      scene.add(ambientLight);

      scene.add(directionalLight);

      // Render the cube to the WebGL canvas
      renderer.render(scene, camera);

      var canvas = document.getElementsByTagName("canvas")[0];

      new OrbitControls(camera, canvas);

      var ctx = canvas.getContext("2d");

      // Animation loop
      function animate() {
        requestAnimationFrame(animate);

        renderer.render(scene, camera);
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.drawImage(renderer.domElement, 0, 0);
      }
      animate();
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Three.js Cube</title>
	<style>
	body {
	margin: 0;
	}
	canvas {
	width: 500px;
	height: 500px;
	}
	</style>

	<script type="importmap">
	{
	"imports": {
	"three": "https://unpkg.com/three@latest/build/three.module.js",
	"three/addons/": "https://unpkg.com/three@latest/examples/jsm/"
	}
	}
	</script>
	</head>
	<body>
	<canvas id="canvas1" width="1000" height="1000"></canvas>

	<script type="module">
	import * as THREE from "three";
	import { OrbitControls } from "three/addons/controls/OrbitControls.js";

	// Create scene, camera, and renderer
	var scene = new THREE.Scene();
	var camera = new THREE.PerspectiveCamera(
	75,
	window.innerWidth / window.innerHeight,
	0.1,
	1000
	);
	var renderer = new THREE.WebGLRenderer({
	canvas: document.createElement("canvas"),
	});

	renderer.setPixelRatio(window.devicePixelRatio);
	renderer.setSize(500, 500);

	// Create cube
	var geometry = new THREE.BoxGeometry();
	var material = new THREE.MeshStandardMaterial();
	var cube = new THREE.Mesh(geometry, material);
	scene.add(cube);

	camera.position.z = 5;

	var directionalLight = new THREE.DirectionalLight(0xffffff, 10.5);

	directionalLight.position.set(0, 2, 3);

	var ambientLight = new THREE.AmbientLight();
	scene.add(ambientLight);

	scene.add(directionalLight);

	// Render the cube to the WebGL canvas
	renderer.render(scene, camera);

	var canvas = document.getElementsByTagName("canvas")[0];

	new OrbitControls(camera, canvas);

	var ctx = canvas.getContext("2d");

	// Animation loop
	function animate() {
	requestAnimationFrame(animate);

	renderer.render(scene, camera);
	ctx.clearRect(0, 0, canvas.width, canvas.height);
	ctx.drawImage(renderer.domElement, 0, 0);
	}
	animate();
	</script>
	</body>
	</html>