<!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 renderer = new THREE.WebGLRenderer();

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

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

        renderer.shadowMapEnabled = true;

        // 创建地面

        var planeGeometry = new THREE.PlaneGeometry(60, 20, 1, 1);

        var planeMaterial = new THREE.MeshLambertMaterial({color: 0xffffff});

        var plane = new THREE.Mesh(planeGeometry, planeMaterial);

        plane.receiveShadow = true;

        // 旋转地面  ->水平方向

        plane.rotation.x = -0.5 * Math.PI;

        plane.position.x = 15;

        plane.position.y = 0;

        plane.position.z = 0;

        // 在场景中添加地面

        scene.add(plane);

        // 创建正方体

        var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);

        var cubeMaterial = new THREE.MeshLambertMaterial({color: 0xff0000});

        var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

        cube.castShadow = true;

        // 正方体坐标

        cube.position.x = -4;

        cube.position.y = 3;

        cube.position.z = 0;

        // 添加正方体

        scene.add(cube);

        var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);

        var sphereMaterial = new THREE.MeshLambertMaterial({color: 0x7777ff});

        var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);

        // 给圆球坐标

        sphere.position.x = 20;

        sphere.position.y = 0;

        sphere.position.z = 2;

        sphere.castShadow = true;

        // 添加圆球

        scene.add(sphere);

        // 给相机坐标

        camera.position.x = -30;

        camera.position.y = 40;

        camera.position.z = 30;

        camera.lookAt(scene.position);

        // 自然光

        var ambientLight = new THREE.AmbientLight(0x0c0c0c);

        scene.add(ambientLight);

        // 聚光灯

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

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

        spotLight.castShadow = true;

        scene.add(spotLight);

        // 添加场景到DOM中去

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

        var step = 0;

　　　　
　　　　　　/*右上角的控制代码*/

        var controls = new function () {

            this.rotationSpeed = 0.02;

            this.bouncingSpeed = 0.03;

        };

        var gui = new dat.GUI();

        gui.add(controls, 'rotationSpeed', 0, 0.5);

        gui.add(controls, 'bouncingSpeed', 0, 0.5);

        render();

        function render() {

            stats.update();

           //旋转正方形

            cube.rotation.x += controls.rotationSpeed;

            cube.rotation.y += controls.rotationSpeed;

            cube.rotation.z += controls.rotationSpeed;

            // 球体滚动

            step += controls.bouncingSpeed;

            sphere.position.x = 20 + ( 10 * (Math.cos(step)));

            sphere.position.y = 2 + ( 10 * Math.abs(Math.sin(step)));

            // render using requestAnimationFrame

            requestAnimationFrame(render);

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

用GUI控制物体的动作

03-THREE.JS GUI使用的更多相关文章

  1. 03.product.js

    /* item.jd.com Compressed by uglify Author:keelii Date: 2014-08-05 6:52:26 [PM] */ function insertSc ...

  2. vue.js及项目实战[笔记]— 03 vue.js插件

    一. vue补充 1. 获取DOM元素 救命稻草,document.querySelector 在template中标示元素`ref = "xxx" 在要获取的时候,this.$r ...

  3. 03 Node.js学习笔记之根据http请求路径返回不同数据

    在Nodejs中,当客户端请求的路径不同时,NodeJS处理返回不同的数据 步骤: //1.载入http模块 var http=require('http'); //2.创建一个http服务 var ...

  4. Babylon.GUI官方文档翻译

    Babylon.GUI是一个基于Babylon.js的WebGL库,可以用来在WebGL3D场景中生成交互性UI与动态纹理.相比于html ui,Babylon.GUI的功能较为简化,但使用起来也更加 ...

  5. JS引擎线程的执行过程的三个阶段（二）

    继续JS引擎线程的执行过程的三个阶段(一) 内容, 如下: 三. 执行阶段 1. 网页的线程 永远只有JS引擎线程在执行JS脚本程序,其他三个线程只负责将满足触发条件的处理函数推进事件队列,等待JS引 ...

  6. JS引擎线程的执行过程的三个阶段（一）

    浏览器首先按顺序加载由<script>标签分割的js代码块,加载js代码块完毕后,立刻进入以下三个阶段,然后再按顺序查找下一个代码块,再继续执行以下三个阶段,无论是外部脚本文件(不异步加载 ...

  7. 你不知道的Node.js性能优化，读了之后水平直线上升

    本文由云+社区发表 "当我第一次知道要这篇文章的时候,其实我是拒绝的,因为我觉得,你不能叫我写马上就写,我要有干货才行,写一些老生常谈的然后加上好多特技,那个 Node.js 性能啊好像 D ...

  8. JS -- 一篇文章掌握RequireJS常用知识

    本文采取循序渐进的方式,从理论到实践,从RequireJS官方API文档中,总结出在使用RequireJS过程中最常用的一些用法,并对文档中不够清晰具体的内容,加以例证和分析,分享给大家供大家参考,具 ...

  9. JS获取粘贴内容

    http://classjs.com/2013/03/05/js%E8%8E%B7%E5%8F%96%E7%B2%98%E8%B4%B4%E5%86%85%E5%AE%B9/ 思路：在编辑环境中，粘贴 ...

随机推荐

  1. Python Interpreter

    在开始之前,我们先限定下python解释器的意思.当讨论Python的时候,解释器这个词可以用在不同的地方.有的时候,解释器指的是Python Interpreter,也就是你在命令行交互界面上输入p ...

  2. Efficiency in Shell

    最近在写一个shell脚本, 由于该脚本对效率有较高的要求, 所以查阅了一些文章. 感觉这篇文章写得确实不错, 文章中的例子,确实很棒! 所 以我把他们提取出来: @1:实例: 需求:计算1到1000 ...

  3. 编译安装 nginx的http_stub_status_module监控其运行状态

    步骤: 1 编译nginx,加上参数 --with-http_stub_status_module 以我自己的编译选项为例: #配置指令 ./configure --prefix=/usr/local ...

  4. 【转】通过fio工具，测试SATA,SAS,SSD 读写性能

      转自:http://blog.csdn.net/killmice/article/details/42745937

  5. spring RMI的使用

    Spring整合RMI的原理 客户端的核心是RmiProxyFactoryBean,包含serviceURL属性和serviceInterface属性. 通过JRMP访问服务.JRMP JRMP:ja ...

  6. $《利用Python进行数据分析》学习笔记系列——IPython

    本文主要介绍IPython这样一个交互工具的基本用法. 1. 简介 IPython是<利用Python进行数据分析>一书中主要用到的Python开发环境,简单来说是对原生python交互环 ...

  7. $百度应用引擎BAE的使用与应用部署

    百度应用引擎(BAE)是百度推出的网络应用开发平台,开发者使用BAE不需要进行服务器的配置.维护等繁琐的工作,也不需要进行域名的申请.备案等工作,而只需要上传自己的WEB应用即可在公网上访问.使用及部 ...

  8. Linux软件包管理 RMP包

    RPM 包的安装虽然很方便和快捷,但是依赖性实在是很麻烦,尤其是库文件依赖,还要去 rpmfind 网站査找库文件到底属于哪个 RPM 包,从而导致 RPM 包的安装非常烦琐.那么,有没有可以自动解决 ...

  9. Python与硬件学习笔记：蜂鸣器（转）

    相信大家对蜂鸣器都不会陌生,很多产品和方案中都会用到蜂鸣器,大部分都是使用蜂鸣器来做提示或报警,比如按键按下.开始工作.工作结束或是故障等等.这里对单片机在蜂鸣器驱动上的应用作一下描述. 蜂鸣器的介绍 ...

  10. Struts2笔记04——Hello World Example（转）

    原文地址:https://www.tutorialspoint.com/struts_2/ [注释]项目结构,次序估计有误 通过学习Struts2的架构,我们可以知道,在Struts2 web应用中, ...