three实现三维圣诞树下雪动画效果代码-html代码-BFW代码库

three实现三维圣诞树下雪动画效果代码

代码语言：html

所属分类：三维

代码描述：three实现三维圣诞树下雪动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  


  
  
<style>
body {
  margin: 0;
  padding: 0;
}

#tree {
  width: 100%;
  height: 100%;
}
</style>



</head>

<body  >
  <div id="tree"></div>


<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.147.js"></script>
      <script >
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000);

const renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0x0e2255);
renderer.shadowMap.enabled = true;
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById("tree").appendChild(renderer.domElement);

let snowGroup, treeGroup;
const colors = [0xC21010, 0xCFE8A9, 0xFFEE63, 0xEC255A, 0xFF971D];

var lightAngle = 0;
var lightInc = 0;

function createDecoration(scene, x, y, z) {
  // Create the sphere geometry for the decoration
  var sphereGeometry = new THREE.SphereGeometry(0.4, 32, 32);
  var randomIndex = Math.floor(Math.random() * colors.length);

  // Return the color at the random index
  // Create the decoration mesh using the sphere geometry and the specified color
  var decoration = new THREE.Mesh(
  sphereGeometry,
  new THREE.MeshPhongMaterial({ color: colors[randomIndex] }));


  // Set the position of the decoration
  decoration.position.set(x, y, z);

  // Add the decoration to the scene
  scene.add(decoration);
  treeGroup.add(decoration);
}



// Create the procedural starry sky texture
const skyGeometry = new THREE.SphereGeometry(1000, 32, 32);
const skyMaterial = new THREE.MeshBasicMaterial();

// box
const boxGeometry = new THREE.BoxGeometry(1, 1, 1);
const boxMaterial = new THREE.MeshBasicMaterial({ color: 0xf96666 });
const box = new THREE.Mesh(boxGeometry, boxMaterial);
box.position.set(1, 6, 18);

// Create the geometry for the ribbon
const ribbonGeometry = new THREE.TorusGeometry(0.25, 0.05, 8, 100);
const ribbonMaterial = new THREE.MeshBasicMaterial({ color: 0xffe9a0 });
const ribbon = new THREE.Mesh(ribbonGeometry, ribbonMaterial);

// Position the ribbon around the package
ribbon.position.set(1, 6.5, 18);
ribbon.rotation.set(Math.PI / 2, 0, 0);

// Add the package and ribbon to the scene
scene.add(box);
scene.add(ribbon);

// Position the camera
camera.position.z = 16;
camera.position.y = 5.5;

var ambientLight = new THREE.AmbientLight(0x404040);
var directionalLight = new THREE.DirectionalLight(0xFFFFFF, 0.8);
directionalLight.position.set(100, 100, 100);
scene.add(ambientLight);
scene.add(directionalLight);

function drawTree() {
  // Create a group to hold the tree layers
  treeGroup = new THREE.Group();

  // Create the tree trunk using a CylinderGeometry
  var trunkGeometry = new THREE.CylinderGeometry(1, 1, 5);
  var trunkMaterial = new THREE.MeshPhongMaterial({ color: 0x8B4513, wireframe: false });
  var trunk = new THREE.Mesh(trunkGeometry, trunkMaterial);
  treeGroup.add(trunk);

  // Create the cone geometries for the tree layers
  var coneGeometry = new THREE.ConeGeometry(4.8, 6, 50);
  var coneMaterial = new THREE.MeshPhongMaterial({
    color: 0xC1D343, wireframe: false });


  // Create and position the five tree layers
  var layer1 = new THREE.Mesh(coneGeometry, coneMaterial);
  layer1.position.y = 4.5;
  treeGroup.add(layer1);

  var layer2 = new THREE.Mesh(coneGeometry, coneMaterial);
  layer2.scale.set(0.8, 0.8, 0.8);
  layer2.position.y = 7;
  treeGroup.add(layer2);

  va.........完整代码请登录后点击上方下载按钮下载查看