<!DOCTYPE html>

<html>

<head>

    <title>Example 05.05 - Basic 3D geometries - Sphere</title>

　　<script src="https://cdn.bootcss.com/three.js/r67/three.js"></script>

　　<script src="https://cdn.bootcss.com/stats.js/r10/Stats.min.js"></script>

　　<script type="text/javascript" src="https://cdn.bootcss.com/dat-gui/0.7.3/dat.gui.js"></script>

    <style>

        body {

            margin: 0;

            overflow: hidden;

        }

    </style>

</head>

<body>

<div id="Stats-output">

</div>

<div id="WebGL-output">

</div>

<script type="text/javascript">

    // 初始化

    function init() {

        var stats = initStats();

        // 创建一个场景

        var scene = new THREE.Scene();

        // 创建一个相机

        var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

        // 创建一个渲染器

        var webGLRenderer = new THREE.WebGLRenderer();

        webGLRenderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));

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

        webGLRenderer.shadowMapEnabled = true;

        var sphere = createMesh(new THREE.SphereGeometry(4, 10, 10));

        // 把球体添加到场景中去

        scene.add(sphere);

        // 设置相机的坐标

        camera.position.x = -20;

        camera.position.y = 30;

        camera.position.z = 40;

        camera.lookAt(new THREE.Vector3(10, 0, 0));

        // 把渲染后的结果添加到DOM元素中去

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

        var step = 0;

        var controls = new function () {

            this.radius = sphere.children[0].geometry.parameters.radius;

            this.widthSegments = sphere.children[0].geometry.parameters.widthSegments;

            this.heightSegments = sphere.children[0].geometry.parameters.heightSegments;

            this.phiStart = 0;

            this.phiLength = Math.PI * 2;

            this.thetaStart = 0;

            this.thetaLength = Math.PI;

            this.redraw = function () {

                // remove the old plane

                scene.remove(sphere);

                // create a new one

                sphere = createMesh(new THREE.SphereGeometry(controls.radius, controls.widthSegments, controls.heightSegments, controls.phiStart, controls.phiLength, controls.thetaStart, controls.thetaLength));

                // add it to the scene.

                scene.add(sphere);

            };

        };

        var gui = new dat.GUI();

        gui.add(controls, 'radius', 0, 40).onChange(controls.redraw);

        gui.add(controls, 'widthSegments', 0, 20).onChange(controls.redraw);

        gui.add(controls, 'heightSegments', 0, 20).onChange(controls.redraw);

        gui.add(controls, 'phiStart', 0, 2 * Math.PI).onChange(controls.redraw);

        gui.add(controls, 'phiLength', 0, 2 * Math.PI).onChange(controls.redraw);

        gui.add(controls, 'thetaStart', 0, 2 * Math.PI).onChange(controls.redraw);

        gui.add(controls, 'thetaLength', 0, 2 * Math.PI).onChange(controls.redraw);

        render();

        function createMesh(geom) {

            // 两种材质

            var meshMaterial = new THREE.MeshNormalMaterial();

            meshMaterial.side = THREE.DoubleSide;

            var wireFrameMat = new THREE.MeshBasicMaterial();

            wireFrameMat.wireframe = true;

            // 混合材质

            var mesh = THREE.SceneUtils.createMultiMaterialObject(geom, [meshMaterial, wireFrameMat]);

            return mesh;

        }

        function render() {

            stats.update();

            sphere.rotation.y = step += 0.01;

            requestAnimationFrame(render);

            webGLRenderer.render(scene, camera);

        }

        function initStats() {

            var stats = new Stats();

            stats.setMode(0); // 0: fps, 1: ms

            stats.domElement.style.position = 'absolute';

            stats.domElement.style.left = '0px';

            stats.domElement.style.top = '0px';

            document.getElementById("Stats-output").appendChild(stats.domElement);

            return stats;

        }

    }

    window.onload = init;

</script>

</body>

</html>

　　

32-THREE.JS 球体的更多相关文章

  1. 32.Node.js中的常用工具类util

    转自:http://www.runoob.com/nodejs/nodejs-module-system.html util是一个Node.js核心模块,提供常用函数的集合,用于弥补JavaScrip ...

  2. Seajs是什么及sea.js 由来，特点以及优势

    Seajs是什么及sea.js 由来,特点以及优势 这篇文章主要介绍了Seajs的相关知识和和学习心得,适合刚接触SeaJS的同学,需要的朋友可以参考下,有更好的新手教程或文档,欢迎推荐.分享   1 ...

  3. how to updating Node.js and npm

    how to updating  Node.js and npm 1 Installing Node.js and updating npm How do I update Node.js ? Not ...

  4. JS快速入门（一）

    目录 Javascript快速入门(一) 变量的命名规则 变量与常量 变量 常量 数据类型 数值型:Number 字符串:String 常用方法: 布尔类型:Boolean 未定义类型 :Undefi ...

  5. 日常工作bug总结

    1.在使用jQuery的text()与val()使用时,如果按钮是<button></button>的形式使用text()写入时,在IE8下会出现延迟,即我在写定时器5秒倒计时 ...

  6. 2016 年 50 个最佳的轻量级 JavaScript 框架和库

    作者:IT程序狮链接:https://zhuanlan.zhihu.com/p/24598210来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 回顾今年已发布的 JS ...

  7. 新建一个angularjs+requirejs+bootstrap+typescript+gulp+vscode+git的项目

    环境 windows 10 准备工具 Visual Studio Code Node.js Git 需求 必须支持IE8 步骤开始: 执行命令行工具 mkdir Demo && cd ...

  8. php+jquery注册实例

    写了一个简单的PHP+jQuery注册模块,需要填写的栏目包括用户名.邮箱.密码.重复密码和验证码,其中每个栏目需要具备的功能和要求如下图: 在做这个模块的时候,很大程度上借鉴了网易注册( http: ...

  9. NeHe OpenGL教程 第二十六课：反射

    转自[翻译]NeHe OpenGL 教程 前言 声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线 ...

随机推荐

  1. mysql 获取随机10条数据

    SELECT * FROM s_user WHERE id>= ((SELECT MAX(id) FROM s_user)-(SELECT MIN(id) FROM s_user)) * RAN ...

  2. 学员管理系统(简单的Django设计)

    学员管理系统(简单的Django设计) 学员管理系统 项目规划阶段 项目背景 近年来老男孩教育的入学学员数量稳步快速增长,传统的excel统计管理学员信息的方式已经无法满足日渐增长的业务需求.因此公司 ...

  3. curl简介、安装及使用

    目录 curl简介 curl安装 curl使用 curl简介 curl是Linux下一个强大的文件传输工具,它利用URL语法在命令行方式下工作,支持文件上传和下载. curl安装 Ubuntu系统键入 ...

  4. iOS 自定义滑动切换TabbarItem 觉得设计丑也要做出来的UI效果。。。

    UI丑却要继续做的感言: 对UI不满意的时候,就会觉得丑爆了,时间长了,却丑习惯了. 论前一阵子Tabbar 多丑,丑得最后不要tabbar了...但是自定义tabbar 和遇到的问题解决的过程可以记 ...

  5. 左连接、右连接、内连接和where

    首先可以看下w3school写的关于join的介绍: http://www.w3school.com.cn/sql/sql_join.asp on是关联条件,where是筛选条件 数据库在通过连接两张 ...

  6. [转]浅谈Hive vs. HBase 区别在哪里

    浅谈Hive vs. HBase 区别在哪里 导读:Apache Hive是一个构建于Hadoop(分布式系统基础架构)顶层的数据仓库,Apache HBase是运行于HDFS顶层的NoSQL(=No ...

  7. function func(){} 与 var func=function(){}的区别

    1  var func =function(){}  ,即和 var 变量的特性 一样. func 变量名提前,但是不会初始化,直到执行到初始化代码. 2  function func(){}     ...

  8. uvm学习杂记

    一个类,只定义了而没有实例化,是没有任何意义的,但也有特殊情况,对于一个静态类,即其成员变量都是静态的,不实例化也可以正常使用: 类要想和DUT通信,不能在类里定义接口,会报错,只能在类里定义虚拟接口 ...

  9. vue路由两种传参的区别

    //定义路由 { path:"/detail", name:"detail", component:home } //这种做法是错误的,这是query传参的方式 ...

  10. C++ string 用法总结

    string查找替换.分割字符串.比较.截取.类型转换.排序等功能都提供了强大的处理函数,可以代替字符数组来使用. 熟练掌握好string的各种使用方法,能极大的提高编程效率哦 ^_^. #inclu ...