<!DOCTYPE html>

<html>

<head>

    <title>Example 05.04 - Basic 2D geometries - Cube</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 cube = createMesh(new THREE.BoxGeometry(10, 10, 10, 1, 1, 1));

        // 把正方体添加到场景中去

        scene.add(cube);

        // 设置相机的坐标和朝向

        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 () {

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

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

            this.depth = cube.children[0].geometry.parameters.depth;

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

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

            this.depthSegments = cube.children[0].geometry.parameters.depthSegments;

            this.redraw = function () {

                // remove the old plane

                scene.remove(cube);

                // create a new one

                cube = createMesh(new THREE.BoxGeometry(controls.width, controls.height, controls.depth, Math.round(controls.widthSegments), Math.round(controls.heightSegments), Math.round(controls.depthSegments)));

                // add it to the scene.

                scene.add(cube);

            };

        };

        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, 'depth', 0, 40).onChange(controls.redraw);

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

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

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

            return mesh;

        }

        function render() {

            stats.update();

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

　　

31-THREE.JS 正方体的更多相关文章

  1. 31.Node.js 常用工具 util

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

  2. 前端必备的js知识点（转载）

    1.本文主体源自:http://www.cnblogs.com/coco1s/p/4029708.html,有兴趣的可以直接去那里看,也可以看看我整理加拓展的.2.js是一门什么样的语言及特点?    ...

  3. chenxi的js学习笔记

    1.本文主体源自:http://www.cnblogs.com/coco1s/p/4029708.html,有兴趣的可以直接去那里看,也可以看看我整理加拓展的. 2.js是一门什么样的语言及特点? j ...

  4. NodeJs>------->>第三章：Node.js基础知识

    第三章:Node.js基础知识 一:Node.js中的控制台 1:console.log.console.info  方法 console.log(" node app1.js 1> ...

  5. vs2010中关于HTML控件与服务器控件分别和js函数混合使用的问题

    此文档解决以下问题: 1.在.cs文件中如何访问html控件? 在html控件中添加属性runat="server"即可 2.在html控件中,如何调用js函数? 在html控件中 ...

  6. Node.js进程通信模块child_process

    前言 Node.js是一种单线程的编程模型,对Node.js的赞美和诟病的也都是因为它的单线程模型,所有的任务都在一个线程中完成(I/O等例外).单线程模型,不仅让代码非常简洁,更是直接避免了线程调度 ...

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

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

  8. 基于express框架的应用程序骨架生成器介绍

    作者:zhanhailiang 日期:2014-11-09 本文将介绍怎样使用express-generator工具高速生成基于express框架的应用程序骨架: 1. 安装express-gener ...

  9. Best JavaScript Tools for Developers

    JavaScript solves multiple purposes; it helps you to create interactive websites, web applications, ...

随机推荐

  1. Java集合的遍历方式

    Map的遍历 1.通过map.entrySet遍历Key和Value Map<Integer,Integer> map = new HashMap<>(); map.put(1 ...

  2. Ubuntu Linux下通过代理(proxy)使用git上github.com

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/loveaborn/article/details/24575659 github.com.作为程序猿 ...

  3. shell脚本调用传参【转载】

    转自:https://www.cnblogs.com/cisum/p/8010658.html 1.直接使用$0,$1,$2,$3 $0是脚本的名字,就是按顺序来 #!/bin/bash # auth ...

  4. jdk1.7 ArrayList源码浅析

    参考:http://www.cnblogs.com/xrq730/p/4989451.html(借鉴的有点多,哈哈) 首先介绍ArrayList的特性: 1.允许元素为空.允许重复元素 2.有序,即插 ...

  5. crm--业务点详细概述

    一.CRM简介:(为什么开发CRM) 此项目主要供自己的公司使用,原来因为公司人员较少,人员管理考勤等都用excel保存.但是现在因为公司人员,以及部门增多,为了方便管理 ,供销售人员使用内部系统更方 ...

  6. JVM内存杂记1

    大多数 JVM 将内存区域划分为 Method Area(Non-Heap)(方法区) ,Heap(堆) , Program Counter Register(程序计数器) ,   VM Stack( ...

  7. ubuntu下关于profile和bashrc中环境变量的理解

    (0) 写在前面 有些名词可能需要解释一下.(也可以先不看这一节,在后面看到有疑惑再上来看相关解释) $PS1和交互式运行(running interactively): 简单地来说,交互式运行就是在 ...

  8. Apache 浏览器访问限制配置

    浏览器访问限制配置 user_agent收入的浏览器中,我们通过百度,谷歌很容易就可以查到相关的一些资料,方便了我们对知识的查找,但在某些特定情况下,我们并不希望有人可以通过某写搜索引擎直接访问到我们 ...

  9. 20145222黄亚奇《网络对抗》MSF基础应用

    实践目标 掌握metasploit的基本应用方式. 具体需要完成(1)ms08_067;(2)ms11_050:(3)Adobe(4)成功应用任何一个辅助模块. 实验内容 掌握metasploit的基 ...

  10. Google揭露SHA-1碰撞，加速数据重删字节对比

    原创 架构师技术联盟  近期,Google和道荷兰阿姆斯特研究者宣布攻破了世界上第一例公开的SHA-1哈希碰撞实例,业界一片哗然.当两组不同的数据(文件.一段数据)计算出相同的Hash值时,即视为二者 ...