three实现360度全景沙漠中晶莹剔透的玻璃球效果代码-html代码-BFW代码库

three实现360度全景沙漠中晶莹剔透的玻璃球效果代码

代码语言：html

所属分类：三维

代码描述：three实现360度全景沙漠中晶莹剔透的玻璃球效果代码，三维玻璃球反射周围环境，而且每个玻璃球内部还有不同的结构。

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


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

<head>

  <meta charset="UTF-8">

  
  
  
<style>
* {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
body{
  background-color:#222;
}
canvas {
  position:fixed;
  width:100%;
  height:100%;
}
</style>



</head>

<body  >

<script>
const imgData = '//repo.bfw.wiki/bfwrepo/image/63435b75e1598.png';
</script>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.144.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/ammo.wasm.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OrbitControls.144.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/AmmoPhysics.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/RGBELoader.128.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/perlin-min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/GroundProjectedEnv.js"></script>
      <script  >
"use strict";

!function () {
  let e,t,n,a,o,i,r,s,d,l,h,E,c = 10,M = 1;
  function m() {
    requestAnimationFrame(m), o.update(), a.render(t, n);
  }
  !async function () {
    E = await THREE.AmmoPhysics(), e = document.createElement("div"), document.body.appendChild(e),
    (a = new THREE.WebGLRenderer({
      antialias: !0,
      alpha: !0 })).
    setPixelRatio(window.devicePixelRatio), a.setSize(window.innerWidth, window.innerHeight),
    a.toneMapping = THREE.LinearToneMapping, a.toneMappingExposure = .8, a.outputEncoding = THREE.sRGBEncoding,
    a.shadowMap.enabled = !0, e.appendChild(a.domElement), t = new THREE.Scene(), (n = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, .01, 10 * c)).position.set(0, M, 7 * M),
    n.lookAt(0, M, 0), (o = new THREE.OrbitControls(n, a.domElement)).autoRotate = !0,
    o.autoRotateSpeed = 2, o.enableDamping = !0, o.enablePan = !1, o.minDistance = M,
    o.maxDistance = .5 * c * Math.sqrt(2), o.minPolarAngle = 0, o.maxPolarAngle = Math.PI / 2 * .99,
    o.target.set(0, M, 0), o.update(), t.add(new THREE.AmbientLight(16777215, 1));
    const p = new THREE.DirectionalLight(16777215, 3);
    p.castShadow = !0, p.position.set(.5 * c, .5 * c, .5 * -c), p.target.position.set(0, 0, 0),
    t.add(p);
    i = new THREE.BoxGeometry(3 * c, .1, 3 * c, 1);
    let w = new THREE.Mesh(i, new THREE.MeshStandardMaterial({
      color: 4210752,
      metalness: .5,
      roughness: .1 }));

    w.position.y = -.05, E.addMesh(w, 0), i = new THREE.IcosahedronGeometry(M, 30),
    r = new THREE.MeshPhysicalMaterial({
      transparent: !0,
      reflectivity: .2,
      envMapIntensity: 1,
      clearcoat: 0,
      color: 16777215,
      transmission: 1,
      opacity: 1,
      metalness: 0,
      roughness: 0,
      ior: 0,
      thickness: 0,
      specularIntensity: 1,
      specularColor: 16777215,
      side: THREE.BackSide }),
    (s = new THREE.Mesh(i, r)).position.set(0, 2 * M, 0), s.rotation.set(2 * Math.random() * Math.PI, 2 * Math.random() * Math.PI, 2 * Math.random() * Math.PI),
    s.castShadow = !0, s.receiveShadow = !0, t.add(s), E.addMesh(s, 1);
    let u = function (e) {
      let t, n, a;
      t = new THREE.BufferGeometry();
      const o = new Float32Array(2400),i = new Float32Array(2400),r = new Float32Array(800);
      for (let t = 0; t &l.........完整代码请登录后点击上方下载按钮下载查看