<!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 plane = createMesh(new THREE.PlaneGeometry(10, 14, 4, 4));

        // 把地面放到场景中去

        scene.add(plane);

        // 设置相机的坐标 对准场景

        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;

        // setup the control gui

        var controls = new function () {

            // we need the first child, since it's a multimaterial

            this.width = plane.children[0].geometry.parameters.width;

            this.height = plane.children[0].geometry.parameters.height;

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

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

            this.redraw = function () {

                // remove the old plane

                scene.remove(plane);

                // create a new one

                plane = createMesh(new THREE.PlaneGeometry(controls.width, controls.height, Math.round(controls.widthSegments), Math.round(controls.heightSegments)));

                // add it to the scene.

                scene.add(plane);

            };

        };

        var gui = new dat.GUI();

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

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

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

        gui.add(controls, 'heightSegments', 0, 10).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 plane = THREE.SceneUtils.createMultiMaterialObject(geom, [meshMaterial, wireFrameMat]);

            return plane;

        }

        function render() {

            stats.update();

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

　　

27-THREE.JS 平面的更多相关文章

  1. 27.Node.js模块系统

    转自:http://www.runoob.com/nodejs/nodejs-module-system.html 为了让Node.js的文件可以相互调用,Node.js提供了一个简单的模块系统. 模 ...

  2. 2017 年 9 月 27 日 js(文本框内容添加到select)

    写法 <!DOCTYPE html><html>    <head>        <meta charset="UTF-8">   ...

  3. 2017 年 9 月 27 日 js(1.两个select 内容互换 2.单选按钮 同意可点击下一步 3. 全选框)

    1.两个select 内容互换 <!DOCTYPE html><html>    <head>        <meta charset="UTF- ...

  4. js词法分析

    JavaScript的高级知识---词法分析 词法分析 词法分析方法: js运行前有一个类似编译的过程即词法分析,词法分析主要有三个步骤: 分析参数 再分析变量的声明 分析函数说明 函数在运行的瞬间, ...

  5. JavaScript知识 一、JS的数据类型

    一.JS的数据类型 1.基本类型 JS共有5大基本类型,分别是: 1)Undefined.他只有一个值:undefined.如果一个变量被定义但是没有给他赋值,那么这个时候系统会默认给这个变量赋值为u ...

  6. js的高级知识---词法分析

    词法分析 词法分析方法: js运行前有一个类似编译的过程即词法分析,词法分析主要有三个步骤: 分析参数 再分析变量的声明 分析函数说明 具体步骤如下: 函数在运行的瞬间,生成一个活动对象(Active ...

  7. jquery 、 JS 脚本参数的认识与使用

    jquery . JS 脚本参数的认识与使用 如何使用jquery刷新当前页面 下面介绍全页面刷新方法:有时候可能会用到 window.location.reload(); //刷新当前页面. par ...

  8. js 函数提升和变量提升

    总结: 函数提升比变量提升优先级高! 词法分析 词法分析方法: js运行前有一个类似编译的过程即词法分析,词法分析主要有三个步骤: 分析参数 再分析变量的声明 分析函数说明 具体步骤如下: 函数在运行 ...

  9. JS从头开始

    API:应用程序编程接口 HTML:超文本标记语言 XML:可扩展标记语言 HTML和XML的差别:设计目的不同:XML被设计用来传输和存储数据,其焦点在数据的内容:HTML被设计用来显示数据,其焦点 ...

随机推荐

  1. Redis资料汇总（转）

    原文:Redis资料汇总专题 很多朋友反映,说NoSQLFan上的资料不少,但是要找到自己实用的太难,于是萌生做这样一个专题的想法.通过将不同NoSQL产品从入门到精通的各种资料进行汇总,希望能够让大 ...

  2. ionic3使用echart插件

    安装 看官方文档可以知道ECharts可以在webpack中使用看这里,故我们可以使用npm下载安装到项目中 npm install echarts --save //下载ECharts npm in ...

  3. Angular学习笔记—Rxjs、Promise的区别

    Promises: 异步操作完成或失败时处理单个事件 不可取消 代码可读性强,有try/catch Observables: 可持续监听和响应多个事件 可取消订阅 支持map, filter, red ...

  4. VGA显示

    VGA控制器的编写主要是了解VGA的显示标准和时序,如1024X768@60Hz,确定时钟频率(65MHz=1344X806X60),列像素时间等于时钟周期,扫描从左到右.从上到下(类似于电视扫描PA ...

  5. Dora.Interception, 为.NET Core度身打造的AOP框架：不一样的Interceptor定义方式

    相较于社区其他主流的AOP框架,Dora.Interception在Interceptor提供了完全不同的编程方式.我们并没有为Interceptor定义一个接口,正是因为不需要实现一个预定义的接口, ...

  6. Canvas：技术小结

    Canvas:技术小结 资料 [教程:MDN官方中文教程] https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial [ ...

  7. Python框架之Tornado (源码之褪去模板外衣)

    上一篇介绍了客户端请求在tornado框架中的生命周期,其本质就是利用epoll和socket来获取并处理请求.在上一篇的内容中,我们只是给客户端返回了简单的字符串,如:“Hello World”,而 ...

  8. python2.7中的字符编码问题

    0. 写在前面 起因:之前写个数据预处理程序的时候遇到了点问题,用re模块的正则查找方法search时总是找不出来(找错了或者出乱码),于是捣鼓捣鼓. 经过:查资料,做实验,发现用utf8编码的str ...

  9. 什么时候需要用super

    1.子类构造函数调用父类构造函数用super 2.子类重写(覆盖)父类方法后,若想调用父类中被重写的方法,用super 3.未被重写的方法可以直接调用.

  10. Java四则运算总结

    Java结对编程四则运算第二周总结 需求分析 要随机产生规定数量的式子. 要对分式进行计算. 要支持多语言. 要自动判断对错. 设计思路 确定要选用的语言: 要产生随机数: 在产生随机数的时候就要产生 ...