<!DOCTYPE html>

<html>

<head>

    <title>Example 04.05 - Mesh face material</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 renderer = new THREE.WebGLRenderer();

        renderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));

        renderer.setSize(window.innerWidth, window.innerHeight);

        renderer.shadowMapEnabled = false;

        // 创建一个地面

        var planeGeometry = new THREE.PlaneGeometry(60, 40, 1, 1);

        var planeMaterial = new THREE.MeshLambertMaterial({color: 0xffffff});

        var plane = new THREE.Mesh(planeGeometry, planeMaterial);

        plane.receiveShadow = true;

        // 旋转这个地面

        plane.rotation.x = -0.5 * Math.PI;

        plane.position.x = 0;

        plane.position.y = -2;

        plane.position.z = 0;

        // 把地面添加到场景中去

        scene.add(plane);

        // 相机的坐标   和   朝向

        camera.position.x = -40;

        camera.position.y = 40;

        camera.position.z = 40;

        camera.lookAt(scene.position);

        // add subtle ambient lighting

//        var ambientLight = new THREE.AmbientLight(0x0c0c0c);

//        scene.add(ambientLight);

        // 添加聚光灯

        var spotLight = new THREE.SpotLight(0xffffff);

        spotLight.position.set(-40, 60, -10);

        spotLight.castShadow = true;

        scene.add(spotLight);

        // 把渲染后的结果放到DOM元素中去

        document.getElementById("WebGL-output").appendChild(renderer.domElement);

        var group = new THREE.Mesh();

        // 设置每个面的颜色

        var mats = [];

        mats.push(new THREE.MeshBasicMaterial({color: 0x009e60}));

        mats.push(new THREE.MeshBasicMaterial({color: 0x009e60}));

        mats.push(new THREE.MeshBasicMaterial({color: 0x0051ba}));

        mats.push(new THREE.MeshBasicMaterial({color: 0x0051ba}));

        mats.push(new THREE.MeshBasicMaterial({color: 0xffd500}));

        mats.push(new THREE.MeshBasicMaterial({color: 0xffd500}));

        mats.push(new THREE.MeshBasicMaterial({color: 0xff5800}));

        mats.push(new THREE.MeshBasicMaterial({color: 0xff5800}));

        mats.push(new THREE.MeshBasicMaterial({color: 0xC41E3A}));

        mats.push(new THREE.MeshBasicMaterial({color: 0xC41E3A}));

        mats.push(new THREE.MeshBasicMaterial({color: 0xffffff}));

        mats.push(new THREE.MeshBasicMaterial({color: 0xffffff}));

        var faceMaterial = new THREE.MeshFaceMaterial(mats);

        for (var x = 0; x < 3; x++) {

            for (var y = 0; y < 3; y++) {

                for (var z = 0; z < 3; z++) {

                    var cubeGeom = new THREE.BoxGeometry(2.9, 2.9, 2.9);

                    var cube = new THREE.Mesh(cubeGeom, faceMaterial);

                    cube.position.set(x * 3 - 3, y * 3, z * 3 - 3);

                    group.add(cube);

                }

            }

        }

        scene.add(group);

        var step = 0;

        var controls = new function () {

            this.rotationSpeed = 0.02;

            this.numberOfObjects = scene.children.length;

        };

        var gui = new dat.GUI();

        gui.add(controls, 'rotationSpeed', 0, 0.5);

        render();

        function render() {

            stats.update();

            group.rotation.y = step += controls.rotationSpeed;

            requestAnimationFrame(render);

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

　　

22-THREE.JS 面材质的更多相关文章

  1. Three.js开发指南---使用three.js的材质（第四章）

    材质就像物体的皮肤,决定了几何体的外表,例如是否像草地/金属,是否透明,是否显示线框等 一 材质 THREE.js的材质分为多种,Three.js提供了一个材质基类THREE.Material, 该基 ...

  2. three.js各种材质的实现源码

    three.js常用材质:基本材质.兰伯特材质.冯氏材质.标准材质. 我们可以自己使用着色器实现这些材质,用于批量渲染等用途. 为了简单,假设物体只有一张漫反射贴图,场景中只存在一个环境光和一个平行光 ...

  3. 4.22 注入js需要加 addjavascriptinterface

    由于项目需要,再次使用到了android的webview,webview要加载的页面是html5的页面: 需要有点击webview中的控件的交互,所以需要在android应用中注入一个js对象: 通过 ...

  4. 使用Three.js的材质

    1.three.js提供哪些材质? MeshBasicMaterial(网格基础材质)/基础材质,,可以用它富裕几何体一种简单的亚瑟,或者显示几何体的线框 MeshDepthMaterial(网格深度 ...

  5. three.js - 添加材质 灯光 阴影

    看下运行效果: 源码解释: <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  6. 20-THREE.JS 混合材质

    <!DOCTYPE html> <html> <head> <title></title> <script src="htt ...

  7. 第22篇 js中的this指针的用法

    前面把js的相关知识总结了下,今天把js中的上下文的this,对于强类型语言,this的用法非常的单一,因为他们没有js特有的动态绑定. 首先看下面代码: function funcA() { thi ...

  8. 23-THREE.JS 光照材质

    <!DOCTYPE html> <html> <head> <title></title> <script src="htt ...

  9. 19-THREE.JS 深度材质

    <!DOCTYPE html> <html> <head> <title></title> <script src="htt ...

随机推荐

  1. django-应用中和amdin使用富文本编辑器kindeditor

    文章描述.新闻详情和产品介绍等,都需要大量的文字描述信息或图片.视频.文字的编辑等,这个时候我们就需要介绍第三方富文本编辑器. 今天介绍的是django中绑定和应用kindeditor编辑器: 效果如 ...

  2. 在Centos上打Preempt-rt实时补丁（续）

    经过上一篇,发现2.6.31版本的补丁不能正常运行(还未找到原因),现改用2.6.33版本: kernel:linux-2.6.33.9 patch:patch-2.6.33.9-rt 解压并打好补丁 ...

  3. Myeclipse中文乱码解决方式

    我们刚刚安装的Myeclipse有可能使用的是GBK的编码方式,而通常我们的程序都是使用的是UTF-8的编码方式,所以当我们导入一个项目的时候,会产生乱码,解决方式如下: 一.将整个project设置 ...

  4. Runtime.getRuntime().exec()需要注意的地方

    文章出处http://www.cnblogs.com/fclbky/p/6112180.html 有时候我们可能需要调用系统外部的某个程序,此时就可以用Runtime.getRuntime().exe ...

  5. APP数据埋点分类方式

    1.数据埋点的重要性     在现实工作中,数据的整体流程为:数据生产-数据采集-数据处理-数据分析和挖掘-数据可视化,其中,数据采集是很重要的一个环节,数据采集得全不全.对不对,直接决定数据广度和质 ...

  6. python 的两个模块xlwt,xlrd,写入和读取Excel数据

    http://www.cnblogs.com/fireme/p/3887284.html 这上面写的很全,不过我只需要简单的读和写的操作就ok了,下面是我写的读和写入Excel操作 读取Excel数据 ...

  7. Python（文件处理）

    二.基本操作 #r''------------------>> r:原生字符串,不判断符号的含义#文件处理 f=open(r’c:\a.txt’,’r’,encoding=’utf-8’) ...

  8. github使用ssh秘钥的好处以及设置（转）

    git使用https协议,每次pull,push都要输入密码,使用git协议,使用ssh秘钥,可以省去每次输密码 大概需要三个步骤:一.本地生成密钥对:二.设置github上的公钥:三.修改git的r ...

  9. 第二课 GCC入门之静态库以及共享库

    序言: 前面一课讲了gcc的简单入门,包括gcc编译步骤:预处理:编译:汇编:链接.今天这节课就来讲下linux的库也欢迎大家吐糟共同学习. 原理: linux系统中分为2种库:静态库和共享库.静态库 ...

  10. Hbase1.2.4概述

    安装Hbase的时候,需要注意版本与Hadoop的版本兼容,具体查看:https://hbase.apache.org/book.html#basic.prerequisites 如下图: 我的Had ...