webgl图形化演示光照角度对物体表面颜色的影响

webgl directional light demo

webgl, light

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

"use strict";

function main() {
    const opt = getQueryParams();
    const lang = {
        lightDir: opt.lightDir || "light direction",
        dot: opt.dot || "dot(reverseLightDirection,surfaceDirection) = ",
        surface1: opt.surface1 || "surface",
        surface2: opt.surface2 || "direction",
    };
    var ctx = document.getElementById("canvas").getContext("2d");
    var direction = 0;

function radToDeg(rad) {
        return rad * 180 / Math.PI;
    }

function degToRad(deg) {
        return deg * Math.PI / 180;
    }

webglLessonsUI.setupSlider("#rotation", {
        value: radToDeg(direction),
        slide: updateDirection,
        min: -180,
        max: 180
    });

function updateDirection(event, ui) {
        direction = degToRad(ui.value);
        render();
    }

function render() {
        webglUtils.resizeCanvasToDisplaySize(ctx.canvas, window.devicePixelRatio);
        var width = 250;
        var height = 200;

var baseScale = Math.min(ctx.canvas.width / width, ctx.canvas.height / height);

ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
        ctx.save();
        ctx.translate(ctx.canvas.width / 2, ctx.canvas.height / 2);
        ctx.scale(baseScale, baseScale);

ctx.font = "8px sans-serif";
        ctx.textAlign = "center";
        ctx.textBaseline = "middle";

var lx = 0;
        var ly = -height / 5;

ctx.save();
        ctx.translate(lx, ly);

ctx.fillStyle = "#000";
        ctx.strokeSyole = "#000";
        var numArrows = 5;
        for (var ii = 0; ii <= numArrows; ++ii) {
            var u = ii / numArrows;
            var x = (u * 2 - 1) * 70;
            ctx.save();
            ctx.translate(x, 0);
            ctx.rotate(direction);
            diagram.arrow(ctx, 0, -20, 0, 20, false, true, 0.5);
            ctx.restore();
        }
        ctx.fillText(lang.lightDir, 0, -30);

ctx.restore();

var sx = 0;
        var sy = height / 6 + 10;

ctx.save();
        ctx.translate(sx, sy);

// draw surface
        diagram.roundedRect(ctx, -100, 0, 200, 20);
        var d = m3.dot(0, 1, Math.sin(direction), Math.cos(direction));
        ctx.fillStyle = diagram.hsl(0, 1, d - 0.5);
        ctx.fill();
        ctx.strokeStyle = diagram.rgb(0, 0, 0);
        ctx.stroke();

ctx.fillStyle = "#FFF";
        ctx.fillText(lang.dot + d.toFixed(2), 0, 10);

var nx = 0;
        var ny = -20;
        ctx.fillStyle = "#080";
        ctx.strokeStyle = "#080";
        diagram.arrow(ctx, 0, 0, nx, ny, false, true);
        ctx.fillText(lang.surface1, nx, ny - 22);
        ctx.fillText(lang.surface2, nx, ny - 14);

ctx.restore();

ctx.restore();
    }
    render();

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

main();

编译

CSS

/* Licensed under a BSD license. See ../license.html for license */

html {
    box-sizing: border-box;
}
*,
*:before,
*:after {
    box-sizing: inherit;
    user-select: none;
}
body {
    background-color: #aaa;
    font-family: Sans-Serif;
}
canvas {
    background-color: #fff;
    border: 1px solid black;
    /* NOTE: This size is changed if in iframe - see below '.iframe canvas' */
    
    width: 400px;
    height: 300px;
    display: block;
}
#uiContainer {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    font-family: monospace;
    pointer-events: none;
    text-shadow: -1px -1px 0 #FFF, 1px -1px 0 #FFF, -1px 1px 0 #FFF, 1px 1px 0 #FFF;
}
#ui {
    opacity: 0.8;
}
#ui>div {
    pointer-events: none;
}
#ui input,
#ui select,
#ui option,
#ui canvas {
    pointer-events: auto;
}
.gman-slider-label,
.gman-widget-label,
.gman-checkbox-label {
    font-size: small;
    min-width: 10em;
    text-align: right;
}
.gman-checkbox-label {
    pointer-events: auto;
}
.gman-widget-value {
    float: right;
    font-size: small;
    order: 1;
    min-width: 3em;
}
.gman-slider-upper {
    height: 1.5em;
}
.gman-slider-outer,
.gman-widget-outer {
    float: right;
    display: flex;
    align-items: center;
    height: 1.7em;
}
.gman-widget-slider,
.gman-widget-checkbox,
.gman-widget-select {
    opacity: 0.5;
    font-size: large;
    margin-left: .3em;
    margin-right: .3em;
}
.gman-widget-select {
    font-size: small;
}
.gman-widget-slider {
    min-width: 120px;
}
/* styles to apply if in an iframe */

html.iframe {
    height: 100vh;
}
body.iframe {
    width: 100vw;
    height: 100vh;
    margin: 0;
    overflow: hidden;
}
.iframe>.description {
    display: none;
}
.iframe .divcavnas {
    width: 100vw;
    height: 100vh;
}
.iframe canvas {
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    border: none;
}
.iframe>#example {
    width: 100%;
    height: 100%;
}
#ui #rotation>canvas {
    background-color: rgba(255, 255, 255, 0.6);
}
#ui {
    width: 200px;
}
.console {
    font-family: monospace;
    max-height: 50%;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: auto;
    background: #DDD;
}
.console>div {
    white-space: pre-wrap;
    border-top: 1px solid black;
    padding-left: 0.2em;
    padding-right: 0.2em;
}
.console>.error {
    background: red;
    color: white;
}
.contextlost {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    position: absolute;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    z-index: 10000;
}
.contextlost>div {
    padding: 1em;
    border-radius: 0.5em;
    background: red;
    color: white;
}
@media (max-width: 390px) {
    pre {
        font-size: xx-small !important;
        max-width: 300px !important;
    }
    canvas {
        width: 100vw;
    }
    .iframe canvas {
        width: 100vw;
        height: 100vh;
        border: none;
    }
    #uiContainer {
        top: 120px;
    }
    .iframe #uiContainer {
        top: 10px;
    }
}
body {
    background: white;
}
#uiContainer p {
    color: red;
    font-size: 12px;
    font-weight: bold;
}

HTML

webgl directional light demo

webgl, light

编辑器支持Emmet

快捷键

webgl directional light demo

webgl, light

原生webgl实现带高光照效果的三维球体

原生webgl绘制一个带漫反射光照效果的三维球体

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：