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

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

代码语言：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.big.........完整代码请登录后点击上方下载按钮下载查看