three实现三维立体被切成片的小球代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：three实现三维立体被切成片的小球代码

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

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

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

  
  
  
<style>
html, body {
  padding: 0;
  margin: 0;
}

body {
  background-color: #4C22AB;
  margin: 0;
}
</style>


</head>

<body translate="no">
    
      <script type="importmap">
  {
    "imports": {
      "three": "//repo.bfw.wiki/bfwrepo/js/module/three/build/171/three.module.js",
     
      "three/addons/": "//repo.bfw.wiki/bfwrepo/js/module/three/examples/171/jsm/"
    }
  }
</script>


<script id="fragmentShader" type="x-shader/x-fragment">

	varying vec2 vUv;
	varying vec3 vPos;
	varying vec3 vNormal;
	//varying vec4 vViewMatrix;
	
	
	uniform float time;

	void main(){
		
		float l = length(vPos);
		if(l<1.){
			l=1.;
		}else{
			l=0.;
		}
		float height = (2. * (vPos.y+1.)/2.)-0.2;
		//height = (2.*height)+0.5;
		//height = 0.3*pow(height,2.) + 0.2*height;
		//height = height + 0.5;
		
		height = pow(height,2.);
		float radius = pow(length(vPos.xz)+0.5,0.5);
		
		vec3 sunDir = vec3(0,0.,1.);
		float sunNess = dot(vNormal,sunDir);
		float brightness = (height * radius) + (sunNess*0.05);
		
		vec3 colB = vec3(247., 37., 133.)/255.;
		vec3 colA = vec3(114., 9., 183.)/300.;
		vec3 col = mix(colA,colB,brightness);
		
		gl_FragColor = vec4(col,l);

	}

</script>

<script id="vertexShader" type="x-shader/x-vertex">

	uniform vec2 uvScale;
	
	varying vec2 vUv;
	varying vec3 vPos;
	varying vec3 vNormal;
	//varying vec4 vViewMatrix;
	
	void main()
	{	
		//vViewMatrix = modelViewMatrix;
		vNormal = normalMatrix * normal;
		vPos = position;
		vUv = uvScale * uv;
		if(length(vPos) < 0.001){
			
		}else{
			vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
			gl_Position = projectionMatrix * mvPosition;
		}

	}
	

</script>

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

import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js';
//import { RoundedBoxGeometry } from "three/addons/geometries/RoundedBoxGeometry.js";
import { FXAAShader } from 'three/addons/shaders/FXAAShader.js';
import { createNoise3D } from "//repo.bfw.wiki/bfwrepo/js/module/simplex-noise.js";


class ThreeSketch {
	constructor() {
		this.renderer = new THREE.WebGLRenderer({ alpha: true });
		this.renderer.setSize(window.innerWidth, window.innerHeight);
		this.renderer.setClearColor( 0x000000, 0 ); // the default
		document.body.appendChild(this.renderer.domElement);
		this.framerate = 60;
		this.scene = new THREE.Scene();
		//this.scene.background = 0x050505;

		this.camera = new THREE.PerspectiveCamera(
			15,
			window.innerWidth / window.innerHeight,
			1,
			10000
		);

		this.controls = new OrbitControls(this.camera, this.renderer.domElement);
		//this.controls.enableDamping = true;
		this.controls.rotateSpeed = 0.4;
		this.controls.minPolarAngle = 0.1 * Math.PI;
		this.controls.maxPolarAngle = 0.9 * Math.PI;

		//controls.update() must be called after any manual changes to the camera's transform
		this.camera.position.set(2, 2, 10);
		//this.controls.update();
		
		
		this.fxaaPass = new ShaderPass( FXAAShader );

		const outputPass = new OutputPass();
		const renderPass = new RenderPass( this.scene, this.camera );
		renderPass.clearAlpha = 0;

		//

		const pixelRatio = this.renderer.getPixelRatio();
		
		this.fxaaPass.material.uniforms[ 'resolution' ].value.x = 1;
		this.fxaaPass.material.uniforms[ 'resolution' ].value.y = 1;

		this.composer2 = new EffectComposer( this.renderer );
		
		this.composer2.addPass( renderPass );
		this.composer2.addPass( outputPass );
		// FXAA is engineered to be applied towards the end of engine post processing after conversion to low dynamic range and conversion to the sRGB color space for display.
		this.composer2.addPass( this.fxaaPass );


		
		
		window.addEventListener("resize", () => {
			this.onResize();
		});
		this.onResize();
	}
	onResize() {
		const width = window.innerWidth;
		const height = window.innerHeight;
		this.renderer.setSize(width, height);
		this.renderer.setPixelRatio( window.devicePixelRatio );
		this.composer2.setSize( width, height );
		
		const pixelRatio = this.renderer.getPixelRatio();
		this.fxaaPass.material.uniforms[ 'resolution' ].value.x = 1 / ( width * pixelRatio );
		this.fxaaPass.material.uniforms[ 'resolution' ].value.y = 1 / ( height * pixelRatio );

		this.camera.aspect = width / height;
		this.camera.updateProjectionMatrix();
	}
	render(){
		this.controls.update();

		if (this.animFrameCallBack) {
			this.animFrameCallBack();
		}
		this.composer2.render();
		//this.renderer.render(this.scene, this.camera);
	}
	animate(callback) {
		if (callback) {
			this.animFrameCallBack = callback.........完整代码请登录后点击上方下载按钮下载查看