【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倒计时程序 点击下载
随机推荐
- Android_如何隐藏应用程序的图标
接下来我要说的这种方法可以隐藏图标,同是也可以正常启动运行. 在manifest的入口activity里面intent-filter中设置<data></data>元素. 比如 ...
- Git学习系列之CentOS上安装Git详细步骤(图文详解)
前言 最早Git是在Linux上开发的,很长一段时间内,Git也只能在Linux和Unix系统上跑.不过,慢慢地有人把它移植到了Windows上.现在,Git可以在Linux.Unix.Mac和Win ...
- ES6基础教程一 学习笔记
一.变量的声明 1.var 声明全局变量 在ES6中var用来声明全局变量. 2.let 声明局部变量 3.const 声明常量 二.变量的解构赋值 //1.数组赋值 let [a,b,c]=[1,2 ...
- redis源码学习-skiplist
1.初步认识跳跃表 图中所示,跳跃表与普通链表的区别在于,每一个节点可以有多个后置节点,图中是一个4层的跳跃表 第0层: head->3->6->7->9->12-> ...
- kafka消费者基本操作
1.消费消息 消费者以pull的方式获取消息, 每个消费者属于某一个消费组,在创建时不指定消费者的groupId,则该消费者属于默认消费组test-consumer-group ,在配置文件./con ...
- xtrabackup 详解
xtrabackup是Percona公司CTO Vadim参与开发的一款基于InnoDB的在线热备工具,具有开源,免费,支持在线热备,备份恢复速度快,占用磁盘空间小等特点,并且支持不同情况下的多种备份 ...
- 局域网使用visual studio配合iis调试手机app
描述:开发一款手机应用程序,服务器配置在iis,当局域网中即只有路由器无外网如何设置实时调试手机应用程序? vs配合iis调试程序的两种方式? 使用vs的debug(f5)调试网站比较常见,然而当网站 ...
- JVM学习记录-Java内存模型(二)
对于volatile型变量的特殊规则 关键字volatile可以说是Java虚拟机提供的最轻量级的同步机制. 在处理多线程数据竞争问题时,不仅仅是可以使用synchronized关键字来实现,使用vo ...
- vs code 插件收集
名称 简述 Auto Close Tag 自动闭合HTML标签 Auto Import Typescript自动import提示 Auto Rename Tag 修改HTML标签时,自动修改匹配的标签 ...
- c# 读取机器CPU信息,硬盘信息,网卡信息
Windows 管理规范 (WMI) 是可伸缩的系统管理结构,它采用一个统一的.基于标准的.可扩展的面向对象接口.WMI 为您提供与系统管理信息和基础 WMI API 交互的标准方法.WMI 主要由系 ...