rybitten实现三维球形分割彩色切片效果代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：rybitten实现三维球形分割彩色切片效果代码

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

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

<head>
  <meta charset="UTF-8">
  

  
  
<style>
:root {
  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;
  color-scheme: light dark;
  color: var(--color-white, #fff);
  background-color: var(--color-black, #000);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  flex-wrap: wrap;
}

.controls {
  padding: 1rem;
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 300px;
  width: 100%;
  font-size: 0.85em;
}

.control-group {
  display: flex;
  flex-direction: column;
}

.control-group:has(a) {
  display: block;
}

label {
  color: color-mix(in srgb, var(--color-black), var(--color-white) 70%);
}

label:has(.value-display) {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

input {
  accent-color: var(--color-white);
}

input[type=range] {
  width: 100%;
  margin-top: 0.25em;
}

.value-display {
  font-family: monospace;
  color: var(--color-white, #000);
}

#sphereContainer {
  padding: 20px;
  touch-action: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  cursor: -webkit-grab;
  cursor: grab;
}
#sphereContainer svg {
  display: block;
  width: 400px;
  height: 400px;
}

.checkbox-group {
  gap: 10px;
  flex-direction: row;
  align-items: center;
}

#sphereContainer.dragging {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

.hide {
  display: none;
}

button {
  background: var(--color-white);
  color: var(--color-black);
  padding: 0.75rem;
  font: inherit;
  font-weight: bold;
  font-size: 1rem;
  border-radius: 0.25em;
}

select,
option {
  background: var(--color-black);
  color: var(--color-white);
  border: none;
  text-decoration: underline;
  font: inherit;
}

select {
  width: 100%;
  margin-top: 0.25em;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

a {
  color: color-mix(in oklab, skyblue, var(--color-white) 30%);
}
</style>


  
  
</head>

<body translate="no">
  <div id="sphereContainer"></div>

<div class="controls">
  <div class="control-group">
    <label>Hue Segments <span class="value-display" id="hueSegVal">12</span></label>
    <input type="range" id="hueSeg" min="3" max="36" value="12" step="1">
  </div>

  <div class="control-group">
    <label>Lightness Rings <span class="value-display" id="lightRingsVal">8</span></label>
    <input type="range" id="lightRings" min="1" max="24" value="8" step="1">
  </div>

  <div class="control-group hide">
    <label>Yaw <span class="value-display" id="yawVal">20°</span></label>
    <input type="range" id="yaw" min="0" max="360" value="20" step="1">
  </div>

  <div class="control-group hide">
    <label>Pitch <span class="value-display" id="pitchVal">30°</span></label>
    <input type="range" id="pitch" min="0" max="360" value="30" step="1">
  </div>

  <div class="control-group hide">
    <label>Roll: <span class="value-display" id="rollVal">0°</span></label>
    <input type="range" id="roll" min="0" max="360" value="0" step="1">
  </div>

  <div class="control-group checkbox-group">
    <input type="checkbox" id="showColors" checked>
    <label for="showColors">Show Color Patches</label>
  </div>

  <div class="control-group checkbox-group">
    <input type="checkbox" id="showBackside">
    <label for="showBackside">Show Backside</label>
  </div>

  <div class="control-group checkbox-group">
    <input type="checkbox" id="invert">
    <label for="invert">Invert B/W</label>
  </div>

  <div class="control-group">
    <label for="colorCube">Color Profile</label>
    <select id="colorCube">
    </select>
  </div>

  <div class="control-group">
    <button id="randomRollBtn">Roll Randomly</button>
  </div>
  <div class="control-group">
    Colors generated using <a href="https://rybitten.space/" target="_blank">RYBitten</a>
  </div>
</div>
  
    <script  type="module">
import { ryb2rgb, rybHsl2rgb } from "https://esm.sh/rybitten/";
import { cubes } from "https://esm.sh/rybitten/cubes";

const NS = 'http://www.w3.org/2000/svg';

const rybCubeSelect = document.querySelector("#colorCube");
const invertCheckbox = document.querySelector("#invert");

const sphereContainer = document.querySelector("#sphereContainer");
const yawInput = document.querySelector("#yaw");
const pitchInput = document.querySelector("#pitch");
const rollInput = document.querySelector(&qu.........完整代码请登录后点击上方下载按钮下载查看