<!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(0xaaaaaa, 0.010, 200);

        // 创建一个相机

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

        // 创建一个渲染器

        var renderer = new THREE.WebGLRenderer();

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

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

        renderer.shadowMapEnabled = true;

        // 创建草坪

        var textureGrass = THREE.ImageUtils.loadTexture("../assets/textures/ground/grasslight-big.jpg");

        textureGrass.wrapS = THREE.RepeatWrapping; //表示边缘被夹到纹理单元（texels）的外边界

        textureGrass.wrapT = THREE.RepeatWrapping; //表示边缘被夹到纹理单元（texels）的外边界

        textureGrass.repeat.set(4, 4);

		//

        var planeGeometry = new THREE.PlaneGeometry(1000, 200, 20, 20);

        var planeMaterial = new THREE.MeshLambertMaterial({map: textureGrass});

//      //地面材料

        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: 0xff3333});

        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, 25, 25);

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

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

        // 球体坐标

        sphere.position.x = 10;

        sphere.position.y = 5;

        sphere.position.z = 10;

        sphere.castShadow = true;

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

        scene.add(sphere);

        // 相机坐标 和 参考点

        camera.position.x = -20;

        camera.position.y = 15;

        camera.position.z = 45;

//        camera.position.x = -120;

//        camera.position.y = 165;

//        camera.position.z = 145;

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

        // 添加聚光灯

        var spotLight0 = new THREE.SpotLight(0xcccccc);

        spotLight0.position.set(-40, 60, -10);

        spotLight0.lookAt(plane);

        scene.add(spotLight0);

        var target = new THREE.Object3D();

        target.position = new THREE.Vector3(5, 0, 0);

		//添加半球光

        var hemiLight = new THREE.HemisphereLight(0x0000ff, 0x00ff00, 0.6);

        hemiLight.position.set(0, 500, 0);

        scene.add(hemiLight);

        var pointColor = "#ffffff";

//    var dirLight = new THREE.SpotLight( pointColor);

        var dirLight = new THREE.DirectionalLight(pointColor);

        dirLight.position.set(30, 10, -50);

        dirLight.castShadow = true;

//        dirLight.shadowCameraNear = 0.1;

//        dirLight.shadowCameraFar = 100;

//        dirLight.shadowCameraFov = 50;

        dirLight.target = plane;

        dirLight.shadowCameraNear = 0.1;

        dirLight.shadowCameraFar = 200;

        dirLight.shadowCameraLeft = -50;

        dirLight.shadowCameraRight = 50;

        dirLight.shadowCameraTop = 50;

        dirLight.shadowCameraBottom = -50;

        dirLight.shadowMapWidth = 2048;

        dirLight.shadowMapHeight = 2048;

        scene.add(dirLight);

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

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

        var step = 0;

        var invert = 1;

        var phase = 0;

        var controls = new function () {

            this.rotationSpeed = 0.03;

            this.bouncingSpeed = 0.03;

            this.hemisphere = true;

            this.color = 0x00ff00;

            this.skyColor = 0x0000ff;

            this.intensity = 0.6;

        };

        var gui = new dat.GUI();

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

            if (!e) {

                hemiLight.intensity = 0;

            } else {

                hemiLight.intensity = controls.intensity;

            }

        });

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

            hemiLight.groundColor = new THREE.Color(e);

        });

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

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

        });

        gui.add(controls, 'intensity', 0, 5).onChange(function (e) {

            hemiLight.intensity = 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>

　　

16-THREE.JS 半球光的更多相关文章

  1. three.js 源码注释（三十九）Light/HemisphereLight.js 半球光、 自然光（天光效果）

    /*** * HemisphereLight类 是在场景中创建半球光,就是天光效果,经常用在室外,将各个位置的物体都照亮,室内的光线大多是方向性的, * 无论是窗口还是灯槽,用平面光很方便,室外用平面 ...

  2. 15-THREE.JS 方向光

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

  3. 《selenium2 python 自动化测试实战》（16）——js操作补充

    js修改readonly属性 我们看到这里日期框标签中有readonly属性,如果我们直接send_keys就无法输入内容,这时我们需要先去掉readonly属性: js ='document.get ...

  4. 16 (H5*) JS第6天 日期、字符串、数组

    目录 1:date 2:格式化日期 3:字符串 4:字符串的方法 5:字符串的案例 6:数组的方法 7:包装类型 复习 正文 1:日期:date <script> //创建实例对象 // ...

  5. three.js光源

    在Threejs中,光源用Light表示,它是所有光源的基类.它的构造函数是: THREE.Light ( hex ) 它有一个参数hex,接受一个16进制的颜色值.例如要定义一种红色的光源,我们可以 ...

  6. three.js一个简单demo学些和讲解

    叉口裁剪球体案例 二话不说先上效果图: 全部代码带注释 <!DOCTYPE html> <html lang="en"> <head> < ...

  7. 1000粉！使用Three.js制作一个专属3D奖牌🥇

    背景 破防了 !突然发现 SegmentFault 平台的粉丝数量已经突破 1000 了,它是我的三个博客平台掘金.博客园.SegmentFault中首个粉丝突破 1000 的,于是设计开发这个页面, ...

  8. Three.js开发指南---使用three.js里的各种光源（第三章）

    本章的主要内容 1 three.js有哪些可用的光源 2 什么时候用什么光源. 3 如何调整配置各种光源 4 如何创建镜头炫光 一 光源 光源大概有7种, 其中基础光源有4种 环境光(AmbientL ...

  9. 使用 Babylon.js 在 HTML 页面加载 3D 对象

    五一 Windwos Blogs 推了一篇博客, Babylon.js v3.2 发布了.因为一直有想要在自己博客上加载 3D 对象的冲动,这两天正好看到了,就动手研究研究.本人之前也并没有接触过 W ...

随机推荐

  1. POJ 1470 Closest Common Ancestors【近期公共祖先LCA】

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/u013912596/article/details/35311489 题目链接:http://poj ...

  2. 004-搭建框架-实现AOP机制【一】代理技术

    前景提要 监控方法性能.执行时间.记录日志等 AOP( Aspect Oriented Programming)面向方面编程. 在AOP中,需要定义一个Aspect(切面)类来编写需要横切业务的逻辑代 ...

  3. Django工作小笔记

    场景一:如果model中字段用CharField,然而你想用数字(类似IntegerField)排序,此时可以用django的extra函数直接调用原生sql的CAST函数即可 Score.objec ...

  4. 【zabbix】zabbix忘记密码，重置密码

    忘记密码这种事经常会发生,这里我们介绍一种zabbix忘记用户密码的处理方式. 原理: zabbix存储在数据库中用户名密码是经过32位,小写,md5加密过的.我们可以手动修改数据库中用户的密码. 实 ...

  5. [不常用] - CSRF（跨站点请求伪造）

    CSRF,Cross Site Request Forgery,即跨站点请求伪造.   这种攻击是指,在用户正常登录系统以后,攻击者诱使用户访问一些非法链接,以执行一些非法操作. 比如:如果删除用户操 ...

  6. css position absolute 浮动特性

    absolute的元素不会占据未浮动的元素的空间<html> <head> <style type="text/css"> .flipbox{ ...

  7. Kattis - sortofsorting 【排序】

    题意 给出一系列字符串,然后要排序 排序规则 只按前两位按字典序来排序,如果前两位完全一样,则按输入的顺序来排 思路 要用 冒泡排序 不能用STL里面的 SORT 因为它不稳定 AC代码 #inclu ...

  8. iOS 9 的新功能 universal links

    什么是 universal links: (通用链接) 一种能够方便的通过传统 HTTP 链接来启动 APP, 使用相同的网址打开web page和 APP的方式. 第一点,链接打开网址 顾名思义 第 ...

  9. http,soap and rest

    http://www.cnblogs.com/hyhnet/archive/2016/06/28/5624422.html http://www.cnblogs.com/bellkosmos/p/52 ...

  10. ReactNative学习一

    ReactNative   主要学习来源于RN官方文档https://reactnative.cn/docs/0.51/getting-started.html 不过除了这个RN官方文档,其他RN中文 ...