32-THREE.JS 球体
<!DOCTYPE html> <html> <head>
<title>Example 05.05 - Basic 3D geometries - Sphere</title>
<script src="https://cdn.bootcss.com/three.js/r67/three.js"></script>
<script src="https://cdn.bootcss.com/stats.js/r10/Stats.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/dat-gui/0.7.3/dat.gui.js"></script> <style>
body {
margin: 0;
overflow: hidden;
}
</style>
</head>
<body> <div id="Stats-output">
</div>
<div id="WebGL-output">
</div>
<script type="text/javascript"> // 初始化
function init() { var stats = initStats(); // 创建一个场景
var scene = new THREE.Scene(); // 创建一个相机
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000); // 创建一个渲染器
var webGLRenderer = new THREE.WebGLRenderer();
webGLRenderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));
webGLRenderer.setSize(window.innerWidth, window.innerHeight);
webGLRenderer.shadowMapEnabled = true; var sphere = createMesh(new THREE.SphereGeometry(4, 10, 10));
// 把球体添加到场景中去
scene.add(sphere); // 设置相机的坐标
camera.position.x = -20;
camera.position.y = 30;
camera.position.z = 40;
camera.lookAt(new THREE.Vector3(10, 0, 0)); // 把渲染后的结果添加到DOM元素中去
document.getElementById("WebGL-output").appendChild(webGLRenderer.domElement); var step = 0; var controls = new function () {
this.radius = sphere.children[0].geometry.parameters.radius;
this.widthSegments = sphere.children[0].geometry.parameters.widthSegments;
this.heightSegments = sphere.children[0].geometry.parameters.heightSegments;
this.phiStart = 0;
this.phiLength = Math.PI * 2;
this.thetaStart = 0;
this.thetaLength = Math.PI; this.redraw = function () {
// remove the old plane
scene.remove(sphere);
// create a new one
sphere = createMesh(new THREE.SphereGeometry(controls.radius, controls.widthSegments, controls.heightSegments, controls.phiStart, controls.phiLength, controls.thetaStart, controls.thetaLength));
// add it to the scene.
scene.add(sphere);
};
}; var gui = new dat.GUI();
gui.add(controls, 'radius', 0, 40).onChange(controls.redraw);
gui.add(controls, 'widthSegments', 0, 20).onChange(controls.redraw);
gui.add(controls, 'heightSegments', 0, 20).onChange(controls.redraw);
gui.add(controls, 'phiStart', 0, 2 * Math.PI).onChange(controls.redraw);
gui.add(controls, 'phiLength', 0, 2 * Math.PI).onChange(controls.redraw);
gui.add(controls, 'thetaStart', 0, 2 * Math.PI).onChange(controls.redraw);
gui.add(controls, 'thetaLength', 0, 2 * Math.PI).onChange(controls.redraw); render(); function createMesh(geom) { // 两种材质
var meshMaterial = new THREE.MeshNormalMaterial();
meshMaterial.side = THREE.DoubleSide;
var wireFrameMat = new THREE.MeshBasicMaterial();
wireFrameMat.wireframe = true; // 混合材质
var mesh = THREE.SceneUtils.createMultiMaterialObject(geom, [meshMaterial, wireFrameMat]); return mesh;
} function render() {
stats.update(); sphere.rotation.y = step += 0.01;
requestAnimationFrame(render);
webGLRenderer.render(scene, camera);
} function initStats() { var stats = new Stats();
stats.setMode(0); // 0: fps, 1: ms
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px'; document.getElementById("Stats-output").appendChild(stats.domElement); return stats;
}
}
window.onload = init;
</script>
</body>
</html>
32-THREE.JS 球体的更多相关文章
- 32.Node.js中的常用工具类util
转自:http://www.runoob.com/nodejs/nodejs-module-system.html util是一个Node.js核心模块,提供常用函数的集合,用于弥补JavaScrip ...
- Seajs是什么及sea.js 由来,特点以及优势
Seajs是什么及sea.js 由来,特点以及优势 这篇文章主要介绍了Seajs的相关知识和和学习心得,适合刚接触SeaJS的同学,需要的朋友可以参考下,有更好的新手教程或文档,欢迎推荐.分享 1 ...
- how to updating Node.js and npm
how to updating Node.js and npm 1 Installing Node.js and updating npm How do I update Node.js ? Not ...
- JS快速入门(一)
目录 Javascript快速入门(一) 变量的命名规则 变量与常量 变量 常量 数据类型 数值型:Number 字符串:String 常用方法: 布尔类型:Boolean 未定义类型 :Undefi ...
- 日常工作bug总结
1.在使用jQuery的text()与val()使用时,如果按钮是<button></button>的形式使用text()写入时,在IE8下会出现延迟,即我在写定时器5秒倒计时 ...
- 2016 年 50 个最佳的轻量级 JavaScript 框架和库
作者:IT程序狮链接:https://zhuanlan.zhihu.com/p/24598210来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 回顾今年已发布的 JS ...
- 新建一个angularjs+requirejs+bootstrap+typescript+gulp+vscode+git的项目
环境 windows 10 准备工具 Visual Studio Code Node.js Git 需求 必须支持IE8 步骤开始: 执行命令行工具 mkdir Demo && cd ...
- php+jquery注册实例
写了一个简单的PHP+jQuery注册模块,需要填写的栏目包括用户名.邮箱.密码.重复密码和验证码,其中每个栏目需要具备的功能和要求如下图: 在做这个模块的时候,很大程度上借鉴了网易注册( http: ...
- NeHe OpenGL教程 第二十六课:反射
转自[翻译]NeHe OpenGL 教程 前言 声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线 ...
随机推荐
- CNI IPAM插件分析 --- 以hostlocal为示例
skel.CmdArgs数据结构如下所示: type CmdArgs struct { ContainerID string Netns string IfName string Args strin ...
- 添加git忽略文件
把之前的文件添加作为忽略文件 先把本地缓存删除(改变成未track状态),然后再提交git rm -r --cached .git add .git commit -m 'commit log inf ...
- 解决127.0.0.1 localhost 劫持问题
在一个安装iis的过程中,把网站部署上去之后就发现127.0.0.1或者localhost都会跳转到一个莫名的网站,发现断网之后就是会跳转到一个Http://www.76636.com 类似这种的网站 ...
- rtsp over udp
#include <stdio.h> #include <netinet/in.h> #include <sys/socket.h> #include <st ...
- [Spring ] RequestParam VS PathVariable
仔细一想,感觉没啥需要区分的呢.就是简单明确了两种url定义的背景. PathVariable这种,主要是针对restful类型的url.这种path的定义就要根据restful的规范了. 根据昨天开 ...
- sql join on 与where
转载:http://www.cnblogs.com/Jessy/p/3525419.html left join :左连接,返回左表中所有的记录以及右表中连接字段相等的记录. right join : ...
- 用python简便地抓取刘昊然的写真(17行代码)
17行python代码抓取刘昊然图片之家的写真 用python来爬取网页信息是很简便的.因为它有很多库来帮助我们实现我们想要的功能.本实验用到的库有:requests和bs4中的BeautifulSo ...
- ORACLE 多表连接与子查询
Oracle表连接 SQL/Oracle使用表连接从多个表中查询数据 语法格式: select 字段列表from table1,table2where table1.column1=table2.co ...
- kali安装后配置
0x00.安装Vmware Tools 由于是在VMware Workstation里面安装的,所以需要首先安装VMware tools工具方便我们Ctrl+C和Ctrl+V,步骤如下: 在VMWar ...
- shell编程学习笔记--整数自增
在Shell脚本中,用于while或for循环中经常要涉及到整数自增的情况,下面罗列下可能的方式 [方式一]declare -i来声明整数变量 root@localhost:~# declare -i ...