<!DOCTYPE html>

<html>

<head>

    <title></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, 10, 130);

        // 场景一个渲染器

        var renderer = new THREE.WebGLRenderer();

        renderer.sortObjects = false;

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

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

        renderer.shadowMapEnabled = true;

        // 设置相机的位置 最远最近距离 朝向

        camera.position.x = -50;

        camera.position.y = 40;

        camera.position.z = 50;

        camera.near = 7;

        camera.far = 139;

        camera.lookAt(scene.position);

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

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

        var step = 0;

        var controls = new function () {

            this.cameraNear = camera.near;

            this.cameraFar = camera.far;

            this.rotationSpeed = 0.02;

            this.numberOfObjects = scene.children.length;

            this.color = 0x00ff00;

            this.removeCube = function () {

                var allChildren = scene.children;

                var lastObject = allChildren[allChildren.length - 1];

                if (lastObject instanceof THREE.Mesh) {

                    scene.remove(lastObject);

                    this.numberOfObjects = scene.children.length;

                }

            };

            this.addCube = function () {

                var cubeSize = Math.ceil(3 + (Math.random() * 3));

                var cubeGeometry = new THREE.BoxGeometry(cubeSize, cubeSize, cubeSize);

                //混合材质

                var cubeMaterial = new THREE.MeshDepthMaterial();

                var colorMaterial = new THREE.MeshBasicMaterial({

                    color: controls.color,

                    transparent: true,

                    blending: THREE.MultiplyBlending

                });

                var cube = new THREE.SceneUtils.createMultiMaterialObject(cubeGeometry, [colorMaterial, cubeMaterial]);

                cube.children[1].scale.set(0.99, 0.99, 0.99);

                cube.castShadow = true;

                // 给正方体随机的位置

                cube.position.x = -60 + Math.round((Math.random() * 100));

                cube.position.y = Math.round((Math.random() * 10));

                cube.position.z = -100 + Math.round((Math.random() * 150));

                // 在场景中添加正方体

                scene.add(cube);

                this.numberOfObjects = scene.children.length;

            };

            this.outputObjects = function () {

                console.log(scene.children);

            }

        };

        var gui = new dat.GUI();

        gui.addColor(controls, 'color');

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

        gui.add(controls, 'addCube');

        gui.add(controls, 'removeCube');

        gui.add(controls, 'cameraNear', 0, 50).onChange(function (e) {

            camera.near = e;

        });

        gui.add(controls, 'cameraFar', 50, 200).onChange(function (e) {

            camera.far = e;

        });

        var i = 0;

        while (i < 10) {

            controls.addCube();

            i++;

        }

        render();

        function render() {

            stats.update();

            // 旋转所有正方体

            scene.traverse(function (e) {

                if (e instanceof THREE.Mesh) {

                    e.rotation.x += controls.rotationSpeed;

                    e.rotation.y += controls.rotationSpeed;

                    e.rotation.z += 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>

20-THREE.JS 混合材质的更多相关文章

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

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

  2. 20行JS代码实现贪吃蛇

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. vray学习笔记（4）混合材质是个什么东西

    看下定义: The Blend material lets you mix two materials on a single side of the surface. Blend material材 ...

  4. js混合计算字符串字节长度

    js混合计算字符串字节长度 function getBt(str) { ) { var char = str.match(/[^\x00-\xff]/ig); : char.length); } el ...

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

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

  6. 20道JS原理题助你面试一臂之力！(转)

    20道JS原理题助你面试一臂之力! 前言 本文针对目前常见的面试题,仅提供了相应的核心原理及思路,部分边界细节未处理.后续会持续更新,希望对你有所帮助. 1. 实现一个call函数 // 思路:将要改 ...

  7. 使用Three.js的材质

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

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

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

  9. 20个JS优化代码技巧

    原文网址链接为:http://www.jstips.co/ .截取了一部分本人认为比较实用的技巧分享给大家.其中一小部分技巧为JS面向对象的写法,不宜一一列出.关于JS面向对象的写法可参考本人前几篇随 ...

随机推荐

  1. Linux（4）- centos7安装python3、Linux下安装、配置virtualenv、确保开发环境的一致性、虚拟环境之virtualenvwrapper、vim

    一.centos7安装python3 1.下载python3的源码包 下载地址:https://www.python.org/ftp/python/3.6.2/Python-3.6.2.tgz cd ...

  2. CF 558 C. Amr and Chemistry 暴力+二进制

    链接:http://codeforces.com/problemset/problem/558/C C. Amr and Chemistry time limit per test 1 second ...

  3. JQuery操作select中的option

    html页面代码例如以下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...

  4. 关于shared pool的深入探讨(二)【转载】

    关于shared pool的深入探讨(二)   作者:eygle |English [转载时请标明出处和作者信息]|[恩墨学院 OCM培训传DBA成功之道]链接:http://www.eygle.co ...

  5. Django框架之单表操作

    一.添加表记录 对于单表有两种方式 # 添加数据的两种方式 # 方式一:实例化对象就是一条表记录 Frank_obj = models.Student(name ="海东",cou ...

  6. Java并发（5）：同步容器

    一. 同步容器出现的原因 在Java的集合容器框架中,主要有四大类别:List.Set.Queue.Map. List.Set.Queue接口分别继承了Collection接口,Map本身是一个接口. ...

  7. React:快速上手(3)——列表渲染

    React:快速上手(3)——列表渲染 使用map循环数组 了解一些ES6 ES6, 全称 ECMAScript 6.0 ,是 JaveScript 的下一个版本标准,2015.06 发版.ES6 主 ...

  8. window下rails4.1 发生TZInfo::DataSourceNotFound 错误

    在官网上学习rails 4.1 ,启动rails server之后发生了如下错误 $ rails serverBooting WEBrickRails 4.1.0 application starti ...

  9. $用python-docx模块读写word文档

    工作中会遇到需要读取一个有几百页的word文档并从中整理出一些信息的需求,比如产品的API文档一般是word格式的.几百页的文档,如果手工一个个去处理,几乎是不可能的事情.这时就要找一个库写脚本去实现 ...

  10. 如何选择合适的MySQL数据类型

    一.MySQL数据类型选择原则 更小的通常更好:一般情况下选择可以正确存储数据的最小数据类型.越小的数据类型通常更快,占用磁盘,内存和CPU缓存更小. 简单就好:简单的数据类型的操作通常需要更少的CP ...