<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>ceshi</title>

    <script type="text/javascript" src=".\build\three.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 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);

            //创建一个WebGL渲染器并设置其大小

            renderer = new THREE.WebGLRenderer();

            renderer.setClearColor(new THREE.Color(0x000000));

            renderer.setSize(window.innerWidth, window.innerHeight);

            var axes = new THREE.AxisHelper(200);

            scene.add(axes);

            for (var i = 0; i < 100; i++) {

                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.005;

                roty[i] = Math.random() * 0.005;

                rotz[i] = Math.random() * 0.005;

                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;

                cube[i].receiveShadow = true;

                scene.add(cube[i]);

                id = setInterval(render, 33);

            }

            document.addEventListener('mousewheel', mousewheel, false);

        }

        function render() {

            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);

        }

        function mousewheel(e) {

            e.preventDefault();

            //e.stopPropagation();

            if (e.wheelDelta) {  //判断浏览器IE，谷歌滑轮事件

                if (e.wheelDelta > 0) { //当滑轮向上滚动时

                    fov -= (near < fov ? 1 : 0);

                }

                if (e.wheelDelta < 0) { //当滑轮向下滚动时

                    fov += (fov < far ? 1 : 0);

                }

            } else if (e.detail) {  //Firefox滑轮事件

                if (e.detail > 0) { //当滑轮向上滚动时

                    fov -= 1;

                }

                if (e.detail < 0) { //当滑轮向下滚动时

                    fov += 1;

                }

            }

            camera.fov = fov;

            camera.updateProjectionMatrix();

            renderer.render(scene, camera);

        }

        document.getElementById("WebGL-output").appendChild(renderer.domElement);

    </script>

</body>

</html>

【three.js练习程序】旋转物体自身的更多相关文章

  1. 【three.js第三课】鼠标事件，移动、旋转物体

    1.下载three.js的源码包后,文件夹结构如下: 2.在[three.js第一课]的代码基础上,引入OrbitControls.js文件,此文件主要用于 对鼠标的操作. 该文件位置:在文件结构中 ...

  2. Js倒计时程序

    Js倒计时程序 点击下载

  3. nw.js桌面程序自动更新（node.js表白记）

    Hello Google Node.js 一个基于Google V8 的JavaScript引擎. 一个伟大的端至端语言,或许我对你的热爱源自于web这门极富情感的技术吧! 注: 光阴似水,人生若梦, ...

  4. js实现图片旋转、模板文件查看图片大图之记录篇[二]

    一个小小的前端需求送给大家,使用js实现图片旋转,并且点击图片能够实现规定格式的大图. 主要使用的是jQuery的delegate()方法实现图片旋转,该方法主要的功能就是给某个组件绑定一个或一组事件 ...

  5. 【翻译】在Ext JS应用程序中构建可维护的控制器

    原文:Building Maintainable Controllers in Ext JS Apps 你好You Had Me 你是Tearing Me Apart 模板We Dont Need t ...

  6. 在 Web 应用中创建 Node.js 应用程序

    本分步指南将通过 Azure Web 应用帮助您启动并运行示例 Node.JS 应用程序.除 Node.JS 外,Azure Web 应用还支持其他语言,如 PHP..NET.Node.JS.Pyth ...

  7. 用chrome的snippets片段功能创建页面js外挂程序，从控制台创建js小脚本

    用chrome的snippets片段功能创建页面js外挂程序,从控制台创建js小脚本 Chrome的snippets是小脚本,还可以创作并在Chrome DevTools的来源面板中执行.可以访问和从 ...

  8. 用简单的 Node.js 后台程序浅析 HTTP 请求与响应

    用简单的 Node.js 后台程序浅析 HTTP 请求与响应 本文写于 2020 年 1 月 18 日 我们来看两种方式发送 HTTP 请求,一种呢,是命令行的 curl 命令:一种呢是直接在浏览器的 ...

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

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

随机推荐

  1. Microsoft Azure Storage架构分析

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

  2. 自定义 Scrapy 爬虫请求的 URL

    之前使用 scrapy 抓取数据的时候 ,默认是在逻辑中判断是否执行下一次请求 def parse(self): # 获取所有的url,例如获取到urls中 for url in urls: yiel ...

  3. 这个拖后腿的“in”

    问题之源 C# 7.2推出了全新的参数修饰符in,据说是能提升一定的性能,官方MSDN文档描述是: Add the in modifier to pass an argument by referen ...

  4. 【转】Windows 8 desktop app中dll搜索路径设置的诡异现象，Bug？

    原文地址:http://blog.csdn.net/my_business/article/details/8850151 某个桌面程序在win 8上运行异常的问题困扰了我有近一周,今天终于找到了根本 ...

  5. 利用latex制作个人简历

    转自: http://www.cnblogs.com/panpei/ 前些日子,有点无聊,就在网上逛逛技术大牛的blogs,发现很多大牛都喜欢用pdf版式的简历,发现这种版式的简历排版非常漂亮简洁.深 ...

  6. elasticSearch6源码分析(12)DiscoveryModule

    1.DiscoveryModule概述 /** * A module for loading classes for node discovery. */ 2.discovery The discov ...

  7. sscanf函数详解 & 查找文件字符串

    1. sscanf函数 sscanf() - 从一个字符串中读进与指定格式相符的数据. 1.1 函数原型 int scanf(const char *format, ...); int fscanf( ...

  8. 用ASP.NET实现下载远程图片保存到本地的方法 保存抓取远程图片的方法

    以下介绍两种方法:1.利用WebRequest,WebResponse 类WebRequest wreq=WebRequest.Create("http://files.jb51.net/f ...

  9. [转]一分钟告诉你究竟DevOps是什么鬼？

    本文转自:https://www.cnblogs.com/jetzhang/p/6068773.html 一分钟告诉你究竟DevOps是什么鬼?   历史回顾 为了能够更好的理解什么是DevOps,我 ...

  10. [转]EasyUI 日期格式

    本文转自:http://www.jeasyui.net/demo/512.html Different date formats are applied to different DateBox co ...