光照与阴影
光照与阴影
Super_Calvin
每周创作更新一些webGl、ThreeJS渲染三维模型,并写出一些心得技巧,感谢关注~~~
展开
-
灯光摆动(light pendulum)
灯光摆动light pendulum示例HTMLCSS更多有趣示例 尽在小红砖社区示例HTML<svg viewBox="-50 0 700 300"> <defs> <clipPath id="text-1"> <text id="Mask" font-family="Montserrat-Black, Montserrat" font-size="200" font-weight="700" letter-spacing="原创 2020-07-09 12:02:10 · 178 阅读 · 0 评论 -
平面图两侧边界虚化
平面图两侧边界虚化示例HTMLCSSJS更多有趣示例 尽在知屋安砖社区示例HTML<canvas></canvas>CSS*,*:before,*:after { margin: 0; padding: 0; box-sizing: border-box;}canvas { width: 100vw; height: 100vh;}JS// Rendererconst canvas = document.querySelecto原创 2020-12-08 14:49:03 · 292 阅读 · 0 评论 -
SPE Particles(诡异的粒子)
SPE Particles(诡异的粒子)示例HTMLCSSJS更多有趣示例 尽在小红砖社区示例HTML<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>ThreeJS Spinning Cube</title> </head> <body> </body></html>CSS bod原创 2020-06-04 16:46:25 · 233 阅读 · 0 评论 -
颜色透明(transparency color accuracy)
颜色透明(transparency color accuracy)示例JS更多有趣示例 尽在小红砖社区示例JSvar CUBE_COLOR = 0x00ff00;var SQUARE_COLOR = 0x009cde;var scene = new THREE.Scene();var camera = new THREE.PerspectiveCamera( 50, window.innerWidth/window.innerHeight, 0.1, 1000,);v原创 2020-06-04 16:38:50 · 413 阅读 · 0 评论 -
ThreeJS + CannonJS
ThreeJS + CannonJS示例HTMLJS示例HTML<html lang="en"><head> <meta charset="UTF-8" /> <title>ThreeJS + CannonJS Physics Test</title> <style> body { ...原创 2020-05-06 15:56:20 · 945 阅读 · 0 评论 -
黎明(dawn)
黎明(dawn)示例HTMLJS示例HTML<html> <head> <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> <title>[dawn]</title&...原创 2020-03-12 10:48:09 · 276 阅读 · 0 评论 -
海上生明月,天涯共此时(Moon)
海上生明月,天涯共此时示例HTMLCSSJS示例HTML<div id="WebGL-output"></div><div id="Stats-output"></div><div id="container"></div><script src="/libs/threejs//three.r79.min....原创 2020-02-06 10:18:28 · 278 阅读 · 0 评论 -
无限变幻场景(Fluctuation)
无限变幻场景(Fluctuation)示例HTMLCSSJS示例HTML<!-- Parametric surface with THREE.js--><h1 class="kern">無限に</h1><a href="https://esmes.fi"><span class="kern tagline">esmes...原创 2020-02-05 09:17:55 · 344 阅读 · 0 评论 -
光芒四射(Shining)
光芒四射(Shining)示例HTMLCSSJS示例HTML<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/88/three.min.js"></script><script id="vertexShader" type="x-shader/x-vertex"> void...原创 2020-02-05 09:10:39 · 705 阅读 · 0 评论 -
调光开光(Dimmer Switch)
如何在界面中添加一个调光开关?示例HTMLCSSJS示例HTML.switch .switch__faceplate button.switch__button .switch__button-face .switch__button-dim-markerCSS* -webkit-tap-highlight-color transparen...原创 2020-01-02 14:36:40 · 899 阅读 · 0 评论 -
太阳光影(Sun and shadow)
太阳光影示例HTMLJS示例HTML<script src="//cdnjs.cloudflare.com/ajax/libs/three.js/r61/three.min.js"></script><script src="https://stemkoski.github.io/Three.js/js/Detector.js"></script...原创 2020-01-02 14:05:54 · 362 阅读 · 0 评论 -
太阳光影试验(Sun and shadow)
太阳光影示例JS示例JS/* my editor width */console.clear();document.addEventListener('DOMContentLoaded', ()=>{ let scene, camera, renderer, o...原创 2020-01-02 11:11:45 · 415 阅读 · 0 评论 -
灵动的金色火焰(Flame Of Gold)
灵动的金色火焰(Golden Flame)示例HTMLCSSJS示例HTML<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/88/three.min.js"></script><script id="vertexShader" type="x-shader/x-vertex">...原创 2020-01-02 10:53:28 · 424 阅读 · 0 评论