Three.js 光滑平面光照阴影动画特效

THREE LIGHT

three.js, light

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 7415
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

'use strict'

// 
// Constants
//
const lightCount = 7;
const colors = [
    '54BE68',
    '2CB060',
    '1AA261',
    '0C8D64',
    '037868'
];

// 
// Variabels
// 
const renderer = new THREE.WebGLRenderer();
const camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1000);
const scene = new THREE.Scene();
const lights = [];
let width, height, lastTime;

//
// Methods
//
function init() {
    const plane = new THREE.Mesh(
        new THREE.PlaneGeometry(100, 100),
        new THREE.MeshPhongMaterial({
            color: 0x11111f,
            side: THREE.DoubleSide,
            opacity: .95,
            transparent: true
        })
    );
    plane.position.y = -8;
    plane.rotateX(Math.PI * -.4);
    scene.add(plane);

// Create lights
    for (let i = 0; i < lightCount; i++) {
        const color = parseInt(colors[i % colors.length], 16);
        const light = new THREE.PointLight(color, 2, 50);
        light.add(
            new THREE.Mesh(
                new THREE.SphereGeometry(.5, 16, 8),
                new THREE.MeshBasicMaterial({
                    color
                })
            )
        );

scene.add(light);
        lights.push(light);
    }

camera.position.z = 100;
    renderer.setClearColor(new THREE.Color(0x11111));
    // renderer.setClearColor(new THREE.Color(0x111111));
    document.body.appendChild(renderer.domElement);
    resize();
    update(lastTime = performance.now());
}

function update(now) {
    requestAnimationFrame(update);

lights.forEach((light, index) => {
        light.position.y = Math.cos((now * (index * 0.5 + 1)) * 0.001) * 8;
        light.position.x = Math.sin((now * (index * 0.5 + 1)) * 0.001) * (5 + index * 4);
        light.position.z = Math.cos((now * (index * 0.5 + 1)) * 0.001) * (5 + index * 4);
    });

renderer.render(scene, camera);
}

function resize() {
    width = window.innerWidth;
    height = window.innerHeight;

camera.aspect = width / height;
    camera.updateProjectionMatrix();

renderer.setSize(width, height);
}

//
// Events
//
window.addEventListener('resize', resize);

// Start
init();

编译

CSS

HTML

THREE LIGHT

three.js, light

编辑器支持Emmet

快捷键

THREE LIGHT

three.js, light

Three.js 梦幻感觉的曲面光影流转动画

WebGL Three.js 全息投影（体积光 | 镭射光）特效着色器代码

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：