<!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练习程序】旋转、缩放场景的更多相关文章

  1. Three.js三维模型几何体旋转、缩放和平移

    创建场景中的三维模型往往需要设置显示大小.位置.角度,three.js提供了一系列网格模型对象的几何变换方法,从WebGL的角度看,旋转.缩放.平移对应的都是模型变换矩阵,关于矩阵变换内容可以观看本人 ...

  2. 【three.js练习程序】创建太阳系

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  3. 【three.js练习程序】创建地球贴图

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  4. 【three.js练习程序】拖动选中的物体

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  5. 使用three.js创建大小不随着场景变化的文字

    使用three.js创建大小不随着场景变化的文字,需要以下两步: 1.将文字绘制到画布上. 2.创建着色器材质,把文字放到三维场景中. 优点: 1.跟用html实现文字相比,这些文字可以被模型遮挡,更 ...

  6. Magnifier.js - 支持鼠标滚轮缩放的图片放大镜效果

    Magnifier.js 是一个 JavaScript 库,能够帮助你在图像上实现放大镜效果,支持使用鼠标滚轮放大/缩小功能.放大的图像可以显示在镜头本身或它的外部容器中.Magnifier.js 使 ...

  7. Blender模型导入进Unity，旋转缩放的调整

    Blender跟Unity的XYZ轴不同的原因,导致Blender模型导入Unity之后会发生模型朝向不对. 请先看看下边这个情况: 首先,Blender物体模式下,对模型进行 旋转 缩放,将会在右边 ...

  8. osg矩阵变换节点-----平移旋转缩放

    osg矩阵变换节点-----平移旋转缩放 转自:http://www.cnblogs.com/ylwn817/articles/1973396.html 平移旋转缩放这个三个是osg矩阵操作中,最常见 ...

  9. Js倒计时程序

    Js倒计时程序 点击下载

随机推荐

  1. Microsoft Azure Storage架构分析

    Microsoft云存储服务分为两个部分,SQL Azure和Azure Storage.云存储系统的可扩展性和功能不可兼得,必须牺牲一定的关系数据库功能换取可扩展性.Microsoft实现云存储的思 ...

  2. System.Threading.Tasks.Task 引起的 IIS 应用池崩溃

    接口服务运行一段时间后,IIS应用池就会突然挂掉,事件查看日志,会有事件日志Event ID为5011的错误 为应用程序池“PokeIn”提供服务的进程在与 Windows Process Activ ...

  3. [转]让程序不触发 Vista/Win7下应用程序兼容性助手弹出 .

    原文地址 http://blog.csdn.net/maxuhuiabc/article/details/6081874 在Vista/Win7下 运行一个 exe 应用程序后,系统经常弹出 兼容性助 ...

  4. Android 开发工具类 36_ getSimSerial

    1 /** * 获取手机的 sim 卡串号 * 需要在清单文件中配置权限: * <uses-permission android:name="android.permission.RE ...

  5. salesforce 零基础学习（六十三）Comparable实现Object列表数据的自定义排序

    项目中通常有些需求为需要将某个sObject的数据列表按照某种规则排序显示到前台页面上,但是list上面的sort远远满足不了复杂的功能,此种情况需要自定义比较两个object大小的方法,所以需要创建 ...

  6. 用Filter作用户授权的例子

    public class LoginFilter implements Filter { private String permitUrls[] = null; private String goto ...

  7. TCP滑动窗口

    TCP利用滑动窗口实现流量控制基本的数据单位不是数据段,而是字节 滑动窗口本质上是描述接受方(本地)的TCP数据报缓冲区大小的数据,发送方根据这个数据来计算自己最多能发送多长的数据.如果发送方收到接受 ...

  8. JDK7 异常的多重捕获

    Java 7之前的版本: 1 2 3 4 5 6 7 8 9 10 catch (IOException ex) {      logger.error(ex);      throw new MyE ...

  9. PHP 编程小点

    1.全局变量,$global 2.引用.函数返回引用.写时拷贝.对象复制.clone.unset.$varname=null 3.函数作用域,但是没有块级作用域 4.php7 新特性 5.autolo ...

  10. Android so 文件进阶<三> so文件的简单加密

    0x00  前言 之前的两篇文章从链接视图和执行视图分析了elf文件的大致结构,这篇文章主要内容是对于so文件进行简单的加密工作,针对Ida等静态分析工具的分析,一旦开始动态调试就应该很容易就可以du ...