<!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. 【Canal源码分析】整体架构

    本文详解canal的整体架构. 一.整体架构 说明: server代表一个canal运行实例,对应于一个jvm instance对应于一个数据队列 (1个server对应1..n个instance) ...

  2. 读书笔记(03) - 性能 - JavaScript高级程序设计

    作用域链查找 作用域链的查找是逐层向上查找.查找的层次越多,速度越慢.随着硬件性能的提升和浏览器引擎的优化,这个慢我们基本可以忽略. 除了层级查找损耗的问题,变量的修改应只在局部环境进行,尽量避免在局 ...

  3. Docker概念学习系列之Docker核心概念之仓库Repository

    不多说,直接上干货! Docker仓库 仓库(Repository)是集中存放镜像的地方,分公共仓库和私有仓库. 仓库是集中存放镜像文件的场所. 有时候会把仓库和仓库注册服务器(Registry)混为 ...

  4. JavaScript -- Screen

    -----041-Screen.html----- <!DOCTYPE html> <html> <head> <meta http-equiv=" ...

  5. 安装flutter和dart总结

    1 manjaro从软件仓库安装就行,但是也可以下载安装包.然后添加到Path目录 我是安装dart从软件仓库, flutter下载压缩包添加到path 1.1 需要将android sdk , ex ...

  6. vmrun 批量创建vmware虚拟机

    1 准备模板机 具体步骤如下: 1. 下载镜像安装系统 https://mirrors.aliyun.com/centos/7.5.1804/isos/x86_64/ 2. 安装完成配置好IP ,关闭 ...

  7. MySQL slave状态之Seconds_Behind_Master【转】

    在MySQL的主从环境中,我们可以通过在slave上执行show slave status来查看slave的一些状态信息,其中有一个比较重要的参数Seconds_Behind_Master.那么你是否 ...

  8. 在Linux上进行内核参数调整

    在Solaris上,使用工具mdb就可以直接修改内核内存里的内容.而在Linux上,则通常使用命令sysctl(8)做类似的事情. 本文以Fedora为例,介绍如何在Linux上进行内核参数调整. 常 ...

  9. 了解MySQL联表查询中的驱动表，优化查询，以小表驱动大表

    一.为什么要用小表驱动大表 1.驱动表的定义 当进行多表连接查询时, [驱动表] 的定义为: 1)指定了联接条件时,满足查询条件的记录行数少的表为[驱动表] 2)未指定联接条件时,行数少的表为[驱动表 ...

  10. 初入Java后端之Servlet

    初入Java后端之Servlet 后端 Servlet  什么是Servlet? Servlet实际上是一个按照Servlet规范写的Java类.是运行在Web服务端的Java应用程序.与Java程序 ...