Wie mache ich ein Menü, bevor meine drei Programme starten

Question

Ich habe vor kurzem mit der Programmierung mit three.js begonnen, und ich würde gerne wissen, wie man ein Menü auf einer Seite erstellt, bevor es das Programm mit drei selbst geladen Also zum Beispiel möchte ich, bevor ich mein Spiel starte, zwei Optionen haben: "Start" und "Musiksteuerung", die abgespielt werden, bevor sie sich selbst geladen hat. Ist dies mit drei, oder verwenden Sie HTML, Javascript-Dateien (Sorry, ich weiß wirklich nicht, wie man es überhaupt startet).

Wenn möglich, möchte ich einige Tutorials oder sogar Videos darüber.

würde ich so etwas wie dies zum Beispiel mag: http://www.dilladimension.com/ http://lights.helloenjoy.com/

Answer 1

Sie wahrscheinlich HTML verwenden wollen das Menü und js angezeigt werden die Instanziierung der Szene zu steuern.

Anstatt das Seite Load-Ereignis verwenden, um Ihre Renderer einzurichten, etc, steckt sie in einer Funktion, und js Ereignisse verwenden, um die Funktion zu beginnen:

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

Aktivieren Sie dann diese Methode mit einem Knopf oder einem Link:

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

Hier ist eine Testimplementierung:

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>