City scene in three.js - project for studies

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 https://demos.littleworkshop.fr/infinitown , 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

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:

https://jsfiddle.net/f2Lommf5/10883/

2 Likes

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?