<!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. pycharm格式化代码 常用快捷键

    ctrl+alt+L 一 常用快捷键 编辑类: Ctrl + D             复制选定的区域或行Ctrl + Y           删除选定的行Ctrl + Alt + L     代码 ...

  2. 关于 ASP.NET Web 应用中 async/await 注意问题

    System.NullReferenceException: Object reference not set to an instance of an object. at System.Web.T ...

  3. Redis3.2.4 Cluster集群搭建

    服务器环境:192.168.1.105192.168.1.160每台服务器搭建3个节点,组成3个主节点,3个从节点的redis集群. 注意:防火墙一定要开放监听的redis端口,否则会创建失败. 一. ...

  4. find_package()的查找*.cmake的顺序

    1. find_package(<Name>)命令首先会在模块路径中寻找 Find<name>.cmake,这是查找库的一个典型方式.具体查找路径依次为CMake: 变量${C ...

  5. 解决org.apache.rat:apache-rat-plugin:0.8:check (default) on project hbase: Too many unapproved license

    maven打包的时候报错: 报错信息: [ERROR] Failed to execute goal org.apache.rat:apache-rat-plugin:0.8:check (defau ...

  6. windows下通过VNC图形化访问Ubuntu桌面环境

    要在windows下图形化访问Ubuntu或其它Linux系统桌面环境有很多方法,我比较喜欢的是使用VNC服务,需要在Ubuntu下安装vncserver和在windows下安装客户端访问工具. 1. ...

  7. 24-hadoop-hiveserver2&jdbc-正则数据导入

    hive 可以 类似jdbc链接, 但启动的必须是hiveserver2, 才可以使用 hiveserver2 默认监听 10000 端口 1, 启动: nohup $HIVE_HOME/bin/hi ...

  8. Tomcat中配置Url直接访问本地其他磁盘

    在配置 Tomcat serserver.xml 中配置 <Context path="/image" docBase="E:\image" debug= ...

  9. Python面试题目--汇总

    原文链接-https://github.com/taizilongxu/interview_python Python语言特性 1 Python的函数参数传递 2 Python中的元类(metacla ...

  10. 【IT笔试面试题整理】数组中出现次数超过一半的数字

    [试题描述]数组中有一个数字出现的次数超过数组长度的一半,请找出这个数字. [试题分析]时间复杂度O(n),空间复杂度O(1) 思路1: 创建一个hash_map,key为数组中的数,value为此数 ...