Matheus Sousa Matheus Sousa - 6 months ago 19
HTML Question

How to make a menu before my three program starts executing

I´ve started programming using three.js a little time ago, and I would like to know how to make a menu on a page before it loaded the program using three itself.So, for instance I would like before running my game to have two options:"start" and "music control" being desplayed before it loaded itself.
Is this made using three, or do you use html, javascript files?(Sorry, I really don´t know how to even start it).

If possible, I would like some tutorials or even videos about it.

I would like something like this for example:
http://www.dilladimension.com/
http://lights.helloenjoy.com/

Answer

You probably do want to use html to display the menu and js to control the instantiation of your scene.

Rather than use the page load event to set up your renderer, etc, put them inside a function, and use js events to begin the function:

function start() {
  var renderer = new THREE.WebGLRenderer();
  ...
  // more setup
  ...
  renderer.render(scene, camera);
};

Then activate this method with a button or a link:

<button onclick="start()">
  Start Scene
</button>

Here's a test implementation:

function start() {
  var renderer = new THREE.WebGLRenderer();
  renderer.setSize(800, 600);
  document.body.appendChild(renderer.domElement);

  var scene = new THREE.Scene();

  var camera = new THREE.PerspectiveCamera(
    35, // Field of view
    800 / 600, // Aspect ratio
    0.1, // Near plane
    10000 // Far plane
  );
  camera.position.set(-15, 10, 10);
  camera.lookAt(scene.position);

  var geometry = new THREE.BoxGeometry(5, 5, 5);
  var material = new THREE.MeshLambertMaterial({
    color: 0xFF0000
  });
  var mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh);

  var light = new THREE.PointLight(0xFFFF00);
  light.position.set(10, 0, 10);
  scene.add(light);

  renderer.setClearColor(0xdddddd, 1);
  renderer.render(scene, camera);
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r77/three.min.js"></script>

<button onclick="start()">
  Start Scene
</button>

Comments