three实现三维带刻度转盘指针效果代码-html代码-BFW代码库

three实现三维带刻度转盘指针效果代码

代码语言：html

所属分类：三维

代码描述：three实现三维带刻度转盘指针效果代码

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

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

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

  
  
  
<style>
* {
	margin: 0;
}
</style>


  
  
</head>

<body>

  <script async src="//repo.bfw.wiki/bfwrepo/js/es-module-shims.1.6.2.js"></script>
<script type="importmap">
  {
    "imports": {
      "three": "//repo.bfw.wiki/bfwrepo/js/module/three/build/155/three.module.js",
      "three/addons/": "//repo.bfw.wiki/bfwrepo/js/module/three/examples/155/jsm/",
			"threeasy": "//repo.bfw.wiki/bfwrepo/js/module/threeasy.min.js"
    }
  }
</script>
  
      <script  type="module">
console.clear();

import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
import Threeasy from "threeasy";

class Damping {
  constructor(value = 0) {
    this.current = value;
    this.target = value;
    this.damping = .05;
  }
  update() {
    this.current = this.current - (this.current - this.target) * this.damping;
  }
  value() {
    return this.current;
  }
  set(value) {
    this.target = value;
  }}

const time = new Damping();

const app = new Threeasy(THREE, {
  light: false,
  preload: {
    clockface: "//repo.bfw.wiki/bfwrepo/image/658fc603e9e63.png" } });



app.camera.position.z = 2.25;

const bg = new THREE.Color(0xfdf0d5);
const white = new THREE.Color(0xffffff);
const lightRed = new THREE.Color(0xc1121f);
const red = new THREE.Color(0x780000);

app.scene.background = bg;

// ORBIT CONTROLS
new OrbitControls(app.camera, app.renderer.domElement);

app.postload(() => {
  // MATERIALS
  const whiteMat = new THREE.MeshPhysicalMaterial({
    color: white,
    metalness: .9,
    roughness: .5,
    reflectivity: 1,
    clearcoat: 1,
    clearcoatRoughness: 0 });

  const redMat = new THREE.MeshPhysicalMaterial({
    color: red,
    metalness: .9,
    roughness: .5,
    reflectivity: 1,
    clearcoat: 1,
    clearcoatRoughness: 0 });

  const faceMat = new THREE.MeshPhysicalMaterial().copy(whiteMat);
  faceMat.map = app.clockface;
  console.log(app.clockface);
  console.log(faceMat);
  const glassMat = new THREE.MeshPhysicalMaterial({
    color: white,
    transparent: true,
    opacity: .125,
    metalness: 1,
    ior: 1,
    roughness: 0,
    reflectivity: 1,
    clearcoat: 1,
    clearcoatRoughness: 0,.........完整代码请登录后点击上方下载按钮下载查看