Normally I speak German, but I try to give my best to speak English!
In chapter 5 where I can add 100 planets with different color… I wanna add the fly controls, I think I did everything correct but when I hide my code there is a massage on top saying:
// The “scene” is where stuff in our game will happen: var scene = new THREE.Scene(); var flat = {flatShading: true}; var light = new THREE.AmbientLight(‘white’, 0.8); scene.add(light); // The “camera” is what sees the stuff: var aspectRatio = window.innerWidth / window.innerHeight; var camera = new THREE.PerspectiveCamera(75, aspectRatio, 1, 10000); camera.position.z = 500; scene.add(camera); // The “renderer” draws what the camera sees onto the screen: var renderer = new THREE.WebGLRenderer({antialias: true}); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); // ******** START CODING ON THE NEXT LINE ******** var shape = new THREE.SphereGeometry(50); var cover = new THREE.MeshBasicMaterial({color: ‘blue’}); var planet = new THREE.Mesh(shape, cover); planet.position.set(-300, 0, 0); scene.add(planet); var shape = new THREE.SphereGeometry(50); var cover = new THREE.MeshBasicMaterial({color: ‘yellow’}); var planet = new THREE.Mesh(shape, cover); planet.position.set(200, 0, 250); scene.add(planet); function makePlanet() { var size = r(50); var x = r(1000) - 500; var y = r(1000) - 500; var z = r(1000) - 1000; var surface = rColor(); var shape = new THREE.SphereGeometry(size); var cover = new THREE.MeshBasicMaterial({color: surface}); var planet = new THREE.Mesh(shape, cover); planet.position.set(x, y, z); scene.add(planet); } makePlanet(); makePlanet(); for (var i=0; i<100; i++) { makePlanet(); } console.log(Math.random()); function r(max) { if (max) return max * Math.random(); return Math.random(); } var randomNum = r(); console.log(randomNum); randomNum = r(100); console.log(randomNum); console.log(r(100)); console.log(r(100)); function rColor() { return new THREE.Color(r(), r(), r()); } var controls = new THREE.FlyControls(camera); controls.movementSpeed = 100; controls.rollSpeed = 0.5; controls.dragToLook = true; controls.autoForward = false; var clock = new THREE.Clock(); function animate() { var delta = clock.getDelta(); controls.update(delta); renderer.render(scene, camera); requestAnimationFrame(animate); } animate(); // Now, show what the camera sees on the screen: renderer.render(scene, camera); //# sourceURL=code.html
I don’t really know what that means but I hope you can help me with that.
Besides that I have the German version of the book.
// My Code:
// The “scene” is where stuff in our game will happen:
var scene = new THREE.Scene();
var flat = {flatShading: true};
var light = new THREE.AmbientLight(‘white’, 0.8);
scene.add(light);
// The “camera” is what sees the stuff:
var aspectRatio = window.innerWidth / window.innerHeight;
var camera = new THREE.PerspectiveCamera(75, aspectRatio, 1, 10000);
camera.position.z = 500;
scene.add(camera);
// The “renderer” draws what the camera sees onto the screen:
var renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// ******** START CODING ON THE NEXT LINE ********
var shape = new THREE.SphereGeometry(50);
var cover = new THREE.MeshBasicMaterial({color: ‘blue’});
var planet = new THREE.Mesh(shape, cover);
planet.position.set(-300, 0, 0);
scene.add(planet);
var shape = new THREE.SphereGeometry(50);
var cover = new THREE.MeshBasicMaterial({color: ‘yellow’});
var planet = new THREE.Mesh(shape, cover);
planet.position.set(200, 0, 250);
scene.add(planet);
function makePlanet() {
var size = r(50);
var x = r(1000) - 500;
var y = r(1000) - 500;
var z = r(1000) - 1000;
var surface = rColor();
var shape = new THREE.SphereGeometry(size);
var cover = new THREE.MeshBasicMaterial({color: surface});
var planet = new THREE.Mesh(shape, cover);
planet.position.set(x, y, z);
scene.add(planet);
}
makePlanet();
makePlanet();
for (var i=0; i<100; i++) {
makePlanet();
}
console.log(Math.random());
function r(max) {
if (max) return max * Math.random();
return Math.random();
}
var randomNum = r();
console.log(randomNum);
randomNum = r(100);
console.log(randomNum);
console.log(r(100));
console.log(r(100));
function rColor() {
return new THREE.Color(r(), r(), r());
}
var controls = new THREE.FlyControls(camera);
controls.movementSpeed = 100;
controls.rollSpeed = 0.5;
controls.dragToLook = true;
controls.autoForward = false;
var clock = new THREE.Clock();
function animate() {
var delta = clock.getDelta();
controls.update(delta);
renderer.render(scene, camera);
requestAnimationFrame(animate);
}
animate();
// Now, show what the camera sees on the screen:
renderer.render(scene, camera);
Include any more information that you like here:
Have a great day!