![](https://img-blog.csdnimg.cn/20191225160748946.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
几何图形
通过css+js+html做成三维模型之几何图形,展现三维几何效果
Super_Calvin
每周创作更新一些webGl、ThreeJS渲染三维模型,并写出一些心得技巧,感谢关注~~~
展开
-
立方体交错渲染
立方体交错渲染示例HTMLCSSJS更多有趣示例 尽在知屋安砖社区示例HTML<div id="canvas"> </div><script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/107/thr原创 2020-12-14 11:10:11 · 310 阅读 · 1 评论 -
加载等待动画2(Loading)
加载等待动画2(Loading)示例HTMLCSS示例HTML<div class="logo"></div><div class="star"> <div class="point"></div> <div class="point"></div> <div class="point">...原创 2020-02-06 10:59:21 · 213 阅读 · 0 评论 -
甜蜜的梦(sweet dreams)
甜蜜的梦(sweet dreams)示例CSSJS更多有趣示例 尽在小红砖社区示例CSS$color-1: #abedd8;$color-2: #46cdcf;$color-3: #3d84a8;$color-4: #112d4e;$base-size: 55vmin;$length: 100;$half: floor($length / 2);$time: 2s;$gap-size: $base-size / $half;$gap-dist: $base-size / $le原创 2020-05-12 16:52:57 · 294 阅读 · 0 评论 -
透明画布纹理
对ThreeJS使用透明画布纹理示例示例HTMLCSSJS更多有趣示例 尽在小红砖社区示例示例HTML<html><head> <script src="https://unpkg.com/three@0.85.0/build/three.min.js"></script> <script src="https://unpkg.com/three@0.85.0/examples/js/Detector.js"><原创 2020-06-09 14:28:55 · 211 阅读 · 0 评论 -
p5纹理(p5 texture)
p5 texture示例HTMLCSSJS更多有趣示例 尽在小红砖社区示例HTML<body> <div id='container'></div></body>CSSbody { margin: 0; display: flex; justify-content: center; align-items: center; background: black;}canvas:not(#p5Canvas) { width原创 2020-07-14 17:35:50 · 183 阅读 · 0 评论 -
SVG转换原点(SVG transform origin)
SVG转换原点(SVG transform origin)示例HTMLCSSJS更多有趣示例 尽在小红砖社区示例HTML<svg viewBox="-51 -51 102 102" width="100" height="100"> <g> <circle r="50" stroke-width="2" stroke="currentColor" fill="none" /> <path id="offset" d="M 0 -50 v原创 2020-09-04 14:39:14 · 2278 阅读 · 0 评论 -
双三角预加载器(loader)
双三角预加载器示例HTMLCSS示例HTML<main> <div class="cell"> <div class="pl pl-bow"></div> <div class="pl-name">Bow</div> </div> <div class="cell"> <...原创 2020-03-02 15:06:00 · 156 阅读 · 0 评论 -
立方体观察示例(View cube example)
立方体观察示例(View cube example)示例JS更多有趣示例 尽在知屋安砖社区示例JS// P/O Camera Testervar hostDiv, scene, renderer, light, o;var pCamera, watchCamera;var pControls;var pHelper, oHelper;var WIDTH = 600, HEIGHT = 300, FOV = 28, NEAR = 40, FAR =原创 2020-12-14 11:05:10 · 362 阅读 · 0 评论 -
三角形图案创建图案
三角形图案创建功能示例HTMLCSSJS更多有趣示例 尽在知屋安砖社区示例HTML<img alt="pattern" /><div class="ui"> <div class="ui__row"> <label for="themePicker">Theme</label> <select id="colorPicker"> <option selected value="purple原创 2020-12-09 14:47:19 · 279 阅读 · 0 评论 -
几何嵌入
几何嵌入示例HTMLJS更多有趣示例 尽在知屋安砖社区示例HTML<div style="background: 'black';"> <div> <label>Embedding of K6 in R3:</label> <div style="float: 'right';"> <button id='k6'>K6 Embedding in R3</button> <原创 2020-12-07 15:56:14 · 237 阅读 · 0 评论 -
六面几何模型
六面几何模型示例HTMLCSSJS更多有趣示例 尽在知屋安砖社区示例HTML<!DOCTYPE html><html lang='fr'> <head> <title>pen-hexa </title> <meta charset='utf-8'> <meta name='description' content='description...'> <meta name='viewport原创 2020-12-07 15:52:45 · 333 阅读 · 0 评论 -
光滑的圆环(glossy torus)
光滑的圆环(glossy torus)示例HTMLCSSJS更多有趣示例 尽在知屋安砖社区示例HTML<div id="threejs" /> CSSbody { margin: 0;}JSconst material = new THREE.MeshStandardMaterial({ color: 0x9400D3, emissive: 0x111111, specular: 0xffffff, metalness: 1, roughness原创 2020-12-07 15:29:06 · 257 阅读 · 0 评论 -
世界地图(the world map)
世界地图(the world map)示例HTMLCSSJS更多有趣示例 尽在知屋安砖社区示例HTML<div id="container"> <canvas id="c"></canvas> <div id="labels"></div> </div>CSSbody { margin: 0; font-family: sans-serif;}#c { width: 100原创 2020-12-07 15:24:07 · 1932 阅读 · 0 评论 -
不可思议的立方体
不可思议的立方体示例HTMLCSSJS更多有趣示例 尽在知屋安砖社区示例HTML<canvas></canvas><div class="vignette"></div><h1><em>Click to toggle from </em><span class='ortho active'>Orthographic Camera</span><em> to</em>原创 2020-12-07 15:08:46 · 270 阅读 · 0 评论 -
色彩饼状图(pie chart)
色彩饼状图(pie chart)示例HTMLJS更多有趣示例 尽在知屋安砖社区示例HTML<html lang="en"><head> <meta charset="UTF-8" /> <title>Three.js 101</title> <style> body { margin: 0; } canvas { width: 100%; height: 100% } </style&g原创 2020-12-07 15:01:37 · 1139 阅读 · 0 评论 -
3D对象蠕动
3D对象蠕动示例HTMLCSSJS更多有趣示例 尽在知屋安砖社区示例HTML<div id="blob"> <canvas></canvas></div><div class="controls"> <div> <label>Speed</label> <input type="range" min="10" max="120" value=原创 2020-12-07 14:54:42 · 200 阅读 · 0 评论 -
塔波
塔波示例HTMLCSSJS更多有趣示例 尽在知屋安砖社区示例HTML<html lang="en"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Threejs Cube Wave</title> <script sr原创 2020-11-20 15:41:12 · 208 阅读 · 0 评论 -
特殊几何形状渲染
特殊几何形状渲染示例HTMLCSSJS更多有趣示例 尽在知屋安砖社区示例HTML<canvas></canvas><div class="vignette"></div><h1><em>Click to toggle from </em><span class='ortho active'>Orthographic Camera</span><em> to</em>原创 2020-11-20 15:37:23 · 191 阅读 · 0 评论 -
天然颗粒12*12
天然颗粒示例HTMLCSSJS更多有趣示例 尽在知屋安砖社区示例HTML<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>ThreeJS Spinning Cube</title> </head> <body> </body></html>CSSbody { margin: 0; }原创 2020-11-20 15:33:31 · 112 阅读 · 0 评论 -
线框多边形
线框多边形示例HTMLCSSJS更多有趣示例 尽在知屋安砖社区示例HTMLCSSbody { background: #111; margin: 0; padding: 0;}canvas { width: 100%; height: 100% }JSvar scene = new THREE.Scene();var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerH原创 2020-11-20 12:13:40 · 151 阅读 · 0 评论 -
线条波动示例
线条波动示例示例HTMLCSSJS更多有趣示例 尽在知屋安砖社区示例HTML<canvas id="app-main"></canvas> <script type="x-shader/x-vertex" id="vertexshader"></script><script type="x-shader/x-fragment" id="fragmentshader"></script><!--原创 2020-11-20 12:06:07 · 311 阅读 · 0 评论 -
线圆示例(Line Circle)
线圆示例(Line Circle)**更多有趣示例 尽在**[==知屋安砖社区==](https://xhz.bos.xyz示例HTMLCSSJS更多有趣示例 尽在知屋安砖社区示例HTML <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/101/three.min.js"></script> <body> <canvas id="myCanvas"></ca原创 2020-11-20 12:03:18 · 697 阅读 · 0 评论 -
小碉楼
小碉楼示例HTMLCSSJS更多有趣示例 尽在知屋安砖社区示例HTML<canvas id="c"></canvas>CSShtml, body { margin: 0; height: 100%;}#c { width: 100%; height: 100%; display: block;}JS// Three.js - Load .OBJ and .MTL file - Fixed// from https://threejsf原创 2020-11-20 11:06:52 · 133 阅读 · 0 评论 -
宇宙行星
行星示例CSSJS更多有趣示例 尽在知屋安砖社区示例CSShtml, body { background: linear-gradient(to top, #080817, #000); height:100%; overflow: hidden;}JSvar scene, camera, renderer, sphere, sphere2, torus, torus2;var shape = [];function init () { var t = THREE;原创 2020-11-20 11:00:57 · 200 阅读 · 0 评论 -
阴影-渐变纹理(shadertoy-procedural texture)
阴影-渐变纹理(shadertoy-procedural texture)示例HTMLCSSJS更多有趣示例 尽在知屋安砖社区示例HTML<canvas id="c"></canvas>CSSbody { margin: 0;}#c { width: 100vw; height: 100vh; display: block;}JS// Three.js - Shadertoy - Procedural Texture// from htt原创 2020-11-20 10:56:30 · 306 阅读 · 0 评论 -
有趣的圆波(funny circle waves)
@[toc](有趣的圆波(funny circle waves))更多有趣示例 尽在知屋安砖社区示例HTML<script id="vertex" type="x-shader/x-fragment"> //// Description : Array and textureless GLSL 2D/3D/4D simplex// noise functions.// Author : Ian McEwan, Ashima Arts.原创 2020-11-20 10:51:52 · 380 阅读 · 0 评论 -
圆环结
圆环结示例HTMLCSSJS更多有趣示例 尽在知屋安砖社区示例HTML<mommy> <bigBrother> <baby></baby> <baby></baby> <baby></baby> <baby></baby> <baby></baby> <baby></baby>原创 2020-11-19 15:55:10 · 214 阅读 · 3 评论 -
ES6闪动
ES6示例JS更多有趣示例 尽在知屋安砖社区示例JSclass Cube { constructor(size) { this.geometry = new THREE.BoxGeometry(size.width, size.height, size.depth); this.material = new THREE.MeshBasicMaterial({ color: 0xB0C4DE }); this.mesh = new THREE原创 2020-11-19 15:51:32 · 121 阅读 · 1 评论 -
DNA旋转
DNA示例HTMLCSSJS更多有趣示例 尽在知屋安砖社区示例HTML<div id="container"></div>CSS* { box-sizing: border-box; }html { overflow: hidden; }body { margin: 0; padding: 0; overflow: hidden; font-family: Arial, sans-serif; font-size: 13px; line-heigh原创 2020-11-19 15:47:39 · 241 阅读 · 0 评论 -
A Long Way
A Long Way示例HTMLCSSJS更多有趣示例 尽在知屋安砖社区示例HTML<body> <canvas id="canvas" width="1400" height="600"></canvas></body>CSSbody { background-color: #000; margin: 0; overflow: hidden; background-repeat: no-repeat;}JS原创 2020-11-19 15:35:15 · 219 阅读 · 0 评论 -
Leaf
Leaf示例CSSJS更多有趣示例 尽在知屋安砖社区示例CSSbody { margin: 0; padding: 0; overflow: hidden; }canvas { width: 100%; height: 100% }JSvar Leaf = function() { THREE.Group.apply(this, arguments); var leaf = new THREE.Mesh( new THREE.TorusGeome原创 2020-11-19 15:27:15 · 159 阅读 · 0 评论 -
天然颗粒
天然颗粒示例HTMLCSSJS更多有趣示例 尽在小红砖社区示例HTML<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>ThreeJS Spinning Cube</title> </head> <body> </body></html>CSSbody { margin: 0; }原创 2020-11-12 17:30:00 · 144 阅读 · 0 评论 -
三维环旋转
三维环旋转示例HTMLCSSJS更多有趣示例 尽在小红砖社区示例HTML<div class="interface"> <div class="text text-made">Made with <span class="love"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px原创 2020-11-12 17:26:27 · 275 阅读 · 0 评论 -
环绕的星球
梯度示例HTMLCSSJS更多有趣示例 尽在小红砖社区示例HTML<div id="canvas"></div>CSShtml { width: 100%; height: 100%; background: #11e8bb; /* Old browsers */ background: -moz-linear-gradient(top, #11e8bb 0%, #8200c9 100%); /* FF3.6-15 */ backgroun原创 2020-11-12 17:21:35 · 145 阅读 · 1 评论 -
band
band示例HTMLCSSJS更多有趣示例 尽在小红砖社区示例HTMLcanvasCSScanvas { width:100%;height:100vh;display:block;}JSconst { Engine, Scene, ArcRotateCamera, Vector3, MeshBuilder, TransformNode, HemisphericLight, InstancedMesh, PBRMaterial, Color4} = BABY原创 2020-11-12 17:15:54 · 217 阅读 · 0 评论 -
三维立方体
三维立方体示例HTMLCSSJS更多有趣示例 尽在小红砖社区示例HTML<div class="wrapper"></div> <footer id="footer"> Made with love by <a href="https://twitter.com/quentinhocde"target="_blank">Quentin Hocdé</a> </footer>CSS@import "lessha原创 2020-11-12 17:10:42 · 730 阅读 · 0 评论 -
Cheeese
Cheeese示例HTMLCSS更多有趣示例 尽在小红砖社区示例HTMLdiv.container div.smiley__face.smiley__face--01 div.face div.eyes div.eye.eye__left div.eye.eye__right div.mouth div.smiley__face.smiley__face--02 div.face div.eyes原创 2020-11-12 17:02:32 · 522 阅读 · 1 评论 -
三角(Triangle)
三角示例CSSJS更多有趣示例 尽在小红砖社区示例CSSbody { margin: 0px;}JSlet scene = new THREE.Scene(), camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000), renderer = new THREE.WebGLRenderer({ alpha: true }), // init原创 2020-11-12 16:51:46 · 1147 阅读 · 0 评论 -
绿色三角旋转
飞行并环绕的立方体示例CSSJS更多有趣示例 尽在小红砖社区示例CSSbody { text-align: center; }JSvar camera, scene, renderer;var cubes_count = 54;var cubes_repeat = 4;var cubes_size = 50;var cubes_noise = 100;var cubes = [];init();animate();function init(){ camera =原创 2020-11-03 15:01:24 · 166 阅读 · 0 评论 -
点击转动圆环
圆环示例HTMLCSSJS更多有趣示例 尽在小红砖社区示例HTML<script id="small-vertex" type="x-shader/x-fragment"> #define PI 3.14159265358979323846 uniform float u_time; uniform float u_innerSize; uniform float u_outerSize; uniform float u_middleSize; void原创 2020-11-03 14:09:38 · 187 阅读 · 0 评论