<!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. 一.MySQL入门基础

    1.关于cmd界面无法启动mysql: 1)必须要使用管理员身份运行cmd程序 2)如果下载MySQL5.7版本的,在windows服务上Mysql的名字默认是MySQL57,因此在cmd运行 net ...

  2. java 多线程 day04 线程通信

    package com.czbk.thread; /** * Created by chengtao on 17/12/3. * 需求: 子线程先运行10次,然后主线程运行 100次,依次运行50次 ...

  3. Java AES512加密算法

    AES - 高级加密标准: 高级加密标准(英语:Advanced Encryption Standard,缩写:AES),在密码学中又称Rijndael加密法,是美国联邦政府采用的一种区块加密标准.这 ...

  4. MyIBatis使用

    1.如果根据一些Id进行删除,那么会用到In的用法如: <delete id="DeleteByIds" parameterClass="UserInfo" ...

  5. 第四课 Makefile文件的制作(下)

    1序言: 前面一节课讲解了Makefile的基础知识包括原理.预定义以及命令格式,这样是可以完成一个自动编译的文件,这些知识可以帮你完成.想想mak真是强大啊,可能有些同志发现了如果项目文件太多每个目 ...

  6. Javascript Array对象 sort()方法，记忆方法，方法扩展

    相信 有很多 同仁们,尤其是初学者,在记住 Array对象 sort() 方法的排序,规则上,有点困难: 其实sort()方法已经在实际工作中用到很多遍了,可当我仔细推敲,这个sort()方法,什么时 ...

  7. hadoop12---java并发编程的一些总结

    java并发编程的一些总结 %.1.不应用线程池的缺点 有些开发者图省事,遇到需要多线程处理的地方,直接new Thread(...).start(),对于一般场景是没问题的,但如果是在并发请求很高 ...

  8. 最小可用 Spring MVC 配置

    [最小可用 Spring MVC 配置] 1.导入有概率用到的JAR包, -> pom.xml 的更佳实践 - 1.0 <- <project xmlns="http:// ...

  9. 自定义QSS

    /*QComboBox*/ QComboBox {border: 1px solid rgb(111, 156, 207);border-radius: 3px;padding: 1px 18px 1 ...

  10. QMesageBox的使用

    一.使用构造函数弹出对话框 1. QMessageBox msgBox://最简单的对话框,里面什么也没有 QString str = “test”: msgBox.setText(str); msg ...