three模拟一个可改参数的旗帜迎风飘动的效果
代码语言:html
所属分类:三维
代码描述:three模拟一个可改参数的旗帜迎风飘动的效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> main { display: flex; } .meter { display: flex; width: 80%; margin:15px auto; } .meter p{ width: 120px; margin: 0; } .meter span{ width: 40px; margin: 0 15px; line-height: 12px; } #left { width: 50%; } #right { width: 50%; text-align:center; } h1 { width:100%; font-size:48px; text-align:center; } input[type='range'] { -webkit-appearance: none; background-color: #cccccc; height: 10px; overflow: visible; width: 300px; position: relative; border-radius: 3px; } input[type='range']::-webkit-slider-thumb { -webkit-appearance: none; background-color: #333333; box-shadow: 1px 1px 8px #999999; width: 20px; height: 20px; border-radius: 50%; position: relative; z-index: 100; } input[type='range']::-webkit-slider-thumb:before { content: ''; position: absolute; top: 100%; left: 40%; width: 10%; height: 200px; display: block; background: red; z-index: -10; box-shadow: 0 0 10px darkred; opacity: .1; } input[type='range']:hover::-webkit-slider-thumb:before { opacity: 1; } </style> <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/three.110.js"></script> </head> <body onload="init()"> <h1>flags waves</h1> <main> <div id="left"> <div class="meter"> <p>color</p> <input type="color" id="color" value="#ffffff" onclick="setColor()"> </div> <div class="meter"> <p>image</p> <input type="file" id="texture" accept="image/png,image/jpeg,image/gif" onchange="loadTexture(this.files)"> </div> <div class="meter"> <p>camera</p> <input type="range" id="angle" value="0" min="-180" max="180" oninput="setCamera()"> <span id="textAngle">[0°]</span> </div> <div class="meter"> <p>horizontal</p> <input type="range" id="h" value="0.5" min="0" max="1.0" step="0.1"> </div> <div class="meter"> <p>vertical</p> <input type="range" id="v" value="0.3" min="0" max="1.0" step="0.1"> </div> <div class="meter"> <p>swing</p> <input type="range" id="w" value="0.2" min="0" max="1.0" step="0.1"> </div> <div class="meter"> <p>speed</p> <input type="range" id="s" value="0.5" min="0" max="1.0" step="0.1"> </div> <div class="meter"> <input type="button" value="UNDO" onclick="initFlag()"> </div> </div> <div id="right"> <div id="renderArea"></div> </div> </main> <script> let scene, camera, renderer; // シーン、カメラ、レンダラー const [width, height] = [600, 400]; // 画面サイズ let flag; // 旗 let flagColor = "#ffffff"; // 旗の色 let flagTexture = null; // 旗のテクスチャ const [sizeW, sizeH, segW, segH] = [30, 20, 30, 20]; // 旗の大きさ、分割数 const init = () => { // シーンの作成 scene = new THREE.Scene(); // カメラの作成(画角60、ニアクリップ1、ファークリップ1000) camera = new THREE.PerspectiveCamera(60, width / height, 1, 1000); // カメラの初期位置 camera.position.set(0, 0, 40); // カメラは原点を向く camera.lookAt(new THREE.Vector3(0, 0.0)); // レンダラーの作成 renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(width, height); // 画像表示エリア docume.........完整代码请登录后点击上方下载按钮下载查看
网友评论0