<!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. Pandas 删除指定列中为NaN的行

    定位要删除的行 需求:删除指定列中NaN所在行. 如下图,’open‘ 列中有一行为NaN,定位到它,然后删除. 定位: df[np.isnan(df['open'])].index # 这样即可定位 ...

  2. OVN实战---《A Primer on OVN》翻译

    overview 在本文中,我们将在三个host之间创建一个简单的二层overlay network.首先,我们来简单看一下,整个系统是怎么工作的.OVN基于分布式的control plane,其中各 ...

  3. TI C66x DSP 系统events及其应用 - 5.7（IST）

    当CPU開始处理一个中断(INT4~15)时,它将引用中断服务表(IST).IST是一个获取包括中断服务代码的包的表. IST包括16个连续的获取包.每个中断服务获取包(ISFP)包括最多14条指令( ...

  4. Hazelcast 内存数据网格

    Hazelcast ( www.hazelcast.com)是一种内存数据网格 in-memory data grid,提供Java程序员关键任务交易和万亿级内存应用. Hazelcast的集群属于“ ...

  5. oradebug工具使用2（转载）

    oradebug的前身是在ORACLE 7时的ORADBX,它可以启动用停止跟踪任何会话,dump SGA和其它内存结构,唤醒ORACLE进程,如SMON.PMON进程,也可以通过进程号使进程挂起和恢 ...

  6. iOS学习之NSString

    一.不可变字符 NSString是不可变字符串,它产生的其他字符串方法都是生成一个新的字符串,而不会改变原来字符串. 1.创建方式 //1)字面量,它是常量字符串,存储常量区 NSString *st ...

  7. HackerRank - powers-game-1 【博弈论】

    HackerRank - powers-game-1 [博弈论] 题意 给出 * 2^1 * 2^2 * 2^3 * 2^4 * 2^5 * 2^n 这一串东西 ,然后有两个玩家,*号是可以被替换掉的 ...

  8. Kattis - wheretolive 【数学--求质心】

    Kattis - wheretolive [数学] Description Moving to a new town can be difficult. Finding a good place to ...

  9. html 基础 表单

    一.表单 <form id="" name="" method="post/get" action="负责处理的服务端&qu ...

  10. oracle 数据泵

      Oracle数据库导入导出工具,可以使用exp/imp,但这是比较早期的工具.本文主要介绍数据泵expdp/impdp工具的使用.   1.建立数据泵目录 使用数据泵需要先建directory c ...