three.js做的冰激凌球球

3d icecream with three.js

webgl, three, food

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

// From https://www.ilithya.rocks/

// CREATE LOADER
let loadingManager = null;
let ASSETS_LOADED = false;
const loadingScreen = {
    scene: new THREE.Scene(),
    camera: new THREE.PerspectiveCamera(
        75,
        window.innerWidth / window.innerHeight,
        0.1,
        100
    ),
    removeText() {
        const loadingText = document.querySelector("#canvas-loader");
        if (loadingText.parentNode) {
            loadingText.parentNode.removeChild(loadingText);
        }
    }
};

// CREATE RENDERED WORLD
const nearDist = 1;
const farDist = 1000;
const camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    nearDist,
    farDist
);
const scene = new THREE.Scene();
const renderer = new THREE.WebGLRenderer({
    antialias: true
});
const canvasWrapper = document.querySelector("#canvas-wrapper");

const init = () => {
    // Initialize loader
    loadingManager = new THREE.LoadingManager();
    loadingManager.onLoad = () => {
        loadingScreen.removeText();
        ASSETS_LOADED = true;
    };

// Initialize rendered world
    camera.position.set(0, 0, 220);

renderer.setClearColor("hotpink");
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);

canvasWrapper.appendChild(renderer.domElement);
};
init();

// Add light for MeshPhongMaterial to be visible in scene
const light = new THREE.DirectionalLight();
light.position.set(0, 0, 1);
scene.add(light);

// CREATE WORLD
const cRadius = 100;
const geometry = new THREE.SphereBufferGeometry(
    cRadius,
    cRadius * 6.4,
    cRadius * 6.4
);

const textureLoader = new THREE.TextureLoader(loadingManager);
const textureSurface = textureLoader.load(
    "/uploads/2003/world-surface.jpg"
);
const textureElevation = textureLoader.load(
    "/uploads/2003/world-elevation.jpg"
);
const textureSpecular = textureLoader.load(
    "/uploads/2003/world-specular.jpg"
);

// FYI: Another intersting color for emissive light is "#101f33" - blueish-black
const emissiveLight = "#3f1949"; // dark purple
const materialOptions = {
    emissive: emissiveLight,
    map: textureSurface,
    normalMap: textureElevation,
    specularMap: textureSpecular,
    shininess: 80
};
const coloredMaterial = new THREE.MeshPhongMaterial(materialOptions);
const sphere = new THREE.Mesh(geometry, coloredMaterial);
scene.add(sphere);

// CREATE WORLD COLOR TOGGLE
const materialMonoOptions = Object.create(materialOptions);
materialMonoOptions.emissive = "hotpink";
const monochromeMaterial = new THREE.MeshPhongMaterial(materialMonoOptions);

const toggle = {
    btn: document.querySelectorAll("#canvas-toggle button"),
    updateMaterial(mode) {
        const toggleMaterial =
            mode === "monochrome" ? monochromeMaterial : coloredMaterial;

sphere.material = toggleMaterial;
        sphere.material.needsUpdate = true;
    },
    checkActiveBtn() {
        this.btn.forEach((el) => {
            el.addEventListener("click", (e) => {
                e.preventDefault();

const target = e.currentTarget;

this.btn.forEach((l) => delete l.dataset.active);
                target.dataset.active = true;

this.updateMaterial(target.dataset.mode);
            });
        });
    }
};
toggle.checkActiveBtn();

// CREATE PART OF THE MOUSE/TOUCH OVER EFFECT
let mouseX = 0;
let mouseY = 0;
const mouseFX = {
    coordinates(cX, cY) {
            const limit = 280;
            const limitNeg = limit * -1;

mouseX = cX - window.innerWidth / 2;
            mouseY = cY - window.innerHeight / 2;

mouseX = mouseX >= limit ? limit : mouseX;
            mouseX = mouseX <= limitNeg ? limitNeg : mouseX;

mouseY = mouseY >= limit ? limit : mouseY;
            mouseY = mouseY <= limitNeg ? limitNeg : mouseY;
        },
        onMouseMove(e) {
            e.preventDefault();
            mouseFX.coordinates(e.clientX, e.clientY);
        },
        onTouchMove(e) {
            e.preventDefault();
            mouseFX.coordinates(e.changedTouches[0].clientX, e.changedTouches[0].clientY);
        }
};
document.addEventListener("mousemove", mouseFX.onMouseMove);
document.addEventListener("touchmove", mouseFX.onTouchMove);

// RESIZE CANVAS
// Weird resize glitch on Safari, so not loving this...
const onWindowResize = () => {
    const w = window.innerWidth;
    const h = window.innerHeight;

camera.aspect = w / h;
    camera.updateProjectionMatrix();

renderer.setSize(w, h);
};
window.addEventListener("resize", onWindowResize);

// CREATE ANIMATION
const createAnimRotation = () => {
    const speed = 0.005;

sphere.rotation.z += speed / 2;
    sphere.rotation.y += speed;
};

// RENDER 3D GRAPHIC
const render = () => {
    if (!ASSETS_LOADED) {
        renderer.render(loadingScreen.scene, loadingScreen.camera);
        requestAnimationFrame(render);
        return;
    }

camera.position.x += (mouseX * -1 - camera.position.x) * 0.05;
    camera.position.y += (mouseY - camera.position.y) * 0.05;
    camera.lookAt(scene.position);

createAnimRotation();

renderer.render(scene, camera);

requestAnimationFrame(render);
};
render();

编译

CSS

$c1: hotpink;
$c2: #fffffd; // white

* {
	user-select: none;
}

.p-text {
	color: $c2;
	font-family: Helvetica, Arial, sans-serif;
	line-height: 1.5;
	text-align: center;
	text-transform: lowercase;
}

.p-flex-hzt-center {
	display: flex;
	justify-content: center;
}

body {
	height: 100vh;
	background-color: $c1;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

.loader {
	width: 100%;
	height: 100%;
	font-size: 0.6rem;
	letter-spacing: 3px;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 120;
	
	align-items: center;
	
	span {
		font-size: 1rem;
	}
}

.toggle {
	width: 100%;
	position: absolute;
	bottom: 20px;
	left: 0;
	z-index: 90;
	
	&__btn {
		$gap: 5px;
		
		background-color: $c1;
		border: 1px solid $c2;
		cursor: pointer;
		font-size: 0.55rem;
		letter-spacing: 2px;
		outline: none;
		padding: $gap round($gap * 2.5);
		transition: background-color 0.2s ease-in-out;
		-webkit-tap-highlight-color: rgba(0,0,0,0);

&:last-child {
			border-left: 0;
		}
		
		&[data-active] {
			background-color: $c2;	
			color: $c1;
			font-weight: bold;
		}
	}
}

HTML

3d icecream with three.js

webgl, three, food

编辑器支持Emmet

快捷键

3d icecream with three.js

webgl, three, food

three.js地面被转动球体碾压弯曲的动画仿真

three.js shader构建带光晕和变形特效的球体

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：