![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
场景模型
文章平均质量分 68
通过css+js+html做成三维模型之场景,展现三维场景效果
Super_Calvin
每周创作更新一些webGl、ThreeJS渲染三维模型,并写出一些心得技巧,感谢关注~~~
展开
-
激光旋律(Laser melody)
激光旋律示例HTMLCSSJS示例HTMLb<div style="display:none;"> <img id="source" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAAEsCAYAAAB5fY51AAAgAElEQVR4nOx9eWxb15X+A9QWMw06LYof0GCK...原创 2020-01-02 14:12:40 · 25847 阅读 · 0 评论 -
滚动的巨石(Rolling boulder)
滚动的巨石(Rolling boulder)示例HTMLCSSJS示例HTML<div id="TutContainer"></div><!--https://gamedevelopment.tutsplus.com/tutorials/creating-a-simple-3d-endless-runner-game-using-three-js--cms-...原创 2020-02-04 20:20:33 · 677 阅读 · 0 评论 -
急速的流星(Meteor)
急速的流星(Meteor)示例HTMLCSSJS示例HTML<canvas id='display' width='1' height='1' />PLAYING AROUND WITH THREEJS DEMOSCSSbody, #display { background: #000; height: 100%; width: 100%;}JSva...原创 2020-02-04 20:25:45 · 311 阅读 · 0 评论 -
绚烂的纸花(Gorgeous shredded paper)
绚烂的纸花(Gorgeous shredded paper)示例HTMLCSSJS示例HTML<h1>ABC</h1>CSSbody { background: #333;}h1 { font-family: helvetica, arial, sans-serif; font-size: 1em; font-weight: 400; ...原创 2020-02-04 20:32:13 · 201 阅读 · 0 评论 -
地形图
地形图示例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 =原创 2020-12-07 15:34:43 · 236 阅读 · 0 评论 -
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原创 2021-03-03 16:09:54 · 450 阅读 · 2 评论 -
文字-球体变换动画(Animation)
文字-球体变换动画(Animation)示例HTMLCSSJS示例HTML<div id="three-container"></div><div id="instructions"> Click and drag to control the animation.</div>CSSbody { margin: 0; ove...原创 2020-02-05 10:47:14 · 797 阅读 · 0 评论 -
那么大甜筒(Cones)
那么大甜筒(Cones)示例CSSJS示例CSSbody { margin: 0; width: 100vw; height: 100vh; background-image: linear-gradient(to right, #00dbde 0%, #fc00ff 100%);}canvas { width: 100%; height: 100%;}JS// v...原创 2020-02-05 10:39:54 · 450 阅读 · 0 评论 -
无尽长廊(Gallery)
无尽的长廊(Gallery)示例HTMLCSSJS示例HTML<audio id="exampleAudio" crossorigin="anonymous" src="//s3.amazonaws.com/metaguru/audio/psych/20.mp3"></audio><div class="buttons"> <div id=...原创 2020-02-05 09:50:27 · 288814 阅读 · 0 评论 -
碰撞的粒子群(Particle)
碰撞的粒子群(Particle)示例HTMLCSSJS示例HTML<div id="text-wrapper"> <div id="text">Click and drag to rotate the camera. Scroll to zoom in/out.</div></div><div id="container">...原创 2020-02-05 10:35:17 · 289 阅读 · 0 评论 -
多场景复制(Multi scene)
多场景复制示例HTMLCSSJS示例HTML<p> <span data-diagram="box" class="left"></span> I love boxes. Presents come in boxes. When I find a new box I'm always excited to find o...原创 2020-01-02 10:53:32 · 497 阅读 · 0 评论 -
色彩斑斓(Colorful)
色彩斑斓(Colorful)示例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"> voi...原创 2020-03-06 14:39:52 · 240 阅读 · 0 评论 -
手工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原创 2020-10-24 18:28:25 · 148 阅读 · 0 评论 -
旋转球体(bauble generator)
旋转球体示例CSSJS更多有趣示例 尽在小红砖社区示例CSS* box-sizing border-boxbody background #111 min-height 100vhJSconst { THREE, gsap: { to, timeline, from, fromTo }, dat: { GUI },} = windowconst { Group, Scene, PerspectiveCamera, WebGLRenderer,原创 2020-09-04 14:07:57 · 222 阅读 · 0 评论 -
模拟城市
加载示例示例HTMLCSSJS更多有趣示例 尽在小红砖社区示例HTML<canvas id="c"></canvas>CSShtml, body { margin: 0; height: 100%;}#c { width: 100%; height: 100%; display: block;}JS// Three.js - Load .GLTF// from https://threejsfundamentals.org/thre原创 2020-08-07 13:28:00 · 295 阅读 · 0 评论 -
voronoi变焦
voronoi变焦示例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( positio原创 2020-08-07 13:16:23 · 172 阅读 · 0 评论 -
转动的网纱
程序生成的最小环境示例HTMLCSSJS更多有趣示例 尽在小红砖社区示例HTML<!-- Using Threejs & Jerome Etienne's Threex --><script src='https://jeromeetienne.github.io/threex.terrain/examples/vendor/three.js/build/three-min.js'></script><script src='https://j原创 2020-08-07 13:25:09 · 126 阅读 · 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> <s原创 2020-08-10 10:57:21 · 145 阅读 · 0 评论 -
追踪小孩-游戏动画
追踪小孩游戏示例HTMLCSSJS更多有趣示例 尽在小红砖社区示例HTML<canvas id="c" tabindex="1"></canvas> <div id="ui"> <div id="left"><img src="https://threejsfundamentals.org/threejs/resources/images/left.svg"></div> <div sty原创 2020-08-07 13:20:49 · 147 阅读 · 0 评论 -
雷暴云(thundercloud)
雷云示例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.0原创 2020-08-03 16:49:52 · 657 阅读 · 0 评论 -
灰烬(ashes)
灰烬示例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.0原创 2020-08-03 16:25:35 · 160 阅读 · 0 评论 -
TweenMax特效
TweenMax示例HTMLCSSJS更多有趣示例 尽在小红砖社区示例HTML<div id="container"></div><!-- Dependencies --><script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script><script src="https://unpkg.com/three@0.原创 2020-08-03 14:01:57 · 297 阅读 · 0 评论 -
扭曲(overflow)
扭曲示例CSSJS更多有趣示例 尽在小红砖社区示例CSSbody { overflow: hidden;}JSvar w = window.innerWidth, h = window.innerHeight;var scene = new THREE.Scene();var camera = new THREE.PerspectiveCamera(75, w/h, 0.1,1000);camera.position.z = 250;var renderer =原创 2020-07-21 11:12:07 · 133 阅读 · 0 评论 -
交互式三角形背景
交互式三角形背景示例CSS更多有趣示例 尽在小红砖社区示例CSShtml,body { margin: 0; padding: 0; width: 100%; height: 100%;}canvas { position: fixed; width: 100%; height: 100%;}var conf, scene, camera, cameraCtrl, renderer;var objects, meshes;var trucRadius原创 2020-07-21 11:20:35 · 158 阅读 · 0 评论 -
宇宙:时空之旅
宇宙:时空之旅示例HTML更多有趣示例 尽在小红砖社区示例HTML<div id="space-container"></div><div id="space-container-top"></div><img class="cosmos center" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1037366/cosmos.png" />html, body { m原创 2020-07-21 11:26:36 · 138 阅读 · 0 评论 -
舞厅
舞厅示例HTMLCSSJS更多有趣示例 尽在小红砖社区示例HTML<div id="info"> <a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> <p>Drag for rotation - Mouse Wheel for Zoom</p></div>CSShtml, body { width: 100vw;原创 2020-07-21 11:40:11 · 437 阅读 · 0 评论 -
在神圣的领域
在神圣的领域示例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,原创 2020-07-21 11:31:44 · 101 阅读 · 0 评论 -
云之旅
云之旅示例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.0原创 2020-08-03 14:21:03 · 235 阅读 · 0 评论 -
地形threejs
地形示例HTMLCSSJS更多有趣示例 尽在小红砖社区示例HTML<div id="threejs"></div>CSS* { margin: 1px;}JSvar camera, scene, renderer, light, rectangles = [];var raycaster, INTERSECTED;var mouse, controls, stats;var container;var MOUSEDOWN, MOUSEUP, MO原创 2020-08-03 14:39:00 · 569 阅读 · 0 评论 -
北斗卫星
卫星示例HTMLCSSJS更多有趣示例 尽在小红砖社区示例HTML <div class="keys"> <p><span>Click </span>the stars to shoot</p> <p><span>Click </span>and<span> drag</span> to rotate</p> </div>原创 2020-08-03 17:29:19 · 194 阅读 · 0 评论 -
粒子成像(Flocked)
积累成相Flocked示例HTML更多有趣示例 尽在小红砖社区示例HTML<div class="controls"> <div class="line selection"><label class="customWrapper">custom<input type="file" id="custom"></label></div> <label class="line"> <span>Int原创 2020-07-21 11:08:54 · 249 阅读 · 0 评论 -
渲染草地地形
渲染草地地形示例HTMLCSSJS更多有趣示例 尽在小红砖社区示例HTML<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/61062/map.png" crossorigin="anonymous" id="map">CSS*{ margin:0; box-sizing:border-box;}body{ background:linear-gradient(#00ADFF 0%,#eee 100%)原创 2020-07-09 12:20:22 · 230 阅读 · 0 评论 -
太阳系之旅:木星
太阳系之旅:木星示例HTMLCSSJS更多有趣示例 尽在小红砖社区示例HTML<div id="jupiterloc"></div><article id="jupiterinfo"><h1></h1> <div> <p> <p> </div></article>CSS@import url('https://fonts.googleap原创 2020-07-09 12:17:59 · 193 阅读 · 0 评论 -
迷失太空
迷失在太空示例HTMLCSSJS更多有趣示例 尽在小红砖社区示例HTML<div id="universe"/><footer> <a target="_blank" href="https://www.made-on-mars.com"><svg id="Calque_logo2" data-name="Calque logo2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 13原创 2020-07-09 11:54:45 · 164 阅读 · 0 评论 -
紫色
紫色示例HTMLCSSJS更多有趣示例 尽在小红砖社区示例HTML<!-- Made with THREE.Phenomenon: A 900b wrapper around #threejs built for high-performance WebGL experiences. --><a href="https://github.com/vaneenige/three.phenomenon" target="_blank">THREE.Phenomenon&l原创 2020-06-30 17:15:38 · 160 阅读 · 0 评论 -
下雨(rain)
下雨(rain)示例HTMLCSSJS更多有趣示例 尽在小红砖社区示例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="ie=edge"> &原创 2020-06-09 14:02:34 · 268 阅读 · 0 评论 -
播放儿童变形和骨骼动画
播放儿童变形和骨骼动画示例HTMLCSSJS更多有趣示例 尽在小红砖社区示例HTML<div id="container"></div><video id="myVideo" autoplay controls loop width="640" height="320" style="display:none;" crossOrigin="anonymous"> <source src="https://s3-us-west-2.amazonaws.原创 2020-06-19 11:21:44 · 215 阅读 · 0 评论 -
云cloud
云cloud示例HTMLCSSJS更多有趣示例 尽在小红砖社区示例HTML<!--Visit this project on GitHub at https://github.com/enesser/low-poly-clouds-webgl-->CSSbody { background-color: #000; color: #fff; font: 14px "Lucida Grande", Helvetica, Arial, sans-serif原创 2020-07-09 12:05:11 · 325 阅读 · 0 评论 -
无限的火焰
无限的火焰示例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原创 2020-07-09 12:08:31 · 193 阅读 · 0 评论 -
银河系
银河系示例HTMLCSSJS更多有趣示例 尽在小红砖社区示例HTML<script id='vShader' type='x-vertex/x-shader'> uniform float size; uniform float t; uniform float z; uniform float pixelRatio; varying vec3 vPosition; varying vec3 mPosition;//modified position原创 2020-07-09 12:09:25 · 235 阅读 · 0 评论