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 type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.157.js"></script>
  <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OrbitControls.145.js"></script>
      <script >

console.clear();

let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(30, innerWidth / innerHeight, 1, 1000);
camera.position.set(0, 10, 10).setLength(17);
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);
});

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

let gu = {
  time: { value: 0 } };


let params = {
  instanceCount: { value: 10 },
  instanceLength: { value: 1.75 },
  instanceGap: { value: 0.5 },
  profileFactor: { value: 1.5 } };


let ig = new THREE.InstancedBufferGeometry().copy(new THREE.BoxGeometry(1, 1, 1, 100, 1, 1).translate(0.5, 0, 0));
ig.instanceCount = params.instanceCount.value;

let m = new THREE.MeshBasicMaterial({
  vertexColors: true,
  onBeforeCompile: shader => {
    shader.uniforms.time = gu.time;
    shader.uniforms.instanceCount = params.instanceCount;
    shader.uniforms.instanceLength = params.instanceLength;
    shader.uniforms.instanceGap = params.instanceGap;
    shader.uniforms.profileFactor = params.profileFactor;
    shader.vertexShader = `
      uniform float time;
      
      uniform float instanceCount;
      uniform float instanceLength;
      uniform float instanceGap;
      
      uniform float profileFactor;
      
      varying float noGrid;
      
      mat2 rot(float a){return mat2(cos(a), sin(a), -sin(a), cos(a));}
      
      ${shader.vertexShader}
    `.replace(
    `#include <begin_vertex>`,
    `#include <begin_vertex>
      
        float t = time * 0.1;
        
        fl.........完整代码请登录后点击上方下载按钮下载查看