<!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. CentOS 6.5 网络服务器功能的实现①：运用bind搭建基本的DNS服务器

    何谓DNS服务?简而言之,DNS服务在互联网中可以实现域名解析(把域名转换成网络可以识别的IP地址). 名词解释①:正向解析:域名解析IP地址:反向解析:IP地址解析域名. DNS服务的正/反向区域解 ...

  2. 跌跌撞撞的看完了《jquery技术内幕》

    今年2月20日买的书,今天是5月26,三个月来,除了周末休息一天,如果没有特殊情况,我都会每晚花两个小时看这本书,以及查各种与jquery源码相关的资料.今天总算是跌跌撞撞的看完了,有点小激动,也有点 ...

  3. 配置Codis-FE(管理界面)

    codis所有的配置项可以有两种方式进行管理:通过图形界面进行配置,另外一种通过命令配置. 1.通过配置文件生成codis-fe的启动文件a.通过codis的管理工具完成:/usr/local/cod ...

  4. JS和Java正则表达式验证

    js代码 <script type="text/javascript"> function SubmitCk() { var reg = /^([a-zA-Z0-9]+ ...

  5. 偏流角为什么是arcsin(w/V)

    偏流角为什么是arcsin(w/V) 2015-10-22 风螺旋线   回答这个问题要从速度三角形说起(需要了解一点三角函数,但很基础,不用担心). 传统的速度三角形如下图所示: (背一段书) DA ...

  6. SHELL脚本攻略（学习笔记）--2.1 cat

    cat命令 输出一个或多个文件的内容. cat [OPTION]... [FILE]... 选项说明 -n:显示所有行的行号 -b:显示非空行的行号 -E:在每行行尾加上$符号 -T:将TAB符号输出 ...

  7. vue实用组件——表格

    之前用了一下vue-bootstrap,感觉里面的表格组件特别好用,但是如果仅仅为了使用表格就引入bootstrap,似乎有点不划算.所以自己就试着实现了一下bootstrap里面表格的部分功能,目前 ...

  8. iphone safari浏览器CSS兼容性的解决方案集合

    1.iphone safari不兼容CSS的active的解决方案如下: <body ontouchstart="" onmouseover=""> ...

  9. window搭建Tomcat服务

    1.启动cmd 进入到Tomcat目录 D:\xy_ybb\XY\serviceXY\apache-tomcat-7.0.81\bin>cd D:\xy_ybb\XY\tomcat\apache ...

  10. 自己写一个java的mvc框架吧（三）

    自己写一个mvc框架吧(三) 根据Method获取参数并转换参数类型 上一篇我们将url与Method的映射创建完毕,并成功的将映射关系创建起来了.这一篇我们将根据Method的入参参数名称.参数类型 ...