知屋安砖_知屋安砖(同公众号)_CSDN博客-场景模型,几何图形,动态构件领域博主

提问私信关注

知屋安砖(同公众号)

码龄2年

每周创作更新一些webGl、ThreeJS渲染三维模型，并写出一些心得技巧，感谢关注~~~

于 2019-08-19 加入CSDN

1,914分

获得成就

获得108次点赞
内容获得58次评论
获得249次收藏

荣誉勋章

兴趣领域

#产品/运营

#用户运营
#前端

#XHTML#CSS#JavaScript

TA的专栏

流动粒子（flow01001）

流动粒子（flow01001）示例HTMLCSSJS更多有趣示例尽在知屋安砖社区示例HTML<script id="vertexShader_particle" type="x-shader/x-vertex"> attribute vec3 a_position; attribute vec3 a_particle; attribute vec2 a_reference; uniform float u_time; uniform mat4 u_m_mod

发布博客于 6 月前

趣味搜索框（Bouncy Castle Form）

趣味搜索框（Bouncy Castle Form）示例HTMLCSSJS更多有趣示例尽在知屋安砖社区示例HTML<div id="wrap"><form id="bounce" autocomplete="off"><input type="email" id="email" maxlength='25' required/><input type="submit" id="submit" value="SIGN UP"/></for

发布博客于 6 月前

烟圈（smoke ring）

烟圈（smoke ring）示例HTMLCSSJS更多有趣示例尽在知屋安砖社区示例HTML<div class="app"><canvas id="c"></canvas><svg id="s" viewBox="0 0 600 600" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" stroke="#fff" fill="none"> <

发布博客于 6 月前

轮廓文本阴影（outlined text shadow with fallback）

轮廓文本阴影 (outlined text shadow with fallback）示例HTMLCSS更多有趣示例尽在知屋安砖社区示例HTML<h1>知屋安砖</h1> CSSbody { font-family: system-ui, sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0;}h

发布博客于 6 月前

DT时代，什么样的数字孪生才是建筑智慧化破局之道？

DT时代，什么样的数字孪生才是建筑智慧化破局之道？随着时间坐标走到2021年，人类正从IT时代迈向DT（Data technology）时代，从传统建筑到智能再到智慧，建筑业正在经历着空前且至关重要的演变。智慧化，就是这场演变的终极目标。为什么这么说，我们先来看看什么叫“智慧建筑”。。智慧建筑——是在建筑全信息（即包含静态空间数据、动态实时数据及业务系统数据等）的基础上，通过智能、AI算法使建筑本身拥有感知、推理、决策等能力，打造人、建筑、环境协调共生的整合体，其应用场景包含智慧医院、智慧酒店、智

发布博客于 7 月前

空间数据+AI，让建筑学会自己“思考”

空间数据+AI，让建筑学会自己“思考”前言“空间是人类生存的载体，数据可以赋予空间‘生命’”“空间数据+AI，让建筑学会自己思考”前言“机器能思考吗?”1950年，艾伦·图灵发表了具有里程碑意义的论文，并提出颠覆性的一问。尽管艾伦·图灵没有找到答案，却唤醒了人工智能此后的发展，更是奠定了他“人工智能之父”的称号。经过多年的发展，人工智能技术已经在多个领域落地，不论是互联网、制造业、零售、教育还是金融领域，都能看到AI在发挥重要的作用，让机器以接近人类的思维模式工作，具备学习、分析和决策的能力，赋能

发布博客于 7 月前

二十面体折射（Grid Icosahedron Refraction）

二十面体折射（Grid Icosahedron Refraction）示例HTMLCSSJS更多有趣示例尽在知屋安砖社区示例HTML<div class="relative w-screen h-screen"> <div class="grid-icosahedron w-full h-full bg-black"></div></div>CSSbody { display: flex; justify-content: ce

发布博客于 7 月前

坠落弹球（Bouncing off the walls）

坠落弹球（Bouncing off the walls）示例HTMLCSS更多有趣示例尽在知屋安砖社区示例HTML<div class="fall"> <div class="walls"> <div class="wall"><div class="top"></div><div class="bottom"></div><div class="left"></div>&l

发布博客于 7 月前

霓虹灯按钮生成器

霓虹灯按钮生成器示例HTMLCSSJS更多有趣示例尽在知屋安砖社区CSS Neon Button maker - with css variables示例HTML<div class="neons"> <button contenteditable>Neon Love</button></div><div class="panel"> <div class="controls"> <heade

发布博客于 7 月前

Welcome欢迎界面

Welcome欢迎界面示例HTMLCSS更多有趣示例尽在知屋安砖社区示例HTML- var texts = ['W', 'e', 'l', 'c', 'o', 'm', 'e', ': )'];- var number_of_particle = 12;- for (var i = 0; i < texts.length; i++) .background(class="background" + i).criterion - for (var i = 0; i <

发布博客于 7 月前

天气图标（Weather Icon Showcase）

天气按钮（Weather Icon Showcase）示例HTMLCSS更多有趣示例尽在知屋安砖社区示例HTML.container header h1 Pure CSS Weather Icons .showcase a#sunny.canvas( href="https://codepen.io/aexcode/pen/MWbPrdZ", target="_blank" ) .sun - let totalBeamsOne = 0; whi

发布博客于 7 月前

逼真红色开关 Realistic Red Switch （Pure CSS）

逼真红色开关Realistic Red Switch (Pure CSS）示例HTMLCSS更多有趣示例尽在知屋安砖社区示例HTML<label class="switch"> <input type="checkbox" checked/> <div class="button"> <div class="light"></div> <div class="dots"></div>

发布博客于 7 月前

Are These Birds?

Are These Birds?示例HTMLCSSJS更多有趣示例尽在知屋安砖社区示例HTML<div class="container"> <css-doodle grid="6"> :doodle { @size: 100vmax; grid-gap: 2%; background-color: black; } background-color: #994FB3; border-radius: 50%;

发布博客于 7 月前

绿巨人（Hulk - Pure CSS）

绿巨人（Hulk - Pure CSS）示例HTMLCSS更多有趣示例尽在知屋安砖社区示例HTML<input type="checkbox" id="gradient" checked="checked"><label for="gradient"></label><div class="hulk"> <div class="hair"> <div class="lock"></div>

发布博客于 7 月前

奔跑的长颈鹿（Giraffe Cut-out GSAP runner）

奔跑的长颈鹿（Giraffe Cut-out GSAP runner）示例HTMLCSSJS更多有趣示例尽在知屋安砖社区示例HTML<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -20 707 1000" fill-rule="evenodd" clip-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="1.5">

发布博客于 7 月前

拼图（Simple Vue 8 Puzzle）

拼图（Simple Vue 8 Puzzle）示例VUE更多有趣示例尽在知屋安砖社区示例VUE<template> <section> <transition-group tag="div" name="slide" id="puzzle"> <div class="tile" v-for="(tile, i) in tiles" :key="tile" @click="move(i)":class="{ empty: tile

发布博客于 7 月前

灵敏衣柜（Responsive Wardrobe）

灵敏衣柜（Responsive Wardrobe）示例HTMLCSS更多有趣示例尽在知屋安砖社区示例HTMLmixin cuboid() .cuboid(class!=attributes.class) - let s = 0 while s < 6 .cuboid__side - s++.wardrobe .wardrobe__rail +cuboid()(class="rail") .wardrobe__shelf

发布博客于 7 月前

大咖带你领略智慧场景应用开发

本期重磅预告！他是BIM界的意见领袖，洞见BIM行业发展，拥有丰富的国际项目实践经验。他是智慧建筑项目领域的技术专家，拥有多年BIM应用开发、模型二次开发经验。他是智慧项目的实践者，一心专注于技术研究，刻行匠人精神，对每一个功能、每一个场景、每一个交付都精益求精。他们是行业大咖、技术专家、也是实践的先行者，更是我们BIM之路上的同伴。这个2021年，他们将与您一起同行，让您的BIM开发之路不再孤单，为您的BIM学习之路保驾护航！敬请关注！知屋安砖社区...

发布博客于 7 月前

Obstacles - (Threejs + Cannonjs)

@[toc](Obstacles - (Threejs + Cannonjs))更多有趣示例尽在知屋安砖社区示例HTML<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

发布博客于 7 月前

纸牌屋House of CSS cards

纸牌屋（House of CSS cards）示例HTMLCSSJS更多有趣示例尽在知屋安砖社区示例HTML<input type="checkbox" id="wf" class="wireframe_input"><label for="wf" class="wireframe_label">Wireframe</label><div class="hoverPad"></div><div class="hoverPa

发布博客于 7 月前

3D模型控件

3D卧室可控 Bedroom示例HTMLCSSJS更多有趣示例尽在知屋安砖社区示例HTMLaudio#audio source(src="https://raw.githubusercontent.com/ricardoolivaalonso/recursos/master/radio/radio.mp3",type="audio/mpeg")audio#audio2 source(src="https://raw.githubusercontent.com/ricardool

发布博客于 7 月前

3D最美珊瑚岛

最美珊瑚岛示例CSSJS更多有趣示例尽在知屋安砖社区示例CSScanvas { display:block; width:100%; height:100vh; cursor: grab;}JSimport * as $ from '//cdn.skypack.dev/three@0.125.0/build/three.module.js?min'import { OrbitControls } from '//cdn.skypack.dev/three@0.125.0/exa

发布博客于 7 月前

跳绳（slime jump）

跳绳（slime jump）示例HTMLCSSJS更多有趣示例尽在知屋安砖社区示例HTMLHTML CSS JSResult Skip Results Iframe <div class="slime"> <div class="ball"></div> <div class="ball"></div> <div class="ball"></div> <div class=

发布博客于 7 月前

跳石（Skipping stone）

跳石（Skipping stone）示例HTMLSCSS更多有趣示例尽在知屋安砖社区示例HTMLHTML SCSSResult Skip Results Iframe<div class="ripple"> <div></div> <div></div> <div></div> <div></div> <div></div> <div

发布博客于 7 月前

乒乓球（table tenni）

乒乓球（table tenni）示例HTMLCSS更多有趣示例尽在知屋安砖社区示例HTML<div class="container"> <div class="floor"></div> <div class="table"> <div class="leg"></div> <div class="leg"></div> <div class="leg">

发布博客于 7 月前

3D泳池（running waves 3D）

3D泳池（running waves 3D）示例HTMLCSS更多有趣示例尽在知屋安砖社区示例HTML<div id="chart"></div>CSShtml, body, #chart { width: 100%; height: 100%; margin: 0;}#chart { display: flex; justify-content: center; align-items: center;}svg { bord

发布博客于 7 月前

3D动画河马VS甜甜圈游戏

动画河马VS甜甜圈游戏示例HTMLCSSJS更多有趣示例尽在知屋安砖社区示例HTML<script src="https://threejs.org/build/three.min.js"></script><script src="https://threejs.org/examples/js/utils/BufferGeometryUtils.js"></script><div class="logo"> <

发布博客于 7 月前

迷幻粒子

迷幻粒子示例HTMLCSSJS更多有趣示例尽在知屋安砖社区示例HTML<p id="help">Try your mouse ^^</p>CSShtml,body { margin: 0; padding: 0; width: 100%; height: 100%;}canvas { position: fixed; width: 100%; height: 100%; z-index: -1;}#help { fo

发布博客于 10 月前

立方体旋转+表面贴图

立方体旋转+表面贴图示例HTMLCSSJS更多有趣示例尽在知屋安砖社区示例HTML<div id="container"></div>CSScanvas { border: 1px solid #eee;}JSconst container = document.querySelector('#container')const width = 500const height = 500const renderer = new THREE.WebG

发布博客于 10 月前

旋转立方体线框

旋转立方体线框示例CSSJS更多有趣示例尽在知屋安砖社区示例CSSbody { margin: 0; }canvas { width: 100%; height: 100% }JSvar scene = new THREE.Scene();var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.2, 1000 );var renderer = new THREE.

发布博客于 10 月前

立方体交错渲染

立方体交错渲染示例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

发布博客于 10 月前

立方体观察示例（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 =

发布博客于 10 月前

立方波

热力图模型示例HTMLCSSJS更多有趣示例尽在知屋安砖社区示例HTML<html lang="en"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Cube Wave</title> <script src="ht

发布博客于 10 月前

三维对象随机视角旋转

三维对象随机视角旋转示例JS更多有趣示例尽在知屋安砖社区示例JS// IIFE// https://developer.mozilla.org/en-US/docs/Glossary/IIFE( function () { const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera( 25, window.innerWidth / window.innerHeight

发布博客于 10 月前

三维对象切分

三维对象切分示例HTMLCSSJS更多有趣示例尽在知屋安砖社区示例HTML<canvas id="c"></canvas>CSSbody { margin: 0;}#c { width: 100vw; height: 100vh; display: block;}JS// Three.js - Transparency - DoubleSide Hack// from https://threejsfundamentals.org/th

发布博客于 10 月前

三角形图案创建图案

三角形图案创建功能示例HTMLCSSJS更多有趣示例尽在知屋安砖社区示例HTML<img alt="pattern" /><div class="ui"> <div class="ui__row"> <label for="themePicker">Theme</label> <select id="colorPicker"> <option selected value="purple

发布博客于 10 月前

向前翻转

向前翻转示例HTMLCSSJS更多有趣示例尽在知屋安砖社区示例HTML<canvas></canvas>CSS*,*:before,*:after { margin: 0; padding: 0; box-sizing: border-box;}body { height: 1000px;}canvas { width: 100vw; height: 100vh; display: block;}JS// Rend

发布博客于 10 月前

平面直角坐标

平面直角坐标示例HTMLCSSJS更多有趣示例尽在知屋安砖社区示例HTML<!DOCTYPE html><html> <title>Threejs</title> <body> </body></html>CSSbody { margin: 0; overflow: hidden;}JSfunction init() { const scene = new THREE.Scene

发布博客于 10 月前

泛光+旋转

泛光+旋转示例HTMLCSSJS更多有趣示例尽在知屋安砖社区示例HTML<div style="background-color: #fff"> <canvas id="c"></canvas></div>CSSbody { margin: 0;}#c { width: 100vw; height: 100vh; display: block;}JS// Three.js - PostProcessing/

发布博客于 10 月前

反弹立方体

反弹立方体示例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="0

发布博客于 10 月前

绘画网格

绘画网格示例HTMLJS更多有趣示例尽在知屋安砖社区示例HTML<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="i

发布博客于 10 月前

多面体星系

多面体星系示例HTMLJS更多有趣示例尽在知屋安砖社区示例HTMLbody { margin: 0; overflow: hidden;}JSvar camera, scene, light, mesh, renderer, raycaster, mouse, mouseX = 0, mouseY = 0, colors = [], meshes = [];init();function in

发布博客于 10 月前

热力图模型

热力图模型示例HTMLCSSJS更多有趣示例尽在知屋安砖社区示例HTML<div class="world"></div><div class="title"> <p>Looking at these waves for 1 minute<br/>will bring you 56% more serenity*</p><p class="remark">* According to a very seri

发布博客于 10 月前

粒子图像

粒子图像示例HTMLCSSJS更多有趣示例尽在知屋安砖社区示例HTML<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>ThreeJS Spinning Cube</title> </head> <body> </body></html>CSSbody { margin: 0;ba

发布博客于 10 月前

球体颜色渐变

对象颜色渐变示例HTMLCSSJS更多有趣示例尽在知屋安砖社区示例HTML <div id="wrapper"> <canvas id="battleArea"></canvas> </div>CSSbody { margin: 0 auto; background-color: white; overflow-x: hidden;}#battleArea { position: absolute;

发布博客于 10 月前

螺旋体

螺旋体示例HTMLCSSJS更多有趣示例尽在知屋安砖社区示例HTML <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/102/three.min.js'></script><script

发布博客于 10 月前

多米诺波动

多米诺波动示例HTMLCSSJS更多有趣示例尽在知屋安砖社区示例HTML<div class="wrapper"> </div> <footer id="footer"> Made with love by <a target="_blank" href="https://twitter.com/QuentinHocde">Quentin Hocdé</a> </footer>CSS@import

发布博客于 10 月前

穿越森林-游戏

穿越森林-游戏示例HTMLJS更多有趣示例尽在知屋安砖社区示例HTML<div id="canvas"></div>JSvar sceneWidth;var sceneHeight;var camera;var scene;var renderer;var dom;var sun;var ground;//var orbitControl;var rollingGroundSphere;var heroSphere;var rollingSpe

发布博客于 10 月前

曲线隧道

曲线隧道示例HTMLCSSJS更多有趣示例尽在知屋安砖社区示例HTML<div id="threejs-container"></div><h3>Check out the <a href="https://github.com/ZachSaucier/threejs-camera-spline-follower">GitHub page</a></h3>CSS/* For more check out zachsa

发布博客于 10 月前

电子显示器

电子显示器示例CSSJS更多有趣示例尽在知屋安砖社区示例CSSbody{margin: 0;}*{ position: fixed;}JSlet time = "123";let toggle = false; var scene = new THREE.Scene();var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight

发布博客于 10 月前

平面图两侧边界虚化

平面图两侧边界虚化示例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

发布博客于 10 月前

时钟加载-时光残酷

时钟加载-时光残酷示例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 main() { gl_Position = vec4( positi

发布博客于 10 月前

几何嵌入

几何嵌入示例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> <

发布博客于 10 月前

六面几何模型

六面几何模型示例HTMLCSSJS更多有趣示例尽在知屋安砖社区示例HTML<!DOCTYPE html><html lang='fr'> <head> <title>pen-hexa </title> <meta charset='utf-8'> <meta name='description' content='description...'> <meta name='viewport

发布博客于 10 月前

地日运动模型

地日运动模型示例HTMLCSSJS更多有趣示例尽在知屋安砖社区示例HTML<canvas id="c"></canvas> <div id="ui"></div> <script src="https://threejsfundamentals.org/threejs/../3rdparty/dat.gui.min.js"></script><script src="https://threejsfund

发布博客于 10 月前

石头剪刀布游戏（Rock-Paper-Scissors）

石头剪刀布游戏示例HTMLCSS更多有趣示例尽在知屋安砖社区示例HTML<form> <input type="radio" id="rock-rock" name="rock-paper-scissors"> <input type="radio" id="rock-paper" name="rock-paper-scissors"> <input type="radio" id="rock-scissors" name="rock-pa

发布博客于 10 月前

地形图

地形图示例JS更多有趣示例尽在知屋安砖社区示例JSfunction creationMyth() { var mainColor = "#F0E68C"; var canvasHeight = window.innerHeight; var canvasWidth = window.innerWidth; var loader = new THREE.TextureLoader(); var scene = new THREE.Scene(); scene.fog =

发布博客于 10 月前

光滑的圆环(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

发布博客于 10 月前

世界地图（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

发布博客于 10 月前

不可思议的立方体

不可思议的立方体示例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>

发布博客于 10 月前

色彩饼状图（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

发布博客于 10 月前

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=

发布博客于 10 月前

塔波

塔波示例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

发布博客于 11 月前

特殊几何形状渲染

特殊几何形状渲染示例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>

发布博客于 11 月前

天然颗粒12*12

天然颗粒示例HTMLCSSJS更多有趣示例尽在知屋安砖社区示例HTML<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>ThreeJS Spinning Cube</title> </head> <body> </body></html>CSSbody { margin: 0; }

发布博客于 11 月前

线框多边形

线框多边形示例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

发布博客于 11 月前

线条波动示例

线条波动示例示例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><!--

发布博客于 11 月前

线圆示例（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

发布博客于 11 月前

小碉楼

小碉楼示例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

发布博客于 11 月前

宇宙行星

行星示例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;

发布博客于 11 月前

阴影-渐变纹理（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

发布博客于 11 月前

有趣的圆波(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.

发布博客于 11 月前

圆环结

圆环结示例HTMLCSSJS更多有趣示例尽在知屋安砖社区示例HTML<mommy> <bigBrother> <baby></baby> <baby></baby> <baby></baby> <baby></baby> <baby></baby> <baby></baby>

发布博客于 11 月前

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

发布博客于 11 月前

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

发布博客于 11 月前

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

发布博客于 11 月前

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

发布博客于 11 月前

行星图（planet map）

行星图（planet map）示例CSSJS更多有趣示例尽在知屋安砖社区示例CSSbody { margin: 0; }canvas { width: 100%; height: 100% ; vertical-align:bottom}JSvar textureURL = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/17271/lroc_color_poles_1k.jpg"; var displacementURL = "https:

发布博客于 11 月前

天然颗粒

天然颗粒示例HTMLCSSJS更多有趣示例尽在小红砖社区示例HTML<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>ThreeJS Spinning Cube</title> </head> <body> </body></html>CSSbody { margin: 0; }

发布博客于 1 年前

三维环旋转

三维环旋转示例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

发布博客于 1 年前

环绕的星球

梯度示例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

发布博客于 1 年前

band

band示例HTMLCSSJS更多有趣示例尽在小红砖社区示例HTMLcanvasCSScanvas { width:100%;height:100vh;display:block;}JSconst { Engine, Scene, ArcRotateCamera, Vector3, MeshBuilder, TransformNode, HemisphericLight, InstancedMesh, PBRMaterial, Color4} = BABY

发布博客于 1 年前

三维立方体

三维立方体示例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

发布博客于 1 年前

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

发布博客于 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

发布博客于 1 年前

绿色三角旋转

飞行并环绕的立方体示例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 =

发布博客于 1 年前

点击转动圆环

圆环示例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

发布博客于 1 年前

扭曲的光盘

扭曲的光盘示例HTMLJS更多有趣示例尽在小红砖社区示例HTML<!--Given to vertex shaders by Three.js:"uniform mat4 modelMatrix;""uniform mat4 modelViewMatrix;""uniform mat4 projectionMatrix;""uniform mat4 viewMatrix;""uniform mat3 normalMatrix;""uniform vec3 cameraPosi

发布博客于 1 年前

使文字栩栩如生(bringing text to life)

使文字栩栩如生(bringing text to life示例CSS更多有趣示例尽在小红砖社区示例CSSbody { margin: 0; padding: 0; background: white; overflow: hidden;}section { background: #ffee25;}p { font-size: 13px; line-height: 10px; background: url(https:/

发布博客于 1 年前

彩色旋转立方体

旋转立方体示例HTMLCSSJS更多有趣示例尽在小红砖社区示例HTML<canvas class="cnvs"></canvas>CSSbody, html, canvas { width: 100%; height:100%;}JSlet sce

发布博客于 1 年前

三角形几何图形GPU实例

三角形几何图形GPU实例示例HTMLCSSJS更多有趣示例尽在小红砖社区示例HTML<canvas></canvas>CSSbody { margin: 0}JSfunction particlesVS() { return ` precision highp float; uniform float time; uniform mat4 modelViewMatrix; uniform mat4 projection

发布博客于 1 年前

合并两个纹理

合并两个纹理示例HTMLCSSJS更多有趣示例尽在小红砖社区示例HTML<script src="https://threejs.org/build/three.min.js"></script><script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script><script id="vertex_shader" type="x-shader

发布博客于 1 年前

特斯拉 Cybertruck(single div CSS tesla cybertruck)

飞机步道（plane trails）示例HTMLCSS更多有趣示例尽在小红砖社区示例HTML<div id="cybertruck"></div>CSS$elon = #1d232a$ct-frame = #dddwhite(alpha) rgba(255,255,255,alpha)black(alpha) rgba(0,0,0,alpha)body width: 100vw height: 100vh position: relat

发布博客于 1 年前

飞机步道（plane trails）

飞机步道（plane trails）示例HTMLCSSJS更多有趣示例尽在小红砖社区示例HTML<svg id="patternSVG" xmlns="http://www.w3.org/2000/svg"> <defs> <pattern id="sqrs" width="20" height="20" patternUnits="userSpaceOnUse" id="pulseBg" viewBox="0 0 20 20" > <rect

发布博客于 1 年前

立体几何图形

立体几何图形示例HTMLCSSJS更多有趣示例尽在小红砖社区示例HTML<script src="https://unpkg.com/three"></script>CSS* { margin: 0; padding: 0;}body { overflow: hidden;}JSfunction init () { // 获取浏览器窗口的宽高，后续会用 var width = window.innerWidth va

发布博客于 1 年前

原子（atom）

原子（atom）示例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 main() { gl_Position = vec4( position

发布博客于 1 年前

太空怪物（svg遮罩很酷）(space monster（svg masking is cool）)

太空怪物（svg遮罩很酷）(space monster svg masking is cool）示例HTMLCSS更多有趣示例尽在小红砖社区示例HTML<svg xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300"> <defs> <mask id="MASK" maskunits="userSpaceOnUse"

发布博客于 1 年前

CRT显示器设计

CRT显示器设计示例HTMLCSSJS更多有趣示例尽在小红砖社区示例HTML<div id="monitor" class="crt"> <img class="background" src="https://dl.dropboxusercontent.com/u/5318200/IMG_REFRESH.gif"/> <pre class="content crt"> <div id="canvas"></div&

发布博客于 1 年前

当程序员遇上演员请就位，愿天下所有程序员都能被温柔以待

【1024特辑】开发BIMer请就位！

发布博客于 1 年前

手工DIY

手工DIY示例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 main() { gl_Position = vec4( position, 1

发布博客于 1 年前