three实现三维表情小球合集效果代码-html代码-BFW代码库

three实现三维表情小球合集效果代码

代码语言：html

所属分类：三维

代码描述：three实现三维表情小球合集效果代码，16种不同的表情在一起。

下面为部分代码预览，完整代码请点击下载或在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/164/three.module.js",
      "three/addons/": "//repo.bfw.wiki/bfwrepo/js/module/three/examples/164/jsm/"
    }
  }
</script>
  
      <script  type="module">
import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";

console.clear();

let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(30, innerWidth / innerHeight, 1, 1000);
camera.position.set(0, 0, 15);
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 OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;

let light = new THREE.DirectionalLight(0xffffff, Math.PI);
light.position.setScalar(1);
scene.add(light, new THREE.AmbientLight(0xffffff, Math.PI * 0.5));

// atlas
let atlasSize = new THREE.Vector2(4, 4);
let atlas = ((dim) => {
  let c = document.createElement("canvas");
  let tileSize = 256;
  c.width = tileSize * dim.x;
  c.height = tileSize * dim.y;
  let u = (val) => tileSize * 0.01 * val;
  let ctx = c.getContext("2d");

  // debug
  ctx.fillStyle = "rgba(255, 255, 255, 1)";
  ctx.fillRect(0, 0, c.width, c.height);
  //ctx.clearRect(0, 0, c.width, c.height);

  for (let y = 0; y < dim.y; y++) {
    for (let x = 0; x < dim.x; x++) {
      generateSilly(x, y);
    }
  }

  let tex = new THREE.CanvasTexture(c);
  tex.colorSpace = "srgb";
  tex.anisotropy = renderer.capabilities.getMaxAnisotropy();
  return tex;

  function generateSilly(x, y) {
    ctx.save();
    ctx.translate((x + 0.5) * tileSize, (y + 0.5) * tileSize);
    // eyes
    ctx.lineWidth = u(5);
    ctx.lineCap = "round";
    ctx.strokeStyle = "rgba(127, 127, 127, 1)";
    drawEyes(25, -25, 15);
    drawNose();
    drawMouth();
    ctx.restore();
  }

  function drawMouth() {
    let p1 = [-25, Math.random() * 25];
    let p2 = [-10 + Math.random() * 20, Math.random() * 25];
    let p3 = [25, Math.random() * 25];
    ctx.beginPath();
    let yShift = 20;
    ctx.moveTo(u(p1[0]), u(yShift + p1[1]));
    ctx.quadraticCurveTo(
      u(p2[0]),
      u(yShift + p2[1]),
      u(p3[0]),
      u(yShift + p3[1])
    );
    ctx.stroke();
  }

  function drawNose() {
    ctx.beginPath();
    let arcStart = Math.random() * Math.PI * 2;
    let arcEnd = arcStart + (Math.random() * 0.75 + 0.25) * Math.PI * 2;
    ctx.arc(0, 0, u(Math.random() * 10 + 5), arcStart, arcEnd);
    ctx.stroke();
  }

  function drawEyes(x, y, radius) {
    let eyeSymmX = Math.sign(Math.random() - 0.5);
    let eyeSymmY = Math.sign(Math.random() - 0.5);
    //left
    ctx.fillStyle = "rgba(255, 255, 25.........完整代码请登录后点击上方下载按钮下载查看