<!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. Python简单实现邮件群发

    Python简单实现邮件群发 import smtplib from email.mime.text import MIMEText from email.utils import formatadd ...

  2. 我的Android进阶之旅------>解决错误：You need to use a Theme.AppCompat theme (or descendant) with this activity.

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

  3. Android---55---Web Service概述

    Web Service 是什么? /*w3school*/ Web Services 是应用程序组件 Web Services 使用开放协议进行通信 Web Services 是独立的(self-co ...

  4. Android Paint setXfermode

     背景: dst        前景: src  PorterDuff.Mode.CLEAR 清除画布上图像 PorterDuff.Mode.XOR 取两层图像的非交集部门 PorterDuff.Mo ...

  5. str()和repr()（以及``操作符）

    内建函数str()和repr()或反引号操作符(``)可以方便的获取字符串. str它会把值转换为合理形式的字符串,可读性更好,同时对用户来说更加友好. repr它会创建一个字符串,以合法的Pytho ...

  6. java 小数转百分比

    NumberFormat percent = NumberFormat.getPercentInstance(); percent.setMaximumFractionDigits(2); //保留多 ...

  7. Top 10 Uses For A Message Queue

    We’ve been working with, building, and evangelising message queues for the last year, and it’s no se ...

  8. Unity,android和IOS 防止八门神器注入

    八门神器主要是不断筛选,来获取关键属性(比如金币)在内存中的地址,再根据该地址来修改指向的数据就可以成功. 因此,我们需要在金币读取和设置的时候,使用一个偏移量,来达到干扰的目的就可以了 未经仔细测试 ...

  9. asp.net MVC 强类型视图表单Ajax提交的注意事项

    xmfdsh这几天遇到这么一个问题,在MVC中通过model模型生成的强类型视图的表单,在提交后的回调函数并没有发挥作用.如下图: 如上图,无论是通过Ajax.BeginForm或者Html.Begi ...

  10. MySQL引擎及选择

    一.MySQL的存储引擎 完整的引擎说明还是看官方文档:http://dev.mysql.com/doc/refman/5.6/en/storage-engines.html 这里介绍一些主要的引擎 ...