<!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, 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, 20, 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 = 15;

        plane.position.y = 0;

        plane.position.z = 0;

        // 添加地面

        scene.add(plane);

        // 创建一个正方体

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

        var cubeMaterial = new THREE.MeshLambertMaterial({color: 0xff0000});

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

        cube.castShadow = true;

        // 给正方体坐标

        cube.position.x = -4;

        cube.position.y = 3;

        cube.position.z = 0;

        // 把正方体添加到场景中去

        scene.add(cube);

        // 创建一个球体

        var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);

        var sphereMaterial = new THREE.MeshLambertMaterial({color: 0x7777ff});

        var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);

        // 给球体坐标

        sphere.position.x = 20;

        sphere.position.y = 0;

        sphere.position.z = 2;

        sphere.castShadow = true;

        // 把球体添加到场景中去

        scene.add(sphere);

        // 照相机朝向 10,0,0 的方向

        camera.position.x = -25;

        camera.position.y = 30;

        camera.position.z = 25;

        camera.lookAt(new THREE.Vector3(10, 0, 0));

        // 添加自然光

        var ambiColor = "#0c0c0c";

        var ambientLight = new THREE.AmbientLight(ambiColor);

        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.bouncingSpeed = 0.03;

            this.ambientColor = ambiColor;

            this.disableSpotlight = false;

        };

        var gui = new dat.GUI();

        gui.addColor(controls, 'ambientColor').onChange(function (e) {

            ambientLight.color = new THREE.Color(e);

        });

        gui.add(controls, 'disableSpotlight').onChange(function (e) {

            spotLight.visible = !e;

        });

        render();

        function render() {

            stats.update();

            // 旋转正方体

            cube.rotation.x += controls.rotationSpeed;

            cube.rotation.y += controls.rotationSpeed;

            cube.rotation.z += controls.rotationSpeed;

            // 滚动球体

            step += controls.bouncingSpeed;

            sphere.position.x = 20 + ( 10 * (Math.cos(step)));

            sphere.position.y = 2 + ( 10 * Math.abs(Math.sin(step)));

            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>

12-THREE.JS 自然光的更多相关文章

  1. Python3+Selenium3+webdriver学习笔记12（js操作应用：滚动条 日历 内嵌div）

    #!/usr/bin/env python# -*- coding:utf-8 -*-'''Selenium3+webdriver学习笔记12(js操作应用:滚动条 日历 内嵌div)'''from ...

  2. 模糊查询（附上源码和jquery-1.12.1.js，jquery-ui.js，jquery-ui.css）

    直接上源码: <!doctype html> <html lang="en"> <head> <meta charset="ut ...

  3. 菜单栏伸缩（附jquery-1.12.1.js）

    Css: <style type="text/css"> .leftMenu { min-width:220px; width:268px; margin:40px a ...

  4. 2015年12月12 Node.js实战（一）使用Express+MongoDB搭建多人博客

    序,Node是基于V8引擎的服务器端脚本语言. 基础准备 Node.js: Express:本文用的是3.21.2版本,目前最新版本为4.13.3,Express4和Express3还是有较大区别,可 ...

  5. Node.js权威指南 (12) - Node.js中的其他模块

    12.1 使用dns模块解析域名 / 313 12.1.1 使用resolve方法将域名解析为DNS记录 / 313 12.1.2 使用lookup方法查询IP地址 / 315 12.1.3 使用re ...

  6. 大部分教程不会告诉你的 12 个 JS 技巧

    from:https://www.infoq.cn/article/eSYzcMZK4PkOzZC_68fv 在这篇文章中,作者将分享 12 个非常有用的 JavaScript 技巧,可以帮助你写出简 ...

  7. 12 个 JS 技巧

    1. 过滤唯一值 ES6 引入了 Set 对象和延展(spread)语法…,我们可以用它们来创建一个只包含唯一值的数组. 复制代码     const array = [1, 1, 2, 3, 5, ...

  8. 12 (H5*) JS第二天 流程控制：顺序结构、分支结构、循环结构

    目录 1:一元运算符 2:流程控制 3:分支之if语句 4:分支之if-else语句 5:分支语句之三元运算符 6:if和else if语句 7:switch-case语句 8:while循环 9:d ...

  9. 12.Vue.js 表单

    这节我们为大家介绍 Vue.js 表单上的应用. 你可以用 v-model 指令在表单控件元素上创建双向数据绑定. <div id="app"> <p>in ...

随机推荐

  1. 我的第二个Python小程序

    输出0-100之间的偶数: # Author: fansik # Description: Output an even number between 0 and 100 # method one n ...

  2. 剑指offer 面试4题

    面试4题: 题目:在一个二维数组中,每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含有该整数. 解题代码一:二 ...

  3. 剑指offer 面试33题

    面试33题:题:二叉搜索树的后序遍历序列 题目:输入一个整数数组,判断该数组是不是某二叉搜索树的后序遍历的结果.如果是则输出Yes,否则输出No.假设输入的数组的任意两个数字都互不相同. 解题思路:递 ...

  4. AWK Demo

    AWK is so poweful. AWK功能太强大了: @1:处理格式化文本(感觉主要还是以这个为主) @2:对文本逐行进行处理(过滤某些行,保留符合条件的) @3:将文件根据不同的条件分成多个文 ...

  5. SourceTree的基本使用---基本介绍/本地开发

    转载自https://www.cnblogs.com/tian-xie/p/6264104.html 1. SourceTree是什么 拥有可视化界面的项目版本控制软件,适用于git项目管理 wind ...

  6. UI控件之UIPickerView的协议方法

    UIPickerView:选择视图,父类是UIView UIPickerView *pickerView=[[UIPickerView alloc]initWithFrame:CGRectMake(1 ...

  7. OpenGL学习进程（6）第四课：点、边和图形（一）点

    本节是OpenGL学习的第四个课时,下面介绍OpenGL点的相关知识:     (1)点的概念:     数学上的点,只有位置,没有大小.但在计算机中,无论计算精度如何提高,始终不能表示一个无穷小的点 ...

  8. springboot-数据库

    Spring-data-jpa jpa定义了一系列持久化的标准,比如hibernate就实现了这一标准. Springboot 的jpa就是hibernate的整合. 在pom文件中增加配置: < ...

  9. 数字代币ICO

    随着比特币.莱特币.以太币的逐步兴起,越来越多的数字代币开始衍生,虚拟货币扑朔迷离,一不小心就被人割了韭菜..... 从荷兰IPO的故事说起 400多年前,西方有一群精英海盗开了一家公司.为了顺利拓展 ...

  10. 主攻ASP.NET.4.5.1 MVC5.0之重生:Web项目语音朗读网页文本,简单语音提示浏览状态

    第一步 添加SpeechLib.dll 下载SpeechLib.dll: 在项目中并且引用DLL using SpeechLib; using System.Threading; 第二步 调用并使用 ...