<!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. Java模式—适配器模式

    适配器模式(Adapter): 1.概念:将一个类中的接口转换为客户希望的另外一个接口,使得原本由于接口不兼容而不能一起工作的那些类可以一起工作. 2.模式中的角色 1 目标接口:客户所期待的接口.目 ...

  2. donet core 应用 部署到CentOS

    创建应用 新建一个Asp.net core Web API 应用 在program里指定监听端口 public static IWebHost BuildWebHost(string[] args) ...

  3. Jenkins邮箱设置

    首先需要在系统管理--系统设置中设置系统管理员邮件地址: 然后在邮件通知里设置用户名密码,可以发生测试邮件 这里需要注意的是上面的系统管理员邮件地址必须和用户名一致 还需要注意的是测试邮件可能被当做垃 ...

  4. Java NIO 基础知识

    前言 前言部分是科普,读者可自行选择是否阅读这部分内容. 为什么我们需要关心 NIO?我想很多业务猿都会有这个疑问. 我在工作的前两年对这个问题也很不解,因为那个时候我认为自己已经非常熟悉 IO 操作 ...

  5. WebMagic实现分布式抓取以及断点抓取

    访问我的博客 前言 从去年到今年,笔者主要负责的是与合作方的内容对接,新增的合作商不是很多的情况下,在我自从去年引入了 WebMagic 这个爬虫框架之后,基本很少需要去关注维护爬虫,做的最多的是新接 ...

  6. Mybatis在非spring环境下配置文件中使用外部数据源（druidDatasource）

    Spring环境下, MyBatis可以通过其本身的增强mybatis-spring提供的org.mybatis.spring.SqlSessionFactoryBean来注入第三方DataSourc ...

  7. linux下更改时区

    起因: 装系统时一走神把时区选错了,导致时间不正确,但是又不想重装,所以找了一下解决方法. 解决方案: 我的环境时这样的,其他的环境没试过. [root@werserver01 ~]# cat /et ...

  8. python学习: 优秀Python学习资源收集汇总--转

    Python是一种面向对象.直译式计算机程序设计语言.它的语法简捷和清晰,尽量使用无异义的英语单词,与其它大多数程序设计语言使用大括号不一样,它使用縮进来定义语句块.与Scheme.Ruby.Perl ...

  9. Hibernate关联关系映射之一对多双向映射

    一对多映射有两种,一种是单向的,另一种的多向.我们一般是使用双向的,所以我就写写一对多的双向映射. 还是想昨天一样举个例子来说明:作者<===>作品,还是对数据进行增删改查. 我们一般是把 ...

  10. 下载imagenet2012数据集，以及label说明

    updated@2018-12-07 15:22:08 官方下载地址:http://www.image-net.org/challenges/LSVRC/2012/nonpub-downloads , ...