Three.js 3D动画实例

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

let SCENE;
let CAMERA;
let RENDERER;
let CONTROLS;

main();

function main() {
  init();
  animate();
}

function init() {
  initScene();
  initCamera();
  initRenderer();
  initControls();
  initEventListeners();

createObjects();

document.querySelector('.canvas-container').appendChild(RENDERER.domElement);
}

function initScene() {
  SCENE = new THREE.Scene();

initLights();
}

function initLights() {
  const point = new THREE.PointLight(0x079fff, 2.5, 300, 1);
  point.position.set(0, 100, 50);
  SCENE.add(point);

const ambient = new THREE.AmbientLight(0x000510);
  SCENE.add(ambient);
}

function initCamera() {
  CAMERA = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 2000);
  CAMERA.position.y = 100;
  CAMERA.position.z = 100;
}

function initRenderer() {
  RENDERER = new THREE.WebGLRenderer({ alpha: true });
  RENDERER.setPixelRatio(window.devicePixelRatio);
  RENDERER.setSize(window.innerWidth, window.innerHeight);
  RENDERER.shadowMap.enabled = true;
  RENDERER.shadowMapSort = true;
  RENDERER.setClearColor(0x000510, 1);
  RENDERER.sortObjects = false;
}

function initControls() {
  CONTROLS = new THREE.OrbitControls(CAMERA);
  CONTROLS.enableZoom = false;
  CONTROLS.minPolarAngle = 0;
  CONTROLS.maxPolarAngle = Math.PI * 3 / 4;
  CONTROLS.update();
}

function initEventListeners() {
  window.addEventListener('resize', onWindowResize);

onWindowResize();
}

function onWindowResize() {
  CAMERA.aspect = window.innerWidth / window.innerHeight;
  CAMERA.updateProjectionMatrix();

RENDERER.setSize(window.innerWidth, window.innerHeight);
}

function animate() {
  requestAnimationFrame(animate);
  CONTROLS.update();

SCENE.traverse(child => {
    if (child.isMesh) {
      const shader = child.material.userData.shader;

if (shader) {
        shader.uniforms.uTime.value = performance.now() / 1000;
      }
    }
  });

render();
}

function render() {
  CAMERA.lookAt(SCENE.position);
  RENDERER.render(SCENE, CAMERA);
}

function createObjects() {
  const geometry = new THREE.SphereBufferGeometry(20, 64, 64);

const material1 = new THREE.MeshPhysicalMaterial({
    color: 0xffffff,
    reflectivity: 0.05,
    roughness: 0.7,
    transparent: true,
    side: THREE.FrontSide });

const material2 = new THREE.MeshPhysicalMaterial({
    color: 0xffffff,
    reflectivity: 0.01,
    roughness: 0.8,
    transparent: true,
    side: THREE.BackSide });

const onBeforeCompile = function (shader) {
    shader.uniforms.uTime = { value: 0.0 };

shader.vertexShader = shader.vertexShader.replace(
    `#include <uv_pars_vertex>`,
    `varying vec2 vUv;
            uniform float uTime;`);

shader.vertexShader = shader.vertexShader.replace(
    `#include <uv_vertex>`,
    `vUv = uv;`);

shader.vertexShader = shader.vertexShader.replace(
    `#include <begin_vertex>`,
    `float delta = abs(sin(uTime + position.y / 20.0)) / 4.0;
            mat3 m = mat3(1, 0, 0, 0, 1.0 + delta, 0, 0, 0, 1);
            vec3 transformed = vec3(position) * m;
            vNormal = vNormal * m;`);

shader.fragmentShader = shader.fragmentShader.replace(
    `varying vec3 vViewPosition;`,
    `varying vec3 vViewPosition;
            varying vec2 vUv;
            uniform float uTime;`);

shader.fragmentShader = shader.fragmentShader.replace(
    `#include <map_fragment>`,
    `if ((sin(100.0 * vUv.y + 5.0 * uTime + 3.14159 * 20.0 * vUv.x) > 0.0)
                || (vUv.y > 0.94 && vUv.y < 0.95) || (vUv.y > 0.05 && vUv.y < 0.06)) {
                diffuseColor = vec4(0.6, 0.6, 0.6, 1.0);
                
                float magic = abs(sin(9.0 * vUv.y + 2.0 * uTime + 3.14159 * vUv.x));
                
                if ((magic < 0.3)) {
                    diffuseColor = vec4(1.0);
                }
            } else {
                diffuseColor = vec4(0.0);
            }`);

this.userData.shader = shader;
  };

material1.onBeforeCompile = onBeforeCompile;
  material2.onBeforeCompile = onBeforeCompile;

const sphere1 = new THREE.Mesh(geometry, material1);
  const sphere2 = new THREE.Mesh(geometry, material2);

SCENE.add(sphere2);
  SCENE.add(sphere1);
}

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg