# City scene in three.js - project for studies

**URL:** <https://discourse.threejs.org/t/city-scene-in-three-js-project-for-studies/3677>\
**Category:** Questions\
**Tags:** geometry\
**Created:** [August 4, 2018, 3:49pm UTC](https://discourse.threejs.org/t/city-scene-in-three-js-project-for-studies/3677 "2018-08-04T15:49:03Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Krzysztof\_Figus](https://avatars.discourse-cdn.com/v4/letter/k/74df32/32.png) [@Krzysztof\_Figus](https://discourse.threejs.org/u/Krzysztof_Figus)\
**Post date:** [August 4, 2018, 3:49pm UTC](https://discourse.threejs.org/t/city-scene-in-three-js-project-for-studies/3677/1 "2018-08-04T15:49:03Z")

</div>

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](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

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [August 5, 2018, 4:04pm UTC](https://discourse.threejs.org/t/city-scene-in-three-js-project-for-studies/3677/2 "2018-08-05T16:04:03Z")

</div>

> [@Krzysztof\_Figus](#):
>
> why mesh3 does not rotate?

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:

> **[Edit fiddle - JSFiddle - Code Playground](https://jsfiddle.net/f2Lommf5/10883/)**
>
> Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

---

<div class="post-metadata">

**Author:** ![Krzysztof\_Figus](https://avatars.discourse-cdn.com/v4/letter/k/74df32/32.png) [@Krzysztof\_Figus](https://discourse.threejs.org/u/Krzysztof_Figus)\
**Post date:** [August 5, 2018, 6:11pm UTC](https://discourse.threejs.org/t/city-scene-in-three-js-project-for-studies/3677/3 "2018-08-05T18:11:58Z")

</div>

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?