three.js - 动画 图形统计帧频 dat.GUI
运行一把:
代码解释:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>animation</title>
<style type="text/css">
body { /*移除所有的滚动条*/
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div id="WebGL-output"></div>
<div id="Stats-output"></div> <script type="text/javascript" src="./libs/three.js"></script>
<script type="text/javascript" src="./libs/stats.js"></script>
<script type="text/javascript" src="./libs/dat.gui.js"></script>
<script> function init() { var stats = initStats(); // 统计对象 var scene = new THREE.Scene(); // 场景容器, 用来保存并跟踪所有我们想渲染的物体 var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000); // 相机变量, 我们能够在渲染好的场景scence里看到什么 var renderer = new THREE.WebGLRenderer(); // 渲染器对象, 负责计算指定相机角度下浏览器中scene的样子
renderer.setClearColorHex(0xEEEEEE, 1.0); // 将renderer对象的背景色设置为0xEEEEEE
renderer.setSize(window.innerWidth, window.innerHeight); // 让renderer对象将scene渲染成多大尺寸
renderer.shadowMapEnabled = true; // 告诉渲染器需要阴影 var axes = new THREE.AxisHelper(20); // axes坐标轴对象
scene.add(axes); // 把坐标轴添加到场景中去 var planceGeometry = new THREE.PlaneGeometry(60, 20); // PlaneGeometry: 翻译 平面几何 (参数: 宽60, 高20)
var planeMaterial = new THREE.MeshLambertMaterial({ color: 0xffffff }); // MeshLambertMaterial: 翻译 网格材质 (用来设置平面的外观, 颜色,透明度等)
var plane = new THREE.Mesh(planceGeometry, planeMaterial); // 把这2个对象合并到一个名为plane(平面)的Mesh(网格)对象中
plane.receiveShadow = true; // 平面接收阴影
plane.rotation.x = -0.5*Math.PI; // 绕x轴旋转90度
plane.position.x = 15; // 平面坐标位置
plane.position.y = 0;
plane.position.z = 0;
scene.add(plane); // 将平面添加到场景 var cubeGeometry = new THREE.CubeGeometry(4, 4, 4); // Geometry: 翻译 立方体几何
var cubeMaterial = new THREE.MeshLambertMaterial({ color: '#12B7F5'}); // 立方体是0xff0000颜色
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial); // 把立方体和他的外观合并一下
cube.castShadow = true; // 立方体的阴影
cube.position.x = -3; // 立方体的坐标位置
cube.position.y = 3;
cube.position.z = 0;
scene.add(cube); // 将立方体添加进去场景中去 var sphereGeometry = new THREE.SphereGeometry(4, 20, 20); // 球体
var sphereMaterial = new THREE.MeshLambertMaterial({ color: 0x7777ff}); // 球体的外观
var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial); // 把球体和外观合并一下
sphere.castShadow = true; // 球的阴影
sphere.position.x = 20; // 球体的位置
sphere.position.y = 4;
sphere.position.z = 2;
scene.add(sphere); // 把球体添加进场景去 camera.position.x = -30;
camera.position.y = 40;
camera.position.z = 30;
camera.lookAt(scene.position); // lookAt函数指向场景的中心 // 添加一个光源
var spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(-40, 60, -10);
spotLight.castShadow = true; // 让光源产生阴影
scene.add(spotLight); // 使用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); // 动画函数
var step = 0;
function renderScene() {
stats.update(); // 方块旋转走你
cube.rotation.x += controls.rotationSpeed;
cube.rotation.y += controls.rotationSpeed;
cube.rotation.x += controls.rotationSpeed; // 球体弹跳走你改变的是position属性 step += controls.bouncingSpeed;
sphere.position.x = 20 + (10 * (Math.cos(step)));
sphere.position.y = 2 + (10 * Math.abs(Math.sin(step)));
requestAnimationFrame(renderScene);
renderer.render(scene, camera); // 使用渲染器渲染
}; // 初始化统计对象
function initStats() {
var stats = new Stats();
stats.setMode(0); // 0 表示FPS, 1 表示渲染时间
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px';
document.querySelector('#Stats-output').appendChild(stats.domElement);
return stats;
}; document.querySelector('#WebGL-output').appendChild(renderer.domElement); // 把canvas添加到指定的dom中
renderScene(); }; window.onload = init; </script>
</body>
</html>
1. 使用了stats.js来初始化统计看initStats()方法, 在渲染的时候更新一下就好了
2. 使用dat.gui.js组件来控制变量,这个很不错
3. 至于动画,就很简单了,无非就是改了position和rotation的值,通过dat.gui.js组件来改变就很方便了
three.js - 动画 图形统计帧频 dat.GUI的更多相关文章
- Threejs 官网 - Three.js 的图形用户界面工具(GUI Tools with Three.js)
Threejs 官网 - Three.js 的图形用户界面工具(GUI Tools with Three.js) 太阳火神的漂亮人生 (http://blog.csdn.net/opengl_es) ...
- dat.gui stats.js 通用参数配置及图像统计工具
在网上看到了一个非常好的JS烟雾效果 https://paveldogreat.github.io/WebGL-Fluid-Simulation/看源码时发现了dat.gui很好用. dat.gui ...
- Three.js 中的参数调试控制插件dat.GUI.JS - [Three.js] - [dat.GUI]
不论是处于特殊功能的需要,还是处于效果调试方便,我们可能都需要修改模型中的参数值.在Three.js中,谷歌提供了一个js库,即dat.GUI.js用于处理这种需求. 通过该库,我们就不需要通过手动修 ...
- three.js 添加 图形控制界面 gui
需要导入这个js: import { GUI } from '/three.js/jsm/libs/dat.gui.module.js'; 局部代码: var params = { color: 0x ...
- dat.gui.js
].appendChild(b)},inject:function(e,a){a=a||document;].appendChild(b)}}}(); dat.utils.common=functio ...
- dat.GUI 打造可视化工具(一)
前言 有时候学习api其实我们可以从源码的角度学习,因为有时候很多文档写的太不清楚了,自己都是慢慢去试,去猜,去实现其实也是挺浪费时间的,面对未知的一脸蒙蔽,偶尔烦躁,其实需要的是自己静下心来慢慢研究 ...
- JS动画理论
动画(Animation) 动画意味着随着时间而变化,尤其指视觉上的变化,包括位置.形态等的变化.运动基本上表现为物体随时间,发生位置上的变化:形态基本表现为大小.颜色.透明度.形状等随时间的变化. ...
- JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能
摘要: 理解浏览器渲染. 原文:JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 这是专门探索 J ...
- SVG.js 基础图形绘制整理(二)
一.折线 var draw = SVG('svg1').size(300, 300); //画折线 //使用字符串点 // var polyline=draw.polyline('0,0 100,50 ...
随机推荐
- C语言字符串读入函数笔记
gets(str)函数和scanf("%s",str)区别: 转自:https://zhidao.baidu.com/question/290403568.html 二者都是从终端 ...
- sqoop简单配置与使用
sqoop(sql-to-hadoop) Apache Sqoop是用来实现结构型数据(如关系数据库)和Hadoop之间进行数据迁移的工具.它充分利用了MapReduce的并行特点以批处理的方式加快数 ...
- 【机器学习】激活函数(Activation Function)
https://blog.csdn.net/ChenVast/article/details/81382795 激活函数是模型整个结构中的非线性扭曲力 神经网络的每层都会有一个激活函数 1.逻辑函数( ...
- Android深入四大组件(七)Service的绑定过程
前言 我们可以通过调用Context的startService来启动Service,也可以通过Context的bindService来绑定Service,建议阅读此篇文章前请阅读Android深入四大 ...
- spring容器、BeanFactory、ApplicatContext、WebApplicationContext
1.spring容器 BeanFactory提供了IoC的功能:ApplicatContext建立在BeanFactory的基础上 在初始化BeanFactory的实现类时,并没有实例化Bean,直到 ...
- beta冲刺随笔集
团队成员 郑西坤 031602542 (队长) 陈俊杰 031602504 陈顺兴 031602505 张胜男 031602540 廖钰萍 031602323 雷光游 031602319 吴志鸿 03 ...
- pycharm运行Django发生AppRegistryNotReady: Apps aren't loaded yet.
pycharm中运行django默认情况下并不是执行项目的,所以如果在非manage.py,会发生异常. raise AppRegistryNotReady("Apps aren't loa ...
- python:异常处理、自定义异常、断言
什么是异常: 当程序遭遇某些非正常问题的时候就会抛出异常:比如int()只能处理能转化成int的对象,如果传入一个不能转化的对象就会报错并抛出异常 常用的异常有: ValueError :传入无效的错 ...
- Scala之List,Set及Map基本操作
package big.data.analyse.dataSet import scala.collection.immutable.{TreeMap, TreeSet} import scala.c ...
- HDU ACM 2066 一个人的旅行
一个人的旅行 Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Subm ...