如何在我的三个程序开始执行之前制作菜单

Question

我不久前就开始用 three.js 编程，我想知道如何在使用 three 本身加载程序之前在页面上制作菜单。因此，例如，我希望在运行游戏之前有两个选项："开始"和"音乐控制"在加载自身之前被取消播放。这是使用三个，还是使用 html，javascript 文件？（对不起，我真的不知道如何启动它）。

如果可能的话，我想要一些关于它的教程甚至视频。

例如，我想要这样的东西：http://www.dilladimension.com/http://lights.helloenjoy.com/

Answer 1

您可能确实希望使用 html 来显示菜单，并使用 js 来控制场景的实例化。

与其使用页面加载事件来设置渲染器等，不如将它们放在函数中，并使用 js 事件开始函数：

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

然后使用按钮或链接激活此方法：

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

下面是一个测试实现：

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>