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 >
  <script>
  // https://github.com/yiwenl/glsl-fbm/blob/master/3d.glsl
  const fbm = `
  #define NUM_OCTAVES 5

  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);
  }


  float fbm(vec3 x) {
    float v = 0.0;
    float a = 0.5;
    vec3 shift = vec3(100);
    for (int i = 0; i < NUM_OCTAVES; ++i) {
      v += a * noise(x);
      x = x * 2.0 + shift;
      a *= 0.5;
    }
    return v;
  }
  `;
</script>
  
  
      <script type="module">
import * as THREE from "//repo.bfw.wiki/bfwrepo/js/module/three/build/three.module.js";
import { OrbitControls } from "//repo.bfw.wiki/bfwrepo/js/module/three/examples/jsm/controls/OrbitControls.js";
import { RoomEnvironment } from "//repo.bfw.wiki/bfwrepo/js/module/three/examples/jsm/environments/RoomEnvironment.js";

let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 1, 1000);
camera.position.set(0, 0, 4.5);
let renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);
window.addEventListener("resize", event => {
  camera.aspect = innerWidth / innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(innerWidth, innerHeight);
});

const pmremGenerator = new THREE.PMREMGenerator(renderer);
const bgt = pmremGenerator.fromScene(new RoomEnvironment(), 0.04).texture;
scene.environment = bgt;
scene.background = bgt;

let controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.enablePan = false;

//scene.add(new THREE.AxesHelper());

let light = new THREE.DirectionalLight(0xffffff, 0.2);
light.positi.........完整代码请登录后点击上方下载按钮下载查看