three打造三维音乐卡通天使效果代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：three打造三维音乐卡通天使效果代码

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

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

<head>

  <meta charset="UTF-8">
  

  
  
<style>
html,
body {
  margin: 0;
  height: 100%;
  background: #22124a;
  overflow: hidden;
  perspective: 10rem;
}

.container {
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
}

#canvas {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.sky {
  width: 100%;
  height: 100%;
  opacity: 0.5;
  background: url("//repo.bfw.wiki/bfwrepo/image/603da313cc16a.png") repeat;
  background-size: cover;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
}
</style>



</head>

<body >
  <div class="container">
  <div class="sky"></div>
  <div id="canvas"></div>
</div>
<script type="x-shader/x-vertex" id="vertexshader">

  varying vec2 vUv;

      void main() {

        vUv = uv;

        gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );

      }
    </script>

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

  uniform sampler2D baseTexture;
      uniform sampler2D bloomTexture;

      varying vec2 vUv;

      void main() {

        gl_FragColor = ( texture2D( baseTexture, vUv ) + vec4( 1.0 ) * texture2D( bloomTexture, vUv ) );

      }
</script>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.123.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/GLTFLoader.js"></script>
<script  type="text/javascript"  src='//repo.bfw.wiki/bfwrepo/js/RGBELoader.js'></script>
<script  type="text/javascript"  src='//repo.bfw.wiki/bfwrepo/js/OrbitControls.js'></script>
      <script >
let scene,
camera,
controls,
fieldOfView,
aspectRatio,
nearPlane,
farPlane,
renderer,
container,
hdrCubeRenderTarget,
HEIGHT,
WIDTH,
hdrEquirect,
tinky,
particles,
raycaster;

const params = {
  color: 0x21024f,
  transmission: 0.9,
  envMapIntensity: 10,
  lightIntensity: 1,
  exposure: 0.5 };


const spheres = [];

const meshes = {};

const generateTexture = () => {
  const canvas = document.createElement("canvas");
  canvas.width = 2;
  canvas.height = 2;

  const context = canvas.getContext("2d");
  context.fillStyle = "white";
  context.fillRect(0, 1, 2, 1);

  return canvas;
};

const createScene = () => {
  HEIGHT = window.innerHeight;
  WIDTH = window.innerWidth;

  raycaster = new THREE.Raycaster();

  scene = new THREE.Scene();

  aspectRatio = WIDTH / HEIGHT;
  fieldOfView = 60;
  nearPlane = 1;
  farPlane = 10000;
  camera = new THREE.PerspectiveCamera(
  fieldOfView,
  aspectRatio,
  nearPlane,
  farPlane);


  camera.position.x = 0;
  camera.position.z = 500;
  camera.position.y = -10;

  renderer = new THREE.WebGLRenderer({
    alpha: true,
    antialias: true });

  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(WIDTH, HEIGHT);

  renderer.shadowMap.enabled = true;
  renderer.shadowMap.type = THREE.PCFSoftShadowMap;
  renderer.toneMapping = THREE.ACESFilmicToneMapping;
  renderer.toneMappingExposure = 2;

  container = document.getElementById("canvas");
  container.appendChild(renderer.domElement);

  window.addEventListener("resize", handleWindowResize, false);

  scene.add(tinky);

  controls = new THREE.OrbitControls(camera, renderer.domElement);
  controls.maxDistance = 1000;
  controls.maxAzimuthAngle = 1;
  controls.minAzimuthAngle = -1;
};

const positionElements = () => {
  meshes.bigStar.position.y = -1.7;
  meshes.bigStar.position.x = -2.2;
  meshes.bigStar.position.z = 0.8;
  meshes.bigStar.rotation.z = -0.5;

  meshes.littleStar.position.y = -1.75;
  meshes.littleStar.position.x = 1.75;
  meshes.littleStar.position.z = 0.6;
  meshes.littleStar.rotation.z = 0.5;

  meshes.planet.position.y = 1.3;
  meshes.planet.position.x = 2.6;
  meshes.planet.position.z = 1;

  meshes.ClosedLeftEye.visible = false;
  meshes.ClosedRightEye.visible = false;
};

const handleWindowResize = () => {
  HEIGHT = window.innerHeight;
  WIDTH = window.innerWidth;
  renderer.setSize(WIDTH, HEIGHT);
  camera.aspect = WIDTH / HEIGHT;
  camera.updateProjectionMatrix();
};

const createLights = () => {
  const ambientLight = new THREE.AmbientLight(0xaa54f0, 1);

  const directionalLight1 = new THREE.DirectionalLight(0xffffff, 1);
  directionalLight1.position.set(-2, 2, 5);

  const directionalLight2 = new THREE.DirectionalLight(0xfff000, 1);
  directionalLight2.position.set(-2, 4, 4);
  directionalLight2.castShadow = true;

  scene.add(ambientLight, directionalLight1, directionalLight2);
};

const createBubbles = () => {
  const pmremGenerator = new THREE.PMREMGenerator(renderer);
  hdrCubeRenderTarget = pmremGenerator.fromEquirectangular(hdrEquirect);
  hdrEquirect.dispose();
  pmremGenerator.dispose();

  const bubbleTexture = new THREE.CanvasTexture(generateTexture());
  bubbleTexture.repeat.set(1);

  const bubbleMaterial = new THREE.MeshPhysicalMaterial({
    color: params.color,
    metalness: 0,
    roughness: 0,
    alphaMap: bubbleTexture,
    alphaTest: 0.5,
    envMap: hdrCubeRenderTarget.texture,
    envMapIntensity: params.envMapIntensity,
    depthWrite: false,
    transmission: params.transmission,
    opacity: 1,
    transparent: true });


  const bubbleMaterial1b = new THREE.MeshPhysicalMaterial().copy(
  bubbleMaterial);

  bubbleMaterial1b.side = THREE.BackSide;

  const bubbleGeometry1 = new THREE.SphereBufferGeometry(170, 64, 32);
  const bubbleGeome.........完整代码请登录后点击上方下载按钮下载查看