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(.........完整代码请登录后点击上方下载按钮下载查看