three实现三维玻璃多面体透明折射反射效果代码-html代码-BFW代码库

three实现三维玻璃多面体透明折射反射效果代码

代码语言：html

所属分类：三维

代码描述：three实现三维玻璃多面体透明折射反射效果代码

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

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

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
html, body {
	width: 100%;
	height: 100%;
	margin: 0;
}
</style>




</head>

<body >
  <!-- adapted from https://tympanus.net/codrops/2021/10/27/creating-the-effect-of-transparent-glass-and-plastic-in-three-js/ -->

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.146.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OrbitControls.145.js"></script>
<canvas></canvas>

  
      <script type="module">

const sketch = () => {

  // Setup
  // -----

  const canvas = document.querySelector('canvas');
  const renderer = new THREE.WebGLRenderer({ canvas });
  renderer.setClearColor(0x1f1e1c, 1);

  const camera = new THREE.PerspectiveCamera(45, 1, 0.01, 100);
  camera.position.set(0, 0, 5);

  const controls = new THREE.OrbitControls(camera, canvas);

  const scene = new THREE.Scene();

  // Content
  // -------

  const bgTexture = new THREE.TextureLoader().load("//repo.bfw.wiki/bfwrepo/image/63dca8896f791.png");

  const bgGeometry = new THREE.PlaneGeometry(5, 5);
  const bgMaterial = new THREE.MeshBasicMaterial({
    map: bgTexture
    // transparent: true,
    // opacity: 0.5
  });
  const bgMesh = new THREE.Mesh(bgGeometry, bgMaterial);
  bgMesh.po.........完整代码请登录后点击上方下载按钮下载查看