<!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.fog = new THREE.Fog(0xffffff, 0.015, 100);

        // 创建一个相机

        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 = true;

        // 创建地面

        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 = 0;

        plane.position.z = 0;

        // 添加地面到场景中去

        scene.add(plane);

        // 相机对准场景

        camera.position.x = -30;

        camera.position.y = 40;

        camera.position.z = 30;

        camera.lookAt(scene.position);

        // 添加自然光

        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 step = 0;

        var controls = new function () {

            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((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 = -30 + Math.round((Math.random() * planeGeometry.parameters.width));

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

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

                // 场景中添加物体

                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, '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>

05-THREE.JS 产生大雾的效果的更多相关文章

  1. [JS,NodeJs]个人网站效果代码集合

    上次发的个人网站效果代码集合: 代码集合: 1.彩色文字墙[鼠标涟漪痕迹] 2.彩色旋转圆环 [模仿http://www.moma.org/interactives/exhibitions/2012/ ...

  2. turn.js实现翻书效果

    JS插件网 http://www.ijquery.cn/?p=173 描述:Turn.js 是一个轻量级的 (15kb) jQuery/html5 插件用来创建类似书本和杂志翻页效果,支持触摸屏设备. ...

  3. 原生JS封装简单动画效果

    原生JS封装简单动画效果 一致使用各种插件,有时候对原生JS陌生了起来,所以决定封装一个简单动画效果,熟悉JS原生代码 function animate(obj, target,num){ if(ob ...

  4. JS实现回到顶部效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. 面向对象原生js幻灯片代淡出效果

    面向对象原生js幻灯片代淡出效果 下面是代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" & ...

  6. Turn.js 实现翻书效果的学习与总结

    最近CTO给我分配了一个移动端H5开发的任务,主要功能是需要实现翻书效果,我听过主要需求后,当时是呀!!!接下来自己尝试使用fullPage.js和Swiper来实现翻书效果,结果效果都不是非常的理想 ...

  7. JS 文本输入框放大镜效果

    JS 文本输入框放大镜效果 今天下午研究了下 "文本输入框放大镜效果" 当然KISSY官网也有这种组件 请看kissy demo 其实这种效果 对于很多童鞋来说 应该并不陌生!我今 ...

  8. 原生js实现的放大镜效果

    这是我用原生js写的放大镜效果,与各种各样的框架技术相比,我喜欢使用原生的js,在这里,想和大家一起谈谈原生和框架技术的理解与个人喜好. <!DOCTYPE HTML><html&g ...

  9. JavaScript js无间断滚动效果 scrollLeft方法 使用模板

    JavaScript js无间断滚动效果 scrollLeft方法 使用模板 <!DOCTYPE HTML><html><head><meta charset ...

随机推荐

  1. Linux服务管理（开启关闭防火墙）

    1.firewalld的基本使用 启动: systemctl start firewalld 关闭: systemctl stop firewalld 查看状态: systemctl status f ...

  2. maven的安装以及查看是否安装成功

    Maven安装教程详解   一.准备工作 1.确定电脑上已经成功安装jdk7.0以上版本 2.win10操作系统 3.maven安装包            下载地址:http://maven.apa ...

  3. 0405-服务注册与发现-客户端负载均衡-Ribbon 同Eureka使用，Ribbon脱离Eureka使用

    一.Ribbon 同Eureka使用,注意事项 前几节一同使用,注意事项: 如果没有其他区域数据源,则根据客户端配置进行猜测(与实例配置相反).能够获取eureka.client.availabili ...

  4. Meteor工作目录的划分

    现在说明一下Meteor的工作目录是这样划分的,但是在说明之前 做个约定,以免后面造成混淆或错误.  我们通过 meteor create API-002-Core创建meteor工程后,那么就会有一 ...

  5. 部署Jenkins+docker集成环境

    环境: 主机(mac osx)和虚拟机(Ubuntu 16.04) mac osx系统,运行Jenkins Ubuntu16.04系统,运行docker(用Ubuntu14.04镜像创建一个docke ...

  6. 深入理解MVC架构

    MVC MVC是一种设计模式(Design pattern),也就是一种解决问题的方法和思路, 是上世纪80年代提出的,到现在已经颇有历史了. MVC的意义在于指导开发者将数据与表现解耦,提高代码,特 ...

  7. 电信、网通、联通等恶意DNS劫持跳广告页面的解决方法

    中国电信.网通.联通ADSL用户必读:中国电信.网通.联通劫持dns(中国电信.网通.联通劫持ie浏览器)解决方案D... 宽带连接有 也能上网但是本地连接一直显示为受限制的解决方法 我的电脑一直显示 ...

  8. solr、Lucene、IKAnalyzer这三者关系是怎样的？

    lucene 是开源搜索引擎 solr 是基于 lucene开发的搜索引擎 IK 是中文分词. lucene 不是一个搜索引擎,只是一个基础的文件索引工具包,或者叫“搜索引擎开发包”.不能单独作为程序 ...

  9. java FileUtils 文件工具类

    package com.sicdt.library.core.utils; import java.io.BufferedInputStream; import java.io.File; impor ...

  10. Tooltip表单验证的注册表单

    在线演示 本地下载