【three.js练习程序】旋转、缩放场景
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ceshi</title>
<script type="text/javascript" src=".\build\three.js"></script>
<script src=".\examples\js\controls\TrackballControls.js"></script>
<script src=".\examples\js\controls\DragControls.js"></script>
<style>
body
{
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<!-- 作为Three.js渲染器输出元素 -->
<div id="WebGL-output">
</div>
<!-- 第一个 Three.js 样例代码 -->
<script type="text/javascript"> var cube = new Array(100);
var rotx = new Array(100);
var roty = new Array(100);
var rotz = new Array(100);
var camera, scene, renderer; var controls;
var id = null;
var fov = 45;
var near = 0.1;
var far = 1000;
init(); function init() { scene = new THREE.Scene(); //创建场景 camera = new THREE.PerspectiveCamera(fov, window.innerWidth / window.innerHeight, near, far); //创建摄像机
camera.position.x = 100;
camera.position.y = 100;
camera.position.z = 100;
camera.lookAt(scene.position); renderer = new THREE.WebGLRenderer(); //创建一个WebGL渲染器并设置其大小
renderer.setClearColor(new THREE.Color(0x000000));
renderer.setSize(window.innerWidth, window.innerHeight); var axes = new THREE.AxisHelper(200); //创建三轴表示
scene.add(axes); controls = new THREE.TrackballControls(camera); //创建场景旋转缩放事件
controls.rotateSpeed = 2.5;
controls.zoomSpeed = 1.2;
controls.panSpeed = 0.8;
controls.noZoom = false;
controls.noPan = false;
controls.staticMoving = true;
controls.dynamicDampingFactor = 0.3; for (var i = 0; i < 100; i++) { //随机创建100个正方体
var geometry = new THREE.BoxGeometry(5, 5, 5);
for (var j = 0; j < geometry.faces.length; j += 2) {
var hex = Math.random() * 0xffffff;
geometry.faces[j].color.setHex(hex);
geometry.faces[j + 1].color.setHex(hex);
} rotx[i] = Math.random() * 0.05;
roty[i] = Math.random() * 0.05;
rotz[i] = Math.random() * 0.05;
var material = new THREE.MeshBasicMaterial({ vertexColors: 0xff0000 });
cube[i] = new THREE.Mesh(geometry, material); cube[i].position.x = Math.random() * 100 - 50;
cube[i].position.y = Math.random() * 100 - 50;
cube[i].position.z = Math.random() * 100 - 50; scene.add(cube[i]); } id = setInterval(render, 33);
} function render() {
controls.update(); for (var i = 0; i < 100; i++) {
cube[i].rotation.x += rotx[i];
cube[i].rotation.y += roty[i];
cube[i].rotation.z += rotz[i];
} renderer.render(scene, camera);
} document.getElementById("WebGL-output").appendChild(renderer.domElement); </script>
</body>
</html>
【three.js练习程序】旋转、缩放场景的更多相关文章
- Three.js三维模型几何体旋转、缩放和平移
创建场景中的三维模型往往需要设置显示大小.位置.角度,three.js提供了一系列网格模型对象的几何变换方法,从WebGL的角度看,旋转.缩放.平移对应的都是模型变换矩阵,关于矩阵变换内容可以观看本人 ...
- 【three.js练习程序】创建太阳系
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 【three.js练习程序】创建地球贴图
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 【three.js练习程序】拖动选中的物体
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 使用three.js创建大小不随着场景变化的文字
使用three.js创建大小不随着场景变化的文字,需要以下两步: 1.将文字绘制到画布上. 2.创建着色器材质,把文字放到三维场景中. 优点: 1.跟用html实现文字相比,这些文字可以被模型遮挡,更 ...
- Magnifier.js - 支持鼠标滚轮缩放的图片放大镜效果
Magnifier.js 是一个 JavaScript 库,能够帮助你在图像上实现放大镜效果,支持使用鼠标滚轮放大/缩小功能.放大的图像可以显示在镜头本身或它的外部容器中.Magnifier.js 使 ...
- Blender模型导入进Unity,旋转缩放的调整
Blender跟Unity的XYZ轴不同的原因,导致Blender模型导入Unity之后会发生模型朝向不对. 请先看看下边这个情况: 首先,Blender物体模式下,对模型进行 旋转 缩放,将会在右边 ...
- osg矩阵变换节点-----平移旋转缩放
osg矩阵变换节点-----平移旋转缩放 转自:http://www.cnblogs.com/ylwn817/articles/1973396.html 平移旋转缩放这个三个是osg矩阵操作中,最常见 ...
- Js倒计时程序
Js倒计时程序 点击下载
随机推荐
- JDK并发包总结
本文主要介绍jdk中常用的同步控制工具以及并发容器, 其结构如下: 同步控制工具类 ReentrantLock 简而言之, 就是自由度更高的synchronized, 主要具备以下优点. 可重入: 单 ...
- Linux信号和trap命令的使用
目录 信号介绍 信号列表 控制信号 Ctrl+c显示指定内容 使Ctrl+c无任何操作 处理多个信号 处理所有信号 恢复信号 实现跳板机(实例) 信号介绍 运行Shell脚本时,如果按下快捷键Ctrl ...
- do {...} while (0) 的用途汇总(欢迎补充)
在一些Linux内核和其它的开源代码中,我们经常看到像下面这样的代码: do{ ... }while(0) 该代码片段并非循环,这样想想似乎使用do…while没有任何意义,那么为什么还要使用它呢? ...
- Spring Security 之 Remember-Me (记住我)
效果:在用户的session(会话)过期或者浏览器关闭后,应用程序仍能记住它.用户可选择是否被记住.(在登录界面选择) “记住”是什么意思? 就是下次你再访问的时候,直接进入系统,而不需要 ...
- PTA (Advanced Level) 1009 Product of Polynomials
1009 Product of Polynomials This time, you are supposed to find A×B where A and B are two polynomial ...
- 经典SQL语句大全(转)
一.基础 1.说明:创建数据库CREATE DATABASE database-name 2.说明:删除数据库drop database dbname3.说明:备份sql server--- 创建 备 ...
- 【Vue】v-if与v-show的区别
相同点:v-if与v-show都可以动态控制dom元素显示隐藏 不同点:v-if显示隐藏是将dom元素整个添加或删除,而v-show隐藏则是为该元素添加css--display:none,dom元素还 ...
- Spring ResponseEntity
简单记录下 ResponseEntity 的使用方式 @RequestMapping(value="/demo1" ) public ResponseEntity demo1(){ ...
- laravel 标签
变量标签 {$名} 数组变量标签 {{$名[key]}} 变量调节器 在标签中直接使用php函数,写法和php中一样 条件标签 @if(条件) @endif @if(条件) @else @endif ...
- Commonjs、AMD、CMD
CommonJS 该规范的核心思想是允许模块通过 require 方法来同步加载所要依赖的其他模块,然后通过 exports 或 module.exports 来导出需要暴露的接口 require(& ...