<!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. 我的Android进阶之旅------>解决错误：You need to use a Theme.AppCompat theme (or descendant) with this activity.

    #1.错误描述 今天,想实现Activity不显示标题栏的效果,在项目的AndroidManifest.xml文件,对相应的Activity添加属性 android:theme="@andr ...

  2. （4.6）sql2008中的group by grouping sets

    最近遇到一个情况,需要在内网系统中出一个统计报表.需要根据不同条件使用多个group by语句.需要将所有聚合的数据进行UNION操作来完成不同维度的统计查看. 直到发现在SQL SERVER 200 ...

  3. Java-idea-生成JavaDoc

    1.选中要生成的doc模块 2.选择Tools→Generate JavaDoc 3.填写一下信息 1. 选择是整个项目还是模块还是单个文件 2. 文档输出路径 4. 传入JavaDoc的参数,一般这 ...

  4. 初识ambari

    本文地址:http://www.cnblogs.com/qiaoyihang/p/6290467.html 引用:http://blog.csdn.net/yeruby/article/details ...

  5. jquery关于select框的取值和赋值

    jQuery("#select_id").change(function(){}); // 1.为Select添加事件,当选择其中一项时触发      var checkValue ...

  6. 开博第一篇，学习markdown

    Markdown学习 其实之前自己也一直有记录,不过是Evernote记录,没有分享出来,最近看了一些牛人博客,觉得也应该分享出来.和别人多交流,多学习.所以花了几小时学了一下Markdown语法,现 ...

  7. LCT(link cut tree) 动态树

    模板参考:https://blog.csdn.net/saramanda/article/details/55253627 综合各位大大博客后整理的模板: #include<iostream&g ...

  8. Linux Shell编程第1章——Shell脚本编程概述

    目录 Linux和Shell简介 Linux是一套可免费使用和自由传播的类UNIX操作系统.Shell是一种具备特殊功能的程序,它提供了用户与内核进行交互操作的一种接口.它接收用户输入的命令,并把它送 ...

  9. LightOJ - 1356 Prime Independence (数论+二分图匹配)

    题意:有N个数的集合,其中选出若干个数组成一个子集,要求这个子集中的任意两个数a,b都不能通过a=k*b得到,其中k是一个素数.求这个子集最大的size. 分析:集合中任意两数的关系是二者之间是否之差 ...

  10. return false 和 return true

    常规用法 在普通函数中:return 语句终止函数的执行,并返回一个指定的值给函数调用者,一般会用一个变量接收这个返回值再进行其它处理.如果未指定返回值,则返回 undefined 其中,返回一个函数 ...