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 translate="no">
  <script type="importmap">
  {
    "imports": {
      "three": "//repo.bfw.wiki/bfwrepo/js/module/three/build/171/three.webgpu.js",
      "three/webgpu": "//repo.bfw.wiki/bfwrepo/js/module/three/build/171/three.webgpu.js",
      "three/tsl": "//repo.bfw.wiki/bfwrepo/js/module/three/build/171/three.tsl.js",
      "three/addons/": "//repo.bfw.wiki/bfwrepo/js/module/three/examples/171/jsm/"
    }
  }
</script>
  
      <script type="module">
import * as THREE from "three";
import * as tsl from "three/tsl";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";

import { pass, mrt, output, emissive } from "three/tsl";
import { bloom } from 'three/addons/tsl/display/BloomNode.js';

console.clear();

class Postprocessing extends THREE.PostProcessing {
  constructor(renderer) {
    const scenePass = pass(scene, camera);
    scenePass.setMRT(
    mrt({
      output,
      emissive }));



    const outputPass = scenePass.getTextureNode();
    const emissivePass = scenePass.getTextureNode("emissive");

    const bloomPass = bloom(emissivePass, 0.2, 0);

    super(renderer);

    // patch the result to add the BeerJS logo
    this.outputNode = outputPass.add(bloomPass);
  }}


class BoxOfLight extends THREE.Mesh {
  constructor() {
    let g = new THREE.BoxGeometry();
    let m = new THREE.MeshPhysicalNodeMaterial({
      side: THREE.DoubleSide,
      metalness: 0,
      roughnessNode: tsl.smoothstep(
      tsl.abs(
      tsl.dot(
      tsl.normalView,
      tsl.positionView.normalize().negate())),


      0.1,
      0.25).
      oneMinus(),
      transmission: 1,
      ior: 1.345,
      thickness: 1,
      emissiveNode: tsl.Fn(() => {
        let uv = tsl.uv().toVar();
        let absUV = uv.sub(0.5).abs().toVar();
        let maxUV = tsl.max(absUV.x, absUV.y);

        let fn = tsl.smoothstep(0.48, 0.49, maxUV);

        let col = tsl.color(0xaaccff).mul(2);

        return col.mul(fn);
      })() });

    super(g, m);

    [
    [1, 0, 0],
    [-1, 0, 0],
    [0, 1, 0],
    [0, -1, 0],
    [0, 0, 1],
    [0, 0, -1]].
    forEach(l => {
      let v = new THREE.Vector3(...l);
      let light = new THREE.SpotLight(0xaaccff, Math.PI * 10, 10, Math.PI * 0.75, 1, 2);
      light.position.copy(v);
      light.target.position.copy(v.multiplyScalar(2));
      this.add(light);
      this.add(lig.........完整代码请登录后点击上方下载按钮下载查看