可视化-three.js波浪线条

项目地址下载
DEMO

function Initialize(opt) {var camera, scene, renderer;var clock = new THREE.Clock();var Config = {width: 400,// 长度number: 5,// 条数u_time: 0,// 时间ygap: 10,// y 间隔zgap: 5,// x 间隔speed: 1,// 速度}var lines = [];function init() {camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 10000);camera.position.set(0, 100, 300);camera.lookAt(new THREE.Vector3(0, 0, 0))scene = new THREE.Scene();renderer = new THREE.WebGLRenderer({ antialias: true });renderer.setPixelRatio(window.devicePixelRatio);renderer.setSize(window.innerWidth, window.innerHeight);document.querySelector(opt.id).appendChild(renderer.domElement);//把canvas加载到dom元素中df_canvas = renderer.domElementif (THREE.OrbitControls) {new THREE.OrbitControls(camera, renderer.domElement);}createWave()animate()}function update(dt) {let waveArr = [];for (let i = 0; i < Config.number; i++) {const arr = [];var src = new THREE.Vector3(- Config.width / 2, 0, i * 5);var dst = new THREE.Vector3(Config.width / 2, 0, i * 5);arr.push(src, dst);waveArr.push(arr);}// 计算位置waveArr.forEach((elem, i) => {let paths = _tranformPath(elem, 0.5);paths.forEach((_elem) => {_elem.y = Math.cos(_elem.x * 0.05 + i / 2 + dt) * Config.ygap - i;_elem.z = Math.sin(_elem.x * 0.05 + i / 2 + dt) * Config.zgap - i;_elem.x = _elem.x + i * 2;})let line = lines[i]let position = [];paths.forEach((elem) => {position.push(elem.x, elem.y, elem.z)})line.geometry.addAttribute("position", new THREE.Float32BufferAttribute(position, 3))})}function createWave() {for (let i = 0; i < Config.number; i++) {const arr = [];addLine(arr, i / 5)}}function addLine(vecs, op = 1) {let geometry = new THREE.BufferGeometry();let material = new THREE.LineBasicMaterial({color: 0xffffff,depthTest: false,transparent: true,opacity: op});let line = new THREE.Line(geometry, material);scene.add(line);lines.push(line);}function _tranformPath(arr, dpi = 1) {const vecs = [];for (let i = 1; i < arr.length; i++) {let src = arr[i - 1];let dst = arr[i];let s = new THREE.Vector3(src.x, src.y, src.z);let d = new THREE.Vector3(dst.x, dst.y, dst.z);let length = s.distanceTo(d) * dpi;let len = parseInt(length);for (let i = 0; i <= len; i++) {vecs.push(s.clone().lerp(d, i / len))}}return vecs;}function animate() {requestAnimationFrame(animate);var dt = clock.getDelta();if (dt > 0.2) return;if (lines) {Config.u_time += dt * Config.speed;update(Config.u_time);}renderer.render(scene, camera);}init();
}

可视化-three.js波浪线条相关推荐

html5 canvas全屏变色波浪线条动画js特效
下载地址基于html5 canvas+js制作的全屏变色波浪线条动画特效,线条发光背景颜色变换效果. dd:
CSS3 SVG波浪线条动画js特效
下载地址 CSS3 SVG波浪线条动画特效是一款简单的线条波浪滚动,线条弯曲动画特效. dd:
html5波浪线条,HTML5 svg炫酷波浪线条动画插件
这是一款HTML5 svg炫酷波浪线条动画插件.该波浪动画插件基于tweenMax和SVG,也可以作为jQuery插件来使用,可以制作出漂亮的波浪线条动画特效. 使用方法在页面中引入jquery和T ...
R语言ggplot2可视化改变图中线条的透明度级别实战
R语言ggplot2可视化改变图中线条的透明度级别实战目录 R语言ggplot2可视化改变图中线条的透明度级别实战 #默认没有透明
JS实现线条动态背景
[Top] JS实现线条动态背景线条随机运动,鼠标移动过程中,有吸附性,话不多说,直接上代码吧! !function () {let num = 100;//设置所画线的颜色let colorLin ...
惊艳！可视化的 js：动态图演示 - 事件循环 Event Loop
原文地址:https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif 原文作者:Lydia Hallie 译者:夜尽天明译者博客 ...
d3.js放射线条生成器lineRadial
d3.js放射线条生成器lineRadial 白色是用三角函数生成的数据. 红色是随机生成的数据. <!DOCTYPE html> <html lang="en" ...
可视化-three.js 城市波浪特效城市扫光掠过效果
使用Obj 模型 + shader 实线模型以及代码 csdn 模型以及代码 git 已有效果添加波浪快速搭建工具加载 obj 格式文件加载到 scene中: 使用 ShaderMaterial ...
知识图谱可视化vue.js + d3.js
Github 前端 vue.js + d3.js. 需求上部区域展示所有的概念类别.以及画布内他们的个数展示所有关系类别,以及画布内他们的个数显示所有的概念场景(scenes 字段).关系场景 ...

可视化-three.js波浪线条

可视化-three.js波浪线条相关推荐

最新文章

热门文章