Question

我刚开始使用three.js进行编程，我想知道如何在使用三个本身加载程序之前在页面上制作一个菜单。所以，例如我想在运行之前游戏有两种选择：“开始”和“音乐控制”在加载之前被取消。这是使用三个，还是使用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>

这是一个测试实现：

＆＃13;

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);
};

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r77/three.min.js"></script>

<button onclick="start()">
  Start Scene
</button>

＆＃13;

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

1 个答案: