<!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();

        scene.overrideMaterial = new THREE.MeshDepthMaterial();

        // 创建一个相机

        var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 10, 130);

        // 创建一个渲染器

        var renderer = new THREE.WebGLRenderer();

        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.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.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.MeshLambertMaterial({color: Math.random() * 0xffffff});

                var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

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

　　

19-THREE.JS 深度材质的更多相关文章

  1. 使用Three.js的材质

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

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

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

  3. JS 深度拷贝 Object Array

    JS 深度拷贝 Object Array function cloneObj(o) { var isArray = o instanceof Array; var isObject = o insta ...

  4. js深度克隆对象

    js深度克隆对象 js深度克隆对象简单的记录一下,如下代码: var obj = { typeOf: function(obj) { const toString = Object.prototype ...

  5. js 深度拷贝

    js 数据类型 分为2种: 基本数据类型:Undefined.Null.Boolean.Number.String 复杂数据类型:Object.Array.function 他们的区别是在内存中的存储 ...

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

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

  7. Angular和Vue.js 深度对比

    Vue.js 是开源的 JavaScript 框架,能够帮助开发者构建出美观的 Web 界面.当和其它网络工具配合使用时,Vue.js 的优秀功能会得到大大加强.如今,已有许多开发人员开始使用 Vue ...

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

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

  9. 20-THREE.JS 混合材质

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

随机推荐

  1. 我的Android进阶之旅------>解决Android Studio报错：DefaultAndroidProject : Unsupported major.minor version 52.0

    问题描述 今天使用Android Studio 2.0打开我之前的项目时,编译报了如下错误: Error:Cause: com/android/build/gradle/internal/model/ ...

  2. springboot集成shiro和开涛的动态url问题

    我出现的问题就是一旦/**=authc不管放到前面还是后面都会把所有的资源全部拦截,css和js都访问不到,只需要把开涛的动态url代码改一下就行了(如上图)

  3. java final 关键词

    package day9; /** * Created by admin on 2018/11/17. * final可以修饰类,方法,变量 特点: final可以修饰类,该类不能被继承. final ...

  4. 010-JDK可视化监控工具-VisualVM

    一.概述 VisualVM是一个集成多个JDK命令行工具的可视化工具.VisualVM基于NetBeans平台开发,它具备了插件扩展功能的特性,通过插件的扩展,可用于显示虚拟机进程及进程的配置和环境信 ...

  5. R语言操作mysql上亿数据量(ff包ffbase包和ETLUtils包)

    平时都是几百万的数据量,这段时间公司中了个大标,有上亿的数据量. 现在情况是数据已经在数据库里面了,需要用R分析,但是完全加载不进来内存. 面对现在这种情况,R提供了ff, ffbase , ETLU ...

  6. SQL JOIN使用方法

    (转自W3School相关教程:http://www.w3school.com.cn,W3School是不错的在线教程,简洁高效!) 下面列出不同的SQL JOIN类型,以及他们之间的差异: JOIN ...

  7. Sqrt(ｘ)

    这题没多大技巧性,只是牛顿迭代法多用于数值计算,这里出现有些意外.维基上有方法说明:http://zh.wikipedia.org/wiki/牛顿法 int sqrt(int x) { if (x = ...

  8. c++ 11nullptr

    1. 引入nullptr的原因 引入nullptr的原因,这个要从NULL说起.对于C和C++程序员来说,一定不会对NULL感到陌生.但是C和C++中的NULL却不等价.NULL表示指针不指向任何对象 ...

  9. LeetCode：翻转二叉树【226】

    LeetCode:翻转二叉树[226] 题目描述 翻转一棵二叉树. 示例: 输入: 4 / \ 2 7 / \ / \ 1 3 6 9 输出: 4 / \ 7 2 / \ / \ 9 6 3 1 题目 ...

  10. c#基础-自动内存管理

    1.自动垃圾回收是什么?     在非托管环境下程序员要自已管理内存,由疏忽的原因,通常会犯两种错误,请求内存后在不使用时忘记释放,或使用已经释放了的内存.但在托管环境下,程序员不用担心这两个问题,C ...