首页 > 其他分享 >使用 dat.GUI.js 简化试验流程

使用 dat.GUI.js 简化试验流程

时间:2024-03-05 20:01:37浏览次数:19  
标签:cube GUI controls js dat step rotationSpeed rotation Math

导入js

import { GUI } from "three/addons/libs/lil-gui.module.min.js";

代码

//定要要设置的属性
var controls = new (function () {
  this.rotationSpeed = 0.02;
  this.bouncingSpeed = 0.03; //球体弹跳速度
})();

var gui = new GUI();
gui.add(controls, "rotationSpeed", 0, 0.5);
gui.add(controls, "bouncingSpeed", 0, 0.5);

var step = 0;

function renderScene() {
  //   cube.rotation.x += 0.02;
  //   cube.rotation.y += 0.02;
  //   cube.rotation.z += 0.02;
  cube.rotation.x += controls.rotationSpeed;
  cube.rotation.y += controls.rotationSpeed;
  cube.rotation.z += controls.rotationSpeed;

  //   step += 0.2;
  //   sphere.position.x = 20 + 10 * Math.cos(step);
  //   sphere.position.y = 2 + 10 * Math.abs(Math.sin(step));
  step += controls.bouncingSpeed;
  sphere.position.x = 20 + 10 * Math.cos(step);
  sphere.position.y = 2 + 10 * Math.abs(Math.sin(step));

  requestAnimationFrame(renderScene);
  stats.update();
  renderer.render(scene, camera);
}
renderScene();

标签:cube,GUI,controls,js,dat,step,rotationSpeed,rotation,Math
From: https://www.cnblogs.com/duixue/p/18054786

相关文章

  • three.js动画
    旋转立方体functionrenderScene(){cube.rotation.x+=0.02;cube.rotation.y+=0.02;cube.rotation.z+=0.02;requestAnimationFrame(renderScene);stats.update();renderer.render(scene,camera);}renderScene();弹跳球varstep=0;fu......
  • AT_abc287_g [ABC287G] Balance Update Query 题解
    分析一眼分块。用值域分块来维护。先把所有的值离散化,使得至于不大于$n+q$。统计一下每个值的数量,每个块包含值的数量,每个块的价值和。修改值的时候先把原来值的数量,块包含的数量,块的价值剪掉被修改值的贡献,然后在新的值上面更新。修改数量直接改数量的变化贡献即可。找前$x$......
  • AT_abc287_g [ABC287G] Balance Update Query 题解2
    分析权值线段树。给每个节点赋一个值$val$和$a_i=val$的$b_i$之和。修改$a_x$的时候先将$a_x$的出现次数在树上剪掉$b_x$,再在$y$上面加上;修改$b_x$的时候直接加上变化量$y-b_x$。由于我们是要取前$x$大的$a_i$之和,在询问的时候有限考虑右儿子,然后在是当前......
  • 一、jsPlumb实现流程图配置--jsPlumb介绍
    jsPlumb是一个前端库,用来实现类似MicrosoftVisio的Web端流程图,可以实现拖拽节点,连线,填充文案等方式生成一个流程图。jsPlumb有两个版本,一个是商业版需要收费,另一个是社区版开源免费。目前社区版的最新的文档地址一、jsPlumb中的基本概念节点(Node)节点就是流程图中可以连线或......
  • centos 安装nodejs 18版本时,需要 glibc > 2.28
    前置条件1.make版本号4.32.gcc版本号12.2.0进行glibc-2.28配置时:../configure--prefix=/usr/local/glibc-2.28--disable-profile--enable-add-ons--with-headers=/usr/include--with-binutils=/usr/bin 遇到的错误:inux-gnu/12.2.0/include-fixed-isystem/......
  • 【HarmonyOS NEXT】Map如何转JSON
    ​【关键字】HarmonyOSNEXT、Object.fromEntries 【问题背景】之前基于API9发过一篇文章【HarmonyOS】JSON格式化解析Map数据失败-开发者服务与平台部社区-3MS知识管理社区(huawei.com),里面提到用Object.fromEntries可将Map数据转为JSON数据,但是在NEXT版本上却被校验......
  • (23)lazarus memdataset的filter问题
    参考https://www.cnblogs.com/qiufeng2014/p/17388138.html链接:https://pan.baidu.com/s/1ayzgDbXjgXBnw-jM1FR4gA提取码:ogqzunitUnit1;{$modeobjfpc}{$H+}interfaceusesClasses,SysUtils,memds,db,Forms,Controls,Graphics,Dialogs,DBGrids;type{TForm1......
  • springboot集成报文验证组件validation
    1.引入validation的依赖jar<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-validation</artifactId><version>3.2.3</version></dependency>2.请求报文增加字段的校验规则packa......
  • Three.js 快速入门指南
    Three.js介绍Three.js是一个开源的应用级3DJavaScript库,可以让开发者在网页上创建3D体验。Three.js屏蔽了WebGL的底层调用细节,让开发者能更快速的进行3D场景效果的开发。Three.js的开发环境搭建创建目录并使用npminit-y初始化package.json使用npminstall--sa......
  • CommonJS和ES Module 的区别
    最近开始接触web编程,一上来就看到一堆关于module的信息,commomJSmodule和ESmodule直接给我看懵了。网上搜一下,总结一下。大概意思就是CommonJS先出现,用在nodejs编程中。这玩意在浏览器中支持的不太好,随着时间的推移浏览器代码也需要模块化呀,于是ESmodule就出现了。ES......