Live server spinning box

JavaScript
1

Hi all,

I have got a spinning square using three.js however when i try to view on live server it goes to start but then freezes. whats happening her how do i fix? its like its constantly refreshing and wont let the box spin.

code

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>My first three.js app</title>
		<style>
			body { margin: 0; }
        </style>
        <script type="module">
            import * as THREE from './three.module.js';

function main() {
  const canvas = document.querySelector('#c');
  const renderer = new THREE.WebGLRenderer({canvas});

  const fov = 75;
  const aspect = 2;  // the canvas default
  const near = 0.1;
  const far = 5;
  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
  camera.position.z = 2;

  const scene = new THREE.Scene();

  const boxWidth = 1;
  const boxHeight = 1;
  const boxDepth = 1;
  const geometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth);

  const material = new THREE.MeshBasicMaterial({color: 0x44aa88});  // greenish blue

  const cube = new THREE.Mesh(geometry, material);
  scene.add(cube);

  function render(time) {
    time *= 0.001;  // convert time to seconds

    cube.rotation.x = time;
    cube.rotation.y = time;

    renderer.render(scene, camera);

  }
  requestAnimationFrame(render);

  renderer.render(scene, camera);
}

main();
        </script>
	</head>
	<body>
    <canvas id="c"></canvas>
    </body>
</html>
2

You may want to move your script tag to the end of the body tag or call main via an event listener so it fires after the content (canvas element) has loaded. Not sure that is your exact problem, but it’s probably better practice to do it that way anyhow.

3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.