WebGL Three.js三维西瓜籽雨

Three.js R84 watermelon rain

webgl, fruit

《three.js使用多个渐变torus模拟光环光晕》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

'use strict';

let scene,
    camera,
    renderer,
    controls,
    watermelon,
    mouse,
    mouseX = 0,
    mouseY = 0,
    seeds = [];

let width = window.innerWidth,
    height = window.innerHeight;

init();
animate();

function init() {
    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
    camera.lookAt(scene.position);
    camera.position.z = 730;

renderer = new THREE.WebGLRenderer();
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(width, height);
    renderer.setClearColor(0xF6F7F7);
    renderer.shadowMap.enabled = true;

controls = new THREE.OrbitControls(camera, renderer.domElement);
    controls.enableZoom = false;

const ambientLight = new THREE.AmbientLight();
    scene.add(ambientLight);

const light = new THREE.DirectionalLight();
    light.position.set(300, 200, 300);
    light.castShadow = true;
    scene.add(light);

// create a circle around the mouse to move seeds from it
    const mouseGeometry = new THREE.CircleGeometry(50);
    const mouseMaterial = new THREE.MeshBasicMaterial({
        transparent: true,
        opacity: 0
    });
    mouse = new THREE.Mesh(mouseGeometry, mouseMaterial);
    mouse.position.set(0, 0, -5);
    scene.add(mouse);

const loader = new THREE.TextureLoader();
    loader.crossOrigin = false;
    loader.load('https://res.cloudinary.com/elliepooh/image/upload/c_scale,w_512/v1490804096/texture_phz9sx.png', (texture) => {
        drawWatermelon(texture);
        drawSeeds();
    });

document.body.appendChild(renderer.domElement);

document.addEventListener('mousemove', onDocumentMouseMove);
    // document.addEventListener('touchstart', onDocumentTouchStart);
    // document.addEventListener('touchmove', onDocumentTouchMove);

window.addEventListener('resize', onResize);
}

function drawWatermelon(texture) {
    watermelon = new THREE.Object3D();
    scene.add(watermelon);

const rind = new THREE.Object3D();
    watermelon.add(rind);

const rindGeometry = new THREE.TorusGeometry(200, 40, 6, 8, 3.1);
    const rindMaterial = new THREE.MeshPhongMaterial({
        color: 0x448044,
        shading: THREE.FlatShading,
        side: THREE.DoubleSide
    });
    const rindFront = new THREE.Mesh(rindGeometry, rindMaterial);
    rind.add(rindFront);

const rindTopRight = new THREE.Mesh(new THREE.CylinderBufferGeometry(40.5, 40.5, 6, 6), rindMaterial);
    rindTopRight.rotateY(0.5);
    rindTopRight.position.x = 200;
    const rindTopLeft = rindTopRight.clone();
    rindTopLeft.rotateZ(-0.02);
    rindTopLeft.position.set(-200, 6, 0);
    rind.add(rindTopRight);
    rind.add(rindTopLeft);

const flesh = new THREE.Object3D();
    watermelon.add(flesh);

const fleshGeometry = new THREE.CylinderGeometry(200, 200, 80, 8, 2, false, 0, 3.1);
    const fleshMaterial = new THREE.MeshPhongMaterial({
        color: 0xfa9f99,
        shading: THREE.FlatShading,
        side: THREE.DoubleSide,
        map: texture,
    });
    const fleshFront = new THREE.Mesh(fleshGeometry, fleshMaterial);
    fleshFront.rotation.set(0, 1.57, 1.57);
    flesh.add(fleshFront);

const fleshTop = new THREE.Mesh(new THREE.BoxGeometry(80, 400, 10), fleshMaterial);
    fleshTop.rotation.set(1.57, -0.02, 1.57);
    flesh.add(fleshTop);

watermelon.position.y = 200;
}

function drawSeeds() {
    const seedGeometry = new THREE.CylinderGeometry(10, 10, 8, 5);
    const seedMaterial = new THREE.MeshPhongMaterial({
        color: 0x182B2F,
        shading: THREE.FlatShading
    });

const numOfLines = 16;
    const seedsInLine = 5;

for (let line = 0; line < numOfLines; line++) {
        for (let i = 0; i < seedsInLine; i++) {
            const seed = new THREE.Mesh(seedGeometry, seedMaterial);

const randomW = Math.random() * 50 - 200 + i * 80;
            const randomH = Math.random() * 50 + 130 - line * 50;
            seed.rotation.set(0, 1.57, 1.57);
            seed.position.set(randomW, randomH, 0);
            scene.add(seed);

seed.origX = seed.position.x;
            seed.origY = seed.position.y;
            seeds.push(seed);
        }
    }
}

function animate() {
    requestAnimationFrame(animate);

render();
}

function render() {

for (let s = 0, sl = seeds.length; s < sl; s++) {
        const seed = seeds[s];
        if (seed.position.y > -600) {
            seed.origY -= 0.5;
            seed.position.y -= 0.5;
        } else {
            seed.origY = Math.random() * 20 + 200;
            seed.origX = Math.random() * 50 - 200 + (s % 5) * 80;

seed.position.y = seed.origY;
            seed.position.x = seed.origX;
        }
    }

renderer.render(scene, camera);
}

function onResize() {
    width = window.innerWidth;
    height = window.innerHeight;
    camera.aspect = width / height;
    camera.updateProjectionMatrix();
    renderer.setSize(width, height);
}

function onDocumentMouseMove(event) {
    mouseX = (event.clientX / width) * 2 - 1;
    mouseY = -(event.clientY / height) * 2 + 1;

moveSeeds();
}

function moveSeeds() {
    // make the circle follow the mouse
    const vector = new THREE.Vector3(mouseX, mouseY, 1);
    vector.unproject(camera);
    const dir = vector.sub(camera.position).normalize();
    const distance = -camera.position.z / dir.z;
    const pos = camera.position.clone().add(dir.multiplyScalar(distance));
    mouse.position.copy(pos);

for (let s = 0, sl = seeds.length; s < sl; s++) {
        const seed = seeds[s];

const dx = (seed.origX - pos.x),
            dy = (seed.origY - pos.y),
            dz = (seed.position.z - pos.z);
        const dist = Math.sqrt(dx * dx + dy * dy);

if (dist < 100) {
            const len = Math.sqrt(dx * dx + dy * dy + dz * dz);

if (len == 0) return;
            const ndx = dx / len,
                ndy = dy / len;
            seed.position.x = seed.origX + ndx * 20;
            seed.position.y = seed.origY + ndy * 20;
        } else {
            seed.position.x = seed.origX;
            seed.position.y = seed.origY;
            seed.position.z = 0;
        }
    }
}

编译

CSS

HTML

Three.js R84 watermelon rain

webgl, fruit

编辑器支持Emmet

快捷键

Three.js R84 watermelon rain

webgl, fruit

WebGL Three.js三维单纯形噪音算法实例着色器代码

WebGL Three.js实现的三维空间镜面反射特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：