three实现照片变成三维圆球动画效果代码-html代码-BFW代码库

three实现照片变成三维圆球动画效果代码

代码语言：html

所属分类：三维

代码描述：three实现照片变成三维圆球动画效果代码

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

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

<head>

  <meta charset="UTF-8">

  
  
  
<style>
body {
  margin: 0;
  overflow: hidden;
}
</style>



</head>

<body>
  <canvas id="webgl-canvas"></canvas>

<!-- vertexShader -->
<script id="js-vertex-shader" type="x-shader/x-vertex">
attribute vec3 position;
attribute vec3 spherePosition;
attribute vec4 color;
attribute vec2 texCoord;
uniform mat4 projectionMatrix;
uniform mat4 viewMatrix;
uniform mat4 modelMatrix;
uniform float time;
varying vec4 vColor;
varying vec2 vTexCoord;

void main()	{
  vColor = color;
  vTexCoord = texCoord;
  
  float s = (sin(time) + 1.0) * 0.5;
  
  vec3 p = mix(position, spherePosition, s);
  
  gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(p, 1.0);
  gl_PointSize = 4.0;
}
</script>

<!-- fragmentShader -->
<script id="js-fragment-shader" type="x-shader/x-fragment">
precision mediump float;
uniform sampler2D textureUnit;
varying vec4 vColor;
varying vec2 vTexCoord;

void main() {
  vec4 samplerColor = texture2D(textureUnit, vTexCoord);
  gl_FragColor = vColor * samplerColor;
}
</script>


<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.126.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OrbitControls.126.js"></script>
      <script >
class Stage {
  constructor() {
    this.renderParam = {
      clearColor: 0x666666,
      width: window.innerWidth,
      height: window.innerHeight };


    this.cameraParam = {
      fov: 60,
      near: 0.1,
      far: 10.0,
      lookAt: new THREE.Vector3(0, 0, 0),
      x: 0,
      y: 0,
      z: 3.0 };


    this.scene = null;
    this.camera = null;
    this.renderer = null;
    this.geometry = null;
    this.material = null;
    this.mesh = null;

    this.isInitialized = false;
  }

  init() {
    this._setScene();
    this._setRender();
    this._setCamera();

    this.isInitialized = true;
  }

  _setScene() {
    this.scene = new THREE.Scene();
  }

  _setRender() {
    this.renderer = new THREE.WebGLRenderer({
      canvas: document.getElementById("webgl-canvas") });

    this.renderer.setPixelRatio(window.devicePixelRatio);
    this.renderer.setClearColor(new THREE.Color(this.renderParam.clearColor));
    this.renderer.setSize(this.renderParam.width, this.renderParam.height);
  }

  _setCamera() {
    const windowWidth = window.innerWidth;
    const windowHeight = window.innerHeight;

    if (!this.isInitialized) {
      this.camera = new THREE.PerspectiveCamera(
      this.cameraParam.fov,
      windowWidth / windowHeight,
      this.cameraParam.near,
      this.cameraParam.far);


      this.camera.position.set(
      this.cameraParam.x,
      this.cameraParam.y,
      this.cameraParam.z);

      this.camera.lookAt(this.cameraParam.lookAt);

      this.orbitcontrols = new THREE.OrbitControls(
      this.camera,
      this.renderer.domElement);

      this.orbitcontrols.enableDamping = true;
    }

    this.camera.aspect = windowWidth / windowHeight;

    this.camera.fov = this.cameraParam.fov;
    this.camera.updateProjectionMatrix();
    this.re.........完整代码请登录后点击上方下载按钮下载查看