Christmas tree with three.js
Posted inCSS CSS3 HTML JavaScript jQuery three.js

Create a 3D Christmas Tree with Three.js | Festive Web Animation πŸŽ„βœ¨

we build a beautiful 3D Christmas Tree using Three.js πŸŽ„βœ¨
Learn how to create festive shapes, materials, lights, and animations using JavaScript and WebGL.

This tutorial is perfect for:

  • Beginners learning Three.js
  • Web developers exploring 3D graphics
  • Creative coding & holiday-themed projects

πŸŽ… Let’s bring Christmas vibes to the web with code!

CSS:

Create a CSS file and add the following code:

*,
html,
body {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  position: relative;
}

JavaScript:

Create a JS file and add the following code:

// ==================
// SCENE
// ==================
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x050805);

// CAMERA
const camera = new THREE.PerspectiveCamera(
  60,
  window.innerWidth / window.innerHeight,
  0.1,
  100
);
camera.position.set(0, 3.2, 8);

// RENDERER
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
document.body.appendChild(renderer.domElement);

// ==================
// LIGHTS
// ==================
scene.add(new THREE.AmbientLight(0xffffff, 0.45));

const dirLight = new THREE.DirectionalLight(0xffffff, 1);
dirLight.position.set(5, 10, 6);
scene.add(dirLight);

// ==================
// TREE GROUP
// ==================
const tree = new THREE.Group();
scene.add(tree);

// ==================
// TRUNK
// ==================
const trunk = new THREE.Mesh(
  new THREE.CylinderGeometry(0.25, 0.4, 3, 16),
  new THREE.MeshStandardMaterial({
    color: 0x7a4a2a,
    roughness: 0.9
  })
);
trunk.position.y = 1.5;
tree.add(trunk);

// ==================
// MATERIALS
// ==================
const branchMaterial = new THREE.MeshStandardMaterial({
  color: 0x0f5c2e,
  roughness: 0.95
});

const needleMaterial = new THREE.MeshStandardMaterial({
  color: 0x1e7f42,
  roughness: 1
});

// ==================
// BRANCH LAYER
// ==================
function createBranchLayer(y, radius, needleCount, tiltStrength) {
  const layer = new THREE.Group();

  // Ana dal hacmi (aşağı sarkık)
  const branch = new THREE.Mesh(
    new THREE.ConeGeometry(radius, 1, 14),
    branchMaterial
  );
  branch.rotation.x = Math.PI;
  branch.position.y = y;
  layer.add(branch);

  // Needles
  const needleGeo = new THREE.ConeGeometry(0.035, 0.35, 5);

  for (let i = 0; i < needleCount; i++) {
    const needle = new THREE.Mesh(needleGeo, needleMaterial);

    const angle = Math.random() * Math.PI * 2;
    const r = Math.random() * radius * 0.9;

    needle.position.set(
      Math.cos(angle) * r,
      y + Math.random() * 0.25,
      Math.sin(angle) * r
    );

    // Alt dallar daha sarkΔ±k, ΓΌstler daha dik
    needle.rotation.x = Math.PI / 2 + Math.random() * tiltStrength;
    needle.rotation.z = angle;

    layer.add(needle);
  }

  return layer;
}

// ==================
// LAYERS
// ==================
const layers = 6;
for (let i = 0; i < layers; i++) {
  const y = 0.8 + i * 0.55;
  const radius = 2.5 - i * 0.4;

  tree.add(
    createBranchLayer(
      y,
      radius,
      140 - i * 15,
      0.6 - i * 0.07
    )
  );
}

// ==================
// TOP CONE (EKSΔ°K OLAN KISIM)
// ==================
const topCone = new THREE.Mesh(
  new THREE.ConeGeometry(0.35, 0.9, 12),
  new THREE.MeshStandardMaterial({
    color: 0x1f8a4c,
    roughness: 0.9
  })
);
topCone.position.y = 0.8 + layers * 0.55 + 0.4;
tree.add(topCone);

// ==================
// TOP NEEDLES
// ==================
const topNeedleGeo = new THREE.ConeGeometry(0.03, 0.25, 5);

for (let i = 0; i < 40; i++) {
  const needle = new THREE.Mesh(topNeedleGeo, needleMaterial);

  const angle = Math.random() * Math.PI * 2;
  const r = Math.random() * 0.3;

  needle.rotation.x = Math.random() * 0.4;
  needle.rotation.z = angle;

  tree.add(needle);
}

// ==================
// ANIMATION
// ==================
function animate() {
  requestAnimationFrame(animate);
  tree.rotation.y += 0.0025;
  renderer.render(scene, camera);
}
animate();

// ==================
// RESIZE
// ==================
window.addEventListener("resize", () => {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
});

Script:

<script type="text/javascript" src="https://unpkg.com/three@0.152.2/build/three.min.js"></script>

Video:

Christmas tree with three.js

#threejs #javascript #webgl #christmastree #3danimation #creativecoding #frontenddevelopment #webdevelopment #codingtutorial #christmasvibes

Happy coding!

Tags: