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="importmap">
  {
    "imports": {
      "three": "//repo.bfw.wiki/bfwrepo/js/module/three/build/166/three.module.js",
      "three/addons/": "//repo.bfw.wiki/bfwrepo/js/module/three/examples/166/jsm/"
    }
  }
</script>

  <script type="module" >
      import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js';

console.clear();

class BimetallicRing3 extends THREE.Mesh{
  constructor(R, r, h, s, c){
    super();
    
    this.u = {
      colors: {value: Array.from({length: c.length}, cVal => {return new THREE.Color(cVal)})},
      h: {value: h}
    }
    console.log(this.u.colors)
    let quart = Math.PI * 0.5;
    let profilePath = new THREE.Path()
      .absarc(R - s, h * 0.5, s, quart * 0, quart * 1)
      .absarc(r + s, h * 0.5, s, quart * 1, quart * 2)
      .absarc(r + s, h * -0.5, s, quart * 2, quart * 3)
      .absarc(R - s, h * -0.5, s, quart * 3, quart * 4)
    profilePath.autoClose = true;
    let g = new THREE.LatheGeometry(
      profilePath.getPoints(50),
      72
    )
    let m = new THREE.MeshStandardMaterial({
      metalness: 1,
      roughness: 0,
      onBeforeCompile: shader => {
        shader.uniforms.colors = this.u.colors;
        shader.uniforms.h = this.u.h;
        shader.vertexShader = `
          varying vec3 vPos;
          ${shader.vertexShader}
        `.replace(
          `#include <begin_vertex>`,
          `#include <begin_vertex>
            vPos = transformed;
          `
        );
        //console.log(shader.vertexShader);
        shader.fragmentShader = `
          #define p(a) abs( fract(( 2.0 * uShift + a ) / 2.0 ) - 0.5)
          uniform vec3 colors[${c.length}];
          uniform float h;
          varying vec3 vPos;

          ${shader.fragmentShader}
  .........完整代码请登录后点击上方下载按钮下载查看