<!DOCTYPE html>

<html>

<head>

    <title></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 circle = createMesh(new THREE.CircleGeometry(4, 10, 0.3 * Math.PI * 2, 0.3 * Math.PI * 2));

        // 把圆形添加到场景中去

        scene.add(circle);

        // 设置相机的坐标

        camera.position.x = -20;

        camera.position.y = 30;

        camera.position.z = 40;

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

        // 添加聚光灯

        var spotLight = new THREE.SpotLight(0xffffff);

        spotLight.position.set(-40, 60, -10);

        scene.add(spotLight);

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

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

        var step = 0;

        var controls = new function () {

            console.log(circle.children[0].geometry);

            this.radius = 4;

            this.thetaStart = 0.3 * Math.PI * 2;

            this.thetaLength = 0.3 * Math.PI * 2;

            this.segments = 10;

            this.redraw = function () {

                // remove the old plane

                scene.remove(circle);

                // create a new one

                circle = createMesh(new THREE.CircleGeometry(controls.radius, controls.segments, controls.thetaStart, controls.thetaLength));

                // add it to the scene.

                scene.add(circle);

            };

        };

        var gui = new dat.GUI();

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

        gui.add(controls, 'segments', 0, 40).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();

            circle.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>

　　

28-THREE.JS 扇形圆形的更多相关文章

  1. js绘制圆形时钟

    纯js制作圆形时钟 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  2. 蒲公英 · JELLY技术周刊 Vol.28: Next.js 10 发布

    蒲公英 · JELLY技术周刊 Vol.28 前端应用到底该选 SSR 还是 CSR?每个项目技术栈决策的时候都会根据实际需求有自己的看法,而在不久前 React 17 发布之后,自然而然也会有同学好 ...

  3. js实现圆形的碰撞检测

    文章地址:https://www.cnblogs.com/sandraryan/ 碰撞检测这个东西写小游戏挺有用der~~~ 注释写的还挺全,所以就不多说了,看注释 这是页面结构.wrap存放生成的小 ...

  4. 第28篇 js中let和var

      let与var 在js中声明一个变量除了一个var 还有一个let的声明.对于var 在前面的作用域中已经讲过,这次主要说下二者的区别: 在MDN上有这样的一个demo: var list = d ...

  5. 28.Node.js 函数和匿名函数

    转自:http://www.runoob.com/nodejs/nodejs-module-system.html 在JavaScript中,一个函数可以作为另一个函数的参数.我们可以先定义一个函数, ...

  6. 用HTML、CSS、JS制作圆形进度条（无动画效果）

    逻辑 1.首先有一个圆:蓝色的纯净的圆,效果: 2.再来两个半圆,左边一个,右边一个将此蓝色的圆盖住,效果: 此时将右半圆旋转60°,就会漏出底圆,效果:   然后我们再用一个比底圆小的圆去覆盖这个大 ...

  7. js获取上一个月、下一个月格式为yyyy-mm-dd的日期

    /** * 获取上一个月 * * @date 格式为yyyy-mm-dd的日期,如:2014-01-25 */ function getPreMonth(date) { var arr = date. ...

  8. JS小记

    好记性不如烂笔头. 1.document.ElementFromPoint:根据坐标获得元素 2.有时候要操作DOM页面,但是得不到预期结果,很可能是因为页面还没加载完成,在console控制台可以看 ...

  9. 【重点突破】——two.js模拟绘制太阳月亮地球转动

    一.引言 自学two.js第三方绘图工具库,认识到这是一个非常强大的类似转换器的工具,提供一套固定的接口,可用在各种技术下,包括:Canvas.Svg.WebGL,极大的简化了应用的开发.这里,我使用 ...

随机推荐

  1. Python(数据库安装与基本语句)

    一.数据库相关概念 1.两种硬件扩展方式 a.垂直扩展:针对一台计算机 b.水平扩展:多台普通计算机 2.数据库相关概念 数据库服务器(本质就是一个台计算机,该计算机之上安装有数据库管理软件的服务端) ...

  2. Django的模型层（1）- 单表操作（上）

    一.ORM简介       MTV或者MTV框架中包括一个重要的部分,就是ORM,它实现了数据模型与数据库的解耦,即数据模型的设计不需要依赖于特定的数据库,通过简单的配置就可以轻松更换数据库,这极大的 ...

  3. Python 模块之 time & datetime

    Python 中提供了对时间日期的多种多样的处理方式,主要是在有 time 和 datetime 两个模块. time 在 Python 文档里,time 是归类在 Generic Operating ...

  4. fopen() r+、w+属性详解

    r+具有读写属性,从文件头开始写,保留原文件中没有被覆盖的内容: w+具有读写属性,写的时候如果文件存在,会被清空,从头开始写. r 打开只读文件,该文件必须存在. r+ 打开可读写的文件,该文件必须 ...

  5. Linux环境Oracle相关操作命令行

        打开Oracle监听:lsnrctl start          关闭监听:   lsnrctl stop 监听关闭那么客户端无法连接 进入sqlplus:sqlplus /nolog  使 ...

  6. CNN学习笔记：线性回归

    CNN学习笔记:Logistic回归 线性回归 二分类问题 Logistic回归是一个用于二分分类的算法,比如我们有一张图片,判断其是否为一张猫图,为猫输出1,否则输出0. 基本术语 进行机器学习,首 ...

  7. linux命令（6/8）：crontab命令

    一.crond简介 crond是linux下用来周期性的执行某种任务或等待处理某些事件的一个守护进程,与windows下的计划任务类似,当安装完成操作系统后,默认会安装此服务工具,并且会自动启动cro ...

  8. HCNP学习笔记之ICMP协议与ping原理以及用Python实现ping

    一.ICMP协议分析 ICMP:Internet控制报文协议.由于IP协议并不是一个可靠的协议,它不保证数据被成功送达,那么,如何才能保证数据的可靠送达呢? 这里就需要使用到一个重要的协议模块ICMP ...

  9. Oracle loop、while、for循环

    Loop循环 Declare p_sum ; p_i number; Begin p_i :; Loop p_sum := p_sum + p_i; p_i :; ) then SYS.Dbms_Ou ...

  10. Spring_自动装配

    Beans-autowire.xml <?xml version="1.0" encoding="UTF-8"?><beans xmlns=& ...