场景相关函数和属性

下面的代码中应用到了所有以上的函数及属性：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script type="text/javascript"

            src="libs/three.js"></script>

    <script type="text/javascript"

            src="libs/stats.js"></script>

    <script type="text/javascript"

            src="libs/dat.gui.js"></script>

    <style>

        body{

            /*移除滚动条*/

            margin:0;

            overflow:hidden;

        }

    </style>

</head>

<body>

<div id="WebGL-output"></div>

<div id="Stats-output"></div>

<script type="text/javascript">

    function init(){

        var scene=new THREE.Scene();

        //scene.fog=new THREE.Fog(0xffffff,0.1,100);//颜色、近处、远处，越远浓度越高

        scene.fog=new THREE.FogExp2(0xffffff,0.015);//颜色、浓度

        var stats=new initStats();

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

        camera.position.x=-30;

        camera.position.y=40;

        camera.position.z=30;

        camera.lookAt(scene.position);

        scene.add(camera);

        var renderer=new THREE.WebGLRenderer();

        renderer.setClearColor(0xFFFFFF,1.0);

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

        renderer.shadowMapEnabled=true;

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

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

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

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

        plane.position.x = 0;

        plane.position.y = 0;

        plane.position.z = 0;

        plane.receiveShadow=true;

        scene.add(plane);

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

        spotLight.position.set(-30,80,-10);

        spotLight.castShadow=true;//此光源产生阴影

        scene.add(spotLight);

        var ambientLight=new THREE.AmbientLight(0x0a0a0a);

       // ambientLight.castShadow=true;//此光源产生阴影

        scene.add(ambientLight);

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

        var controls=new function(){

            this.rotationSpeed=0.02;

            this.numberOfObjects = scene.children.length;

            this.addCube=function(){

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

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

                var cubeMaterial=new THREE.MeshLambertMaterial({color:Math.random()*0xffffff});

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

                cube.castShadow=true;

                cube.name="cube-"+scene.children.length;

                cube.position.x=-30+Math.round(Math.random()*planeGeometry.parameters.width);

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

                cube.position.z=-25+Math.round(Math.random()*planeGeometry.parameters.height);

                scene.add(cube);

                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.outputObjects = function () {

                console.log(scene.children);

            };

        };

       // scene.overrideMaterial=new THREE.MeshLambertMaterial({color:0xffffff});//设置所有物体的材质属性

        var gui=new dat.GUI();

        gui.add(controls,'rotationSpeed',0,1.0);//范围为0-0.5

        gui.add(controls, 'addCube');

        gui.add(controls, 'removeCube');

        gui.add(controls, 'outputObjects');

        gui.add(controls, 'numberOfObjects').listen();

        render ();

        function render() {

            stats.update();

            scene.traverse(function (e) {//将一个函数作为参数传递进来，这个传递进来的函数将会在场景的每一个子对象上调用一次

                if (e instanceof THREE.Mesh && e != plane) {

                    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>

运行效果如下图：

Three.js学习笔记05的更多相关文章

  1. js学习笔记：webpack基础入门（一）

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  2. Vue.js学习笔记（2）vue-router

    vue中vue-router的使用:

  3. JS 学习笔记--9---变量-作用域-内存相关

    JS 中变量和其它语言中变量最大的区别就是,JS 是松散型语言,决定了它只是在某一个特定时间保存某一特定的值的一个名字而已.由于在定义变量的时候不需要显示规定必须保存某种类型的值,故变量的值以及保存的 ...

  4. WebGL three.js学习笔记 使用粒子系统模拟时空隧道（虫洞）

    WebGL three.js学习笔记 使用粒子系统模拟时空隧道 本例的运行结果如图: 时空隧道demo演示 Demo地址:https://nsytsqdtn.github.io/demo/sprite ...

  5. WebGL three.js学习笔记 法向量网格材质MeshNormalMaterial的介绍和创建360度全景天空盒的方法

    WebGL学习----Three.js学习笔记(5) 点击查看demo演示 Demo地址:https://nsytsqdtn.github.io/demo/360/360 简单网格材质 MeshNor ...

  6. WebGL three.js学习笔记 创建three.js代码的基本框架

    WebGL学习----Three.js学习笔记(1) webgl介绍 WebGL是一种3D绘图协议,它把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的 ...

  7. vue.js 学习笔记3——TypeScript

    目录 vue.js 学习笔记3--TypeScript 工具 基础类型 数组 元组 枚举 字面量 接口 类类型 类类型要素 函数 函数参数 this对象和类型 重载 迭代器 Symbol.iterat ...

  8. 2019-4-29 js学习笔记

    js学习笔记一:js数据类型   1:基本数据类型       number类型(整数,小数)      String类型          boolean类型        NaN类型其实是一个nu ...

  9. 一点感悟：《Node.js学习笔记》star数突破1000+

    写作背景 笔者前年开始撰写的<Node.js学习笔记> github star 数突破了1000,算是个里程碑吧. 从第一次提交(2016.11.03)到现在,1年半过去了.突然有些感慨, ...

随机推荐

  1. 依赖背包——cf855C好题

    比较裸的依赖背包,但是想状态还是想了好久 转移时由于边界问题,虽然可以倒序转移,但当容量为0|1的时候,由于有初始值的存在 很难再原dp数组上进行修改,所以额外用tmp数组来保存修改后的值 #incl ...

  2. 2018年最新JAVA面试题总结之数据库（3）

    转自于:https://zhuanlan.zhihu.com/p/39804394 1.MySQL的delete与truncate区别? 回答:delete语句执行删除的过程是每次从表中删除一行,并且 ...

  3. nginx实现Ipv6地址解析

    nginx实现Ipv6地址解析 1.nginx实现Ipv6地址解析 [root@ip-10-109-1-47 conf]# cat nginx.conf worker_processes 2; eve ...

  4. ubuntu apt不使用代理

    常见的问题是apt使用代理. 不过今天遇到的情况是,桌面进不去,只能tty:在tty界面下,发现1080端口上开着代理,/etc/environment和~/.bashrc中都确保注释掉了http_p ...

  5. scrapy_redis 相关: 多线程更新 score/request.priority

    0.背景 使用 scrapy_redis 爬虫, 忘记或错误设置 request.priority(Rule 也可以通过参数 process_request 设置 request.priority), ...

  6. oracle中nvarchar2查询结果显示总是少一位

    问题: 有个表的字段是nvarchar2(32),但是在plsql中查询显示结果发现一直少一位. 修改方法: 在plsql里的首选项-连接里有个选项: 在oci8上强制使用oci7, 把这个勾上就ok ...

  7. 洛谷 p5020 货币系统 题解

    传送门 一个手动枚举能过一半点而且基本靠数学的题目(然而我考试的时候只有25分) 读清题目后发现就是凑数嘛,.... 对啊,就是凑数,怎么凑是重点啊.. 于是就绝望了一小时手动枚举n从1到5的情况 吐 ...

  8. 课下必做MyCP

    一.Linux的CP命令 Linux 的cp命令 功能: 复制文件或目录 说明: cp指令用于复制文件或目录,如同时指定两个以上的文件或目录,且最后的目的地是一个已经存在的目录,则它会把前面指定的所有 ...

  9. 20175305张天钰Java结对编程四则运算（二）

    Java结对编程四则运算(二) 一.题目描述及要求 Git提交粒度不要太粗,建议一个文件/一个类/一个函数/一个功能/一个bug修复都进行提交,不能一天提交一次,更不能一周一次,参考Commit Me ...

  10. java自动化-关键字驱动在junit接口自动化的应用

    本文是继承上文的基础上进行的讨论,建议读者先阅读http://www.cnblogs.com/xuezhezlr/p/9097137.html和https://www.cnblogs.com/xuez ...