City scene in three.js - project for studies

Questions
1

Hello,
I must do work at the end of studies and my promoter said that it must look like scene of city. So, I found something like that Infinitown | A WebGL Experiment by Little Workshop , but I have never do anything in three.js, so there is my question, how can I start with this? I have to model a patch of the city in a Blender?

And I have also secound simple question, I started to learning three.js and I have code like this:

var scene, camera, renderer, mesh1, mesh2;

function init(){
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(90, 1200/720, 0.1, 1000);

mesh1 = new THREE.Mesh(
new THREE.BoxGeometry(1,1,1),
new THREE.MeshPhongMaterial({color:0xff0000, wireframe:false})
);

mesh2 = new THREE.Mesh(
new THREE.BoxGeometry(1,1,1),
new THREE.MeshPhongMaterial({color:0x0000ff, wireframe:false}),
);

var mesh3 = new THREE.Mesh(
new THREE.BoxGeometry(1,1,1),
new THREE.MeshPhongMaterial({color:0x0000ff, wireframe:false}),
);

mesh2.position.set(1,0,0);
mesh3.position.set(-1,0,0);

scene.add(mesh1);
scene.add(mesh2);
scene.add(mesh3);

mesh1.receiveShadow = true;

ambientLight = new THREE.AmbientLight(0xffffff, 0.2);
scene.add(ambientLight);

camera.position.set(0,2,-2);
camera.lookAt(new THREE.Vector3(0,0,0));

renderer = new THREE.WebGLRenderer();
renderer.setSize(1920, 1080);

renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.BasicShadowMap;

document.body.appendChild(renderer.domElement);

animate();
}

function animate(){
requestAnimationFrame(animate);

mesh1.rotation.x += 0.02;
mesh2.rotation.y += 0.02;
mesh3.rotation.y += 0.02;

renderer.render(scene, camera);

}

window.onload = init;

why mesh3 does not rotate?

Thank You very much

2

The declaration of the variable is wrong. If you define it in init(), it’s not visible for animate(). See the correction in this example:

2 Likes
3

Thank You very much, do You know maybe how to do simple city in three.js? Do I have to model buildings with road and traffic lights as one object, or add each object separately?