Three.js 中的参数调试控制插件dat.GUI.JS - [Three.js] - [dat.GUI]
不论是处于特殊功能的需要,还是处于效果调试方便,我们可能都需要修改模型中的参数值。在Three.js中,谷歌提供了一个js库,即dat.GUI.js用于处理这种需求。 通过该库,我们就不需要通过手动修改源码来观察不同参数对模型的效果影响。
demo效果如下:

关键代码
入口文件:
function init() {
var stats = initStats();
var renderer = initRenderer();
var camera = initCamera();
var scene = new THREE.Scene();
var clock = new THREE.Clock();
initDefaultLighting(scene);
initModel()
initControls();
render();
draw(scene,renderer,camera);
function initModel() {
//辅助工具
var helper = new THREE.AxesHelper(900);
scene.add(helper);
// var map = new THREE.TextureLoader().load("./assets/jay.jag");
//外部盒子
// var material = new THREE.MeshLambertMaterial({
// // map: map
// color: 0xffffff,
// });
// material.transparent = true;
// material.opacity = 0.4;
//--------------------------------地板--------------------------
var planeGeometry = new THREE.PlaneGeometry(1000, 1000, 50, 50);
var planeMaterial = new THREE.MeshBasicMaterial({
color: 0xff0000,
wireframe: true
});
planeMaterial.transparent = true;
planeMaterial.opacity = 0.2;
plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.rotation.x = -0.5 * Math.PI;
plane.position.x = 0;
plane.position.y = -6;
plane.position.z = 0;
//告诉底部平面需要接收阴影
plane.receiveShadow = true;
scene.add(plane);
// scene.add(PlaneSegs);
//--------------------------------地板end-----------------------
}
//初始化控制器
var obtControls; //定义控制器变量
function initControls() {
//定义控制器核心
obtControls = new THREE.OrbitControls(camera, renderer.domElement);
// 如果使用animate方法时,将此函数删除
// controls.addEventListener('change', render);
//以下都是为了满足各种需求的各种控制器配置参数
obtControls.enableDampling = true; //使动画循环使用时阻尼或自转 意思是否有惯性
obtControls.enableZoom = true; //是否允许缩放
obtControls.enablePan = true; //是否开启鼠标右键拖拽
obtControls.autoRotate = false; //是否允许自动旋转
obtControls.dampingFactor = 0.25; //动态阻尼系数:就是鼠标拖拽旋转灵敏度
obtControls.minDistance = 200; //设置相机距离原点的最近距离;
obtControls.maxDistance = 1000; //设置相机距离原点的最远距离;
}
//控制更新
function render() {
stats.update();
// fpControls.update(clock.getDelta());
obtControls.update(clock.getDelta());
requestAnimationFrame(render);
renderer.render(scene, camera)
}
}
模型文件
function draw(scene,renderer,camera) {
//方体
var cubeGeometry = new THREE.BoxGeometry(20,20,20);
var cubeMaterial = new THREE.MeshLambertMaterial({
color:0xffaaaa,
wireframe:true
});
var cube = new THREE.Mesh(cubeGeometry,cubeMaterial);
cube.position.x = 0; cube.position.y = 10; cube.position.z = 80;
cube.castShadow = true;
cube.onBeforeRender = function(){
this.rotation.x += 0.02;
this.rotation.y += 0.02;
this.rotation.z += 0.02;
}
scene.add(cube)
//球体
var sphereGeometry = new THREE.SphereGeometry(20,40,50);
var sphereMaterial = new THREE.MeshLambertMaterial({
color:0x777777,
wireframe: true
});
var sphere = new THREE.Mesh(sphereGeometry,sphereMaterial);
sphere.castShadow = true;
var step = 0;
sphere.onBeforeRender = function(){
step += 0.04;
sphere.position.x = 20 + (10*(Math.cos(step)));
sphere.position.y = 20 + (10*Math.abs(Math.sin(step)));
}
scene.add(sphere)
//添加dat.GUI调试控制
var controls = new function(){//以下关键
this.rotationSpeed = 0.02;
this.bouncingSpeed = 0.03;
}
var gui = new dat.GUI();
gui.add(controls,'rotationSpeed',0,0.5);
gui.add(controls,'bouncingSpeed',0,0.5);
renderScene();
function renderScene(){
cube.rotation.x += controls.rotationSpeed;
cube.rotation.y += controls.rotationSpeed;
cube.rotation.z += controls.rotationSpeed;
step += controls.bouncingSpeed;
sphere.position.x = 20 +(10*(Math.cos(step)));
sphere.position.y = 20 +(10*Math.abs(Math.sin(step)));
requestAnimationFrame(renderScene);
renderer.render(scene,camera)
}
//地面
var planeGeometry = new THREE.PlaneGeometry(300,300,20,20);
var planeMaterial = new THREE.MeshPhongMaterial({
color:0x222222,
side: THREE.Double
});
var plane = new THREE.Mesh(planeGeometry,planeMaterial);
plane.rotation.x = -0.5 * Math.PI;
plane.position.x = 0;
plane.position.y = -5;
plane.position.z = 0
plane.receiveShadow = true;
scene.add(plane)
//灯光
var spotlight = new THREE.SpotLight(0xffffff);
spotlight.position.set(-40,60,-10);
spotlight.castShadow = true
scene.add(spotlight);
}
该demo完整代码在这里:Link
Three.js 中的参数调试控制插件dat.GUI.JS - [Three.js] - [dat.GUI]的更多相关文章
- js中json法创建对象(json里面的:相当于js里面的=)
js中json法创建对象(json里面的:相当于js里面的=) 一.总结 json里面的:相当于js里面的= 4.json创建js对象解决命名冲突:多个人为同一个页面写js的话,命名冲突就有可能发生, ...
- php与js中函数参数的默认值设置
php函数参数默认值设置: <?phpfunction test($val=3){ echo $val."<br/>";}test(11);test();?& ...
- js中function参数默认值
--在dreamweaver做网站时,函数定义是在一个*.js文件中,其中定义了一个func,有四个参数,function func(string1,url,flag,icon),然后在另一个asp中 ...
- JS中区分参数方法
实现功能:在使用cocosjs制作游戏过程中,很多东西都可以重复使用,例如菜单栏等等.今天尝试写了一个自定义的Js文件用作菜单方便以后使用. 将菜单按钮,以及触发事件作为参数生成一个层 直接在游戏中使 ...
- 程序ajax请求公共组件app-jquery-http.js中url参数部分的项目应用
结合微信登录以及微信支付的案例:= =||| (案例比较奇葩复杂) 简述项目流程: 1.获取用于公众号支付的openid(公众平台):在微信内置浏览器中打开网页链接,刚进入页面就通过微信公众平台获取该 ...
- JS中函数参数和函数返回值的理解
函数本质就是功能的集合 JS中函数是对象,因此,函数名实际上仅仅是一个指向函数对象的指针,不会与某个函数绑定,所以,JS中没有重载(重载就是通过传递不同类型的参数,使两个相同函数名的函数执行不同的功能 ...
- js中函数参数基本类型和引用类型的区别
高级程序设计中说明,所有函数的参数都是按值传递的. 基本类型 向参数传递基本类型的值时,被传递的值会被复制给对应的命名参数 function addTen(num){ num=+10; return ...
- JS中的参数搜寻机制
1: var color="blue"; function changecolor(color){ if(color=="blue"){ color=" ...
- js中 函数参数的 传值/传引用 问题
如果 传入function的参数是 (数值.字符串.布尔值) 此时是以 传值 的方式 进行. 如果 传入function的参数是 (数组.对象.其他函数) 此时是以 传引用 的方式 进行. 1
随机推荐
- C# .Net Core 3.1 中关于Process.Start 启动Url链接的问题
WPF 项目迁移到.Net Core中时居然出了一堆问题...(很无语) 今天在使用的时候居然发现Process.Start居然打不开Url链接了? 报 找不到指定文件 的异常?! 一.bug重现 首 ...
- celery异步任务 定时任务
以前项目中用到过 celery ,但是没怎么记笔记,现在在记一下,方便以后用. Celery.png 问:Celery 是什么? 答:Celery 是一个由 Python 编写的简单.灵活.可靠的 ...
- spring多数据源分布式事务的分析与解决方案
一.概述 1.业务背景 对老系统进行重构合并,导致新系统需要同时对3个数据库进行管理.由于出现跨库业务,需要实现分布式事务. 2.开发环境 spring框架版本 4.3.10.RELEASE 持久层 ...
- 【tomcat系列】详解tomcat架构(上篇)
java中,常用的web服务器一般由tomcat,weblogic,jetty,undertwo等,但从用户使用广泛度来说,tomcat用户量相对比较大一些,当然这也基于它开源和免费的特点. 从软件架 ...
- 关于使用 Laravel 服务容器的优势介绍
如果说laravel框架的核心是什么,那么无疑是服务容器.理解服务容器的概念,对于我们使用laravel太重要了,应该说是否理解服务容器的概念是区分是否入门laravel的重要条件.因为整个框架正是在 ...
- Python - 函数形参之必填参数、缺省参数、可变参数、关键字参数的详细使用
Python函数形参 必传参数:平时最常用的,必传确定数量的参数 缺省参数:在调用函数时可以传也可以不传,如果不传将使用默认值 可变参数:可变长度参数 关键字参数:长度可变,但是需要以kv对形式传参 ...
- .tar.xz文件的创建和解压
创建tar.xz文件:只要先 tar cvf xxx.tar xxx/ 这样创建xxx.tar文件先,然后使用 xz -z xxx.tar 来将 xxx.tar压缩成为 xxx.tar.xz 解压ta ...
- chrome DevTools 里面 css样式里面 勾上 :hover 会将鼠标移上的效果一直保持,技巧:要在鼠标上的 div上 勾 :hover
chrome DevTools 里面 css样式里面 勾上 :hover 会将鼠标移上的效果一直保持,技巧:要在鼠标上的 div上 勾 :hover
- 关于IDEA的使用中,连接数据库console出现乱码的情况
本人在连接数据库时也不算是出现乱码,因为乱码的解决方式百度都有,但是还是没有解决我当时遇到的问题, 首先排除navicat的问题,连接选择UTF-8的编码格式, 在Idea中使用debug调试,均可以 ...
- Fiddler4 手机抓包
1.要对计算机Fiddler进行配置,允许远程计算机连接. 2.保证手机电脑在同一局域网中. 3.手机上设置代理服务器.以华为手机为例,设置-->WLAN-->找到并长按目前所连接的WiF ...