three实现三维天体小行星碎片运动代码-html代码-BFW代码库

three实现三维天体小行星碎片运动代码

代码语言：html

所属分类：三维

代码描述：three实现三维天体小行星碎片运动代码

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

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

<head>
  <meta charset="UTF-8">

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


  
  
</head>

<body translate="no">
    <script type="importmap">
  {
    "imports": {
      "three": "//repo.bfw.wiki/bfwrepo/js/module/three/build/164/three.module.js",
        "three/addons/": "//repo.bfw.wiki/bfwrepo/js/module/three/examples/164/jsm/"
     
    }
  }
</script>

<script>
  let noise = `float mod289(float x){return x - floor(x * (1.0 / 289.0)) * 289.0;}
vec4 mod289(vec4 x){return x - floor(x * (1.0 / 289.0)) * 289.0;}
vec4 perm(vec4 x){return mod289(((x * 34.0) + 1.0) * x);}

float noise(vec3 p){
    vec3 a = floor(p);
    vec3 d = p - a;
    d = d * d * (3.0 - 2.0 * d);

    vec4 b = a.xxyy + vec4(0.0, 1.0, 0.0, 1.0);
    vec4 k1 = perm(b.xyxy);
    vec4 k2 = perm(k1.xyxy + b.zzww);

    vec4 c = k2 + a.zzzz;
    vec4 k3 = perm(c);
    vec4 k4 = perm(c + 1.0);

    vec4 o1 = fract(k3 * (1.0 / 41.0));
    vec4 o2 = fract(k4 * (1.0 / 41.0));

    vec4 o3 = o2 * d.z + o1 * (1.0 - d.z);
    vec2 o4 = o3.yw * d.x + o3.xz * (1.0 - d.x);

    return o4.y * d.y + o4.x * (1.0 - d.y);
}`;
</script>
  
      <script  type="module">
import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";

class Asteroids extends THREE.InstancedMesh{
  constructor(amount = 5000){
    let dimension = 500;
    let g = new THREE.IcosahedronGeometry(1, 1);
    let m = new THREE.MeshLambertMaterial({
      color: "brown",
      flatShading: true,
      onBeforeCompile: shader => {
        shader.vertexShader = `
          ${noise}
          ${shader.vertexShader}
        `.replace(
          `#include <begin_vertex>`,
          `#include <begin_vertex>
          
          float iID = float(gl_InstanceID);
          float n = noise(position + iID);
          transformed += normalize(position) * n * 3.;
         
          `
        );
        console.log(shader.vertexSha.........完整代码请登录后点击上方下载按钮下载查看