Step by Step Guide to creating Christmas Tree

Basic code looks like this 

https://threejs.org/docs/#manual/en/introduction/Creating-a-scene

This shows a cube that rotates. This illustrates below items

- Creating a basic scene

- Creating the perspective Camera 

- Creating a Cube Geometry and mesh 

- Adding the geometry to scene 

- Animating the geometry 

What it lacks are the below ones

- Controls 

- Plane which can act as a floor 

First adding the plane is like this below 

var geometry = new THREE.PlaneGeometry( 1000, 1000, 1, 1 );

var material = new THREE.MeshBasicMaterial( { color: 0x0000ff } );

var floor = new THREE.Mesh( geometry, material );

floor.material.side = THREE.DoubleSide;

floor.rotation.x = 90;

scene.add( floor ); 

Now the plane appears but unless able to obit around, the plane is not clearly visible 

Adding orbit controls is done using the below code

const controls = new OrbitControls(camera, renderer.domElement);

    //controls.update() must be called after any manual changes to the camera's transform

    camera.position.set(0, 20, 100);

    controls.update();

And in animate function, need to call the below 

controls.update();

Need to ensure that the Orbit control is also included 

Now below are few important notes on 

- Coordinate System - Which is centre point in ThreeJS, what are X, Y, Z axis orientations  

- What are plane properties that are supplied when initialising 

- Where is light placed 

To understand the coordinate system, below helped much 

https://discoverthreejs.com/book/first-steps/first-scene/

Below helped to get some idea on the ThreeJS camera

https://www.youtube.com/watch?v=KyTaxN2XUyQ

- When a mesh is added to the scene, it by default is kept at origin (0,0,0) 

- Irrespecitve of the camera, it stays at that point

References:

https://codepen.io/atouine/pen/JJeqKE

https://discoverthreejs.com/book/first-steps/first-scene/