1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>ceshi</title>
  6.     <script type="text/javascript" src=".\build\three.js"></script>
  7.     <style>
  8.         body
  9.         {
  10.             margin: 0;
  11.             overflow: hidden;
  12.         }
  13.     </style>
  14. </head>
  15. <body>
  16.     <!-- 作为Three.js渲染器输出元素 -->
  17.     <div id="WebGL-output">
  18.     </div>
  19.     <!-- 第一个 Three.js 样例代码 -->
  20.     <script type="text/javascript">
  21.  
  22.         var cube = new Array(100);
  23.         var rotx = new Array(100);
  24.         var roty = new Array(100);
  25.         var rotz = new Array(100);
  26.         var camera, scene, renderer;
  27.         var id = null;
  28.         var fov = 45;
  29.         var near = 0.1;
  30.         var far = 1000;
  31.         init();
  32.  
  33.         function init() {
  34.  
  35.             scene = new THREE.Scene();
  36.  
  37.             camera = new THREE.PerspectiveCamera(fov, window.innerWidth / window.innerHeight, near, far);
  38.  
  39.             camera.position.x = 100;
  40.             camera.position.y = 100;
  41.             camera.position.z = 100;
  42.             camera.lookAt(scene.position);
  43.  
  44.             //创建一个WebGL渲染器并设置其大小
  45.             renderer = new THREE.WebGLRenderer();
  46.             renderer.setClearColor(new THREE.Color(0x000000));
  47.             renderer.setSize(window.innerWidth, window.innerHeight);
  48.  
  49.             var axes = new THREE.AxisHelper(200);
  50.             scene.add(axes);
  51.  
  52.             for (var i = 0; i < 100; i++) {
  53.                 var geometry = new THREE.BoxGeometry(5, 5, 5);
  54.                 for (var j = 0; j < geometry.faces.length; j += 2) {
  55.                     var hex = Math.random() * 0xffffff;
  56.                     geometry.faces[j].color.setHex(hex);
  57.                     geometry.faces[j + 1].color.setHex(hex);
  58.                 }
  59.  
  60.                 rotx[i] = Math.random() * 0.005;
  61.                 roty[i] = Math.random() * 0.005;
  62.                 rotz[i] = Math.random() * 0.005;
  63.                 var material = new THREE.MeshBasicMaterial({ vertexColors: 0xff0000 });
  64.                 cube[i] = new THREE.Mesh(geometry, material);
  65.  
  66.                 cube[i].position.x = Math.random() * 100 - 50;
  67.                 cube[i].position.y = Math.random() * 100 - 50;
  68.                 cube[i].position.z = Math.random() * 100 - 50;
  69.                 cube[i].receiveShadow = true;
  70.                 scene.add(cube[i]);
  71.                 id = setInterval(render, 33);
  72.             }
  73.  
  74.             document.addEventListener('mousewheel', mousewheel, false);
  75.  
  76.         }
  77.         function render() {
  78.             for (var i = 0; i < 100; i++)
  79.             {
  80.                 cube[i].rotation.x += rotx[i];
  81.                 cube[i].rotation.y += roty[i];
  82.                 cube[i].rotation.z += rotz[i];
  83.             }
  84.  
  85.            renderer.render(scene, camera);
  86.         }
  87.  
  88.         function mousewheel(e) {
  89.             e.preventDefault();
  90.             //e.stopPropagation();
  91.             if (e.wheelDelta) {  //判断浏览器IE，谷歌滑轮事件
  92.                 if (e.wheelDelta > 0) { //当滑轮向上滚动时
  93.                     fov -= (near < fov ? 1 : 0);
  94.                 }
  95.                 if (e.wheelDelta < 0) { //当滑轮向下滚动时
  96.                     fov += (fov < far ? 1 : 0);
  97.                 }
  98.             } else if (e.detail) {  //Firefox滑轮事件
  99.                 if (e.detail > 0) { //当滑轮向上滚动时
  100.                     fov -= 1;
  101.                 }
  102.                 if (e.detail < 0) { //当滑轮向下滚动时
  103.                     fov += 1;
  104.                 }
  105.             }
  106.             camera.fov = fov;
  107.             camera.updateProjectionMatrix();
  108.             renderer.render(scene, camera);
  109.  
  110.         }
  111.  
  112.         document.getElementById("WebGL-output").appendChild(renderer.domElement);
  113.  
  114.     </script>
  115. </body>
  116. </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. Centos配置vsftpd

    #安装vsftpdyum install vsftpd #限制用户只能访问配置的目录,不能访问其他路径#修改vi /etc/vsftpd/vsftpd.conf chroot_list_enable= ...

  2. 全网最详细的Windows系统里PLSQL Developer 64bit安装之后的一些配置（图文详解）

    不多说,直接上干货! 注意的是: 本地若没有安装Oracle服务端,Oracle server服务端64位,是远程连接,因此本地配置PLSQL Developer64位. PLSQL Develope ...

  3. JAVA多线程Thread VS Runnable详解

    要求 必备知识 本文要求基本了解JAVA编程知识. 开发环境 windows 7/EditPlus 演示地址 源文件   进程与线程 进程是程序在处理机中的一次运行.一个进程既包括其所要执行的指令,也 ...

  4. lucene-01-简介

    1, 介绍 hadoop作者开发的 hdfs最开始作为netch的文件存储来使用的 2, 存储结构 lucene快的原因, 是因为添加数据的时候会对数据进行分词, 将分词后的词建立索引, 存储到索引库 ...

  5. Spring总结 2.装配bean

    本随笔内容要点如下: bean的作用域 占位符 一.bean的作用域 在默认情况下,Spring管理的bean的单例的.也就是说,无论注入多少次,都是同一个bean对象.一般情况下,单例模式是足以应付 ...

  6. QT 手式编译步骤

    1: qmake -project 2: qmake 3: make 4: ./执行

  7. 【JS点滴】声明提前，变量声明提前，函数声明提前，声明提前的先后顺序

    声明提前,函数声明提前,好吧,老生常谈的问题了.正好,前些天在掘金看到一道关于声明提前的笔试题,那么这里就以这道题来作为本文的引子吧,代码如下: console.log(a)//? a();//? ; ...

  8. 安装win8/win10提示无法在驱动器0分区上安装windows解决方法

    在通过U盘或光盘安装win8/win8.1/win10系统时,不少用户遇到无法安装的问题,提示“无法在驱动器0的分区1上安装windows”,格式化分区1也不能解决,进而提示Windows无法安装到这 ...

  9. GoogLeNetv4 论文研读笔记

    Inception-v4, Inception-ResNet and the Impact of Residual Connections on Learning 原文链接 摘要 向传统体系结构中引入 ...

  10. Spring @ResponseStatus

    @ResponseStatus这个注解确实是个令我头疼的注解. 先记录下@ResponseStatus注解的定义. 记录几个得到的信息:@ResponseStatus声明在方法.类上, Spring3 ...