threejs模拟下雨乌云效果-html代码-BFW代码库

threejs模拟下雨乌云效果

代码语言：html

所属分类：三维

代码描述：threejs模拟下雨乌云效果

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
body {
  margin: 0;
  overflow: hidden;
}
</style>

</head>
<body translate="no">
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/three.r118.js"></script>
<script>
window.addEventListener("load", init);

function init() {

  // 幅と高さを取得
  const width = window.innerWidth;
  const height = window.innerHeight;
  // それぞれの雲を格納する配列を作成
  const cloudParticles = [];

  // シーンを作成
  const scene = new THREE.Scene();

  // レンダラーを作成
  const renderer = new THREE.WebGLRenderer();
  scene.fog = new THREE.FogExp2(0x11111f, 0.002);
  renderer.setClearColor(scene.fog.color);
  document.body.appendChild(renderer.domElement);

  // カメラを作成
  const camera = new THREE.PerspectiveCamera(60, width / height, 1, 1000);
  camera.position.z = 1;
  camera.rotation.x = 1.16;
  camera.rotation.y = -0.12;
  camera.rotation.z = 0.27;

  // 環境光源を作成
  const ambient = new THREE.AmbientLight(0x555555);
  scene.add(ambient);

  // 平行光源を作成
  const directional = new THREE.DirectionalLight(0xffeedd);
  directional.position.set(0, 0, 1);
  scene.add(directional);

  // 点光源を作成
  const point = new THREE.PointLight(0x062d89, 30, 500, 1.7);
  point.position.set(200, 300, 100);
  scene.add(point);

  // 雲を作成
  const loader = new THREE.TextureLoader();
  loader.load("https://i.postimg.cc/TYvjnH2F/smoke-1.png", function (texture) {
    //　ジオメトリを作成
    const cloudGeometry = new THREE.PlaneBufferGeometry(500, 500);
    // マテリアルを作成
    const cloudMaterial = new THREE.MeshLambertMaterial({
      map: texture,
      transparent: true });

    for (let i = 0; i < 25; i++) {
      // メッシュを作成
      const cloud = new THREE.Mesh(cloudGeometry, cloudMaterial);
      cloud.position.set(
      Math.random() * 800 - 400,
      500,
      Math.random() * 500 - 450);

      cloud.rotation.x = 1.16;
      cloud.rotation.y = -0.12;
      cloud.rotation.z = Math.rando.........完整代码请登录后点击上方下载按钮下载查看