<!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. NodeJS的一些总结

    NodeJS的一些总结 Node 公开宣称的目标是 “旨在提供一种简单的构建可伸缩网络程序的方法”. 当前的服务器程序有什么问题?我们来做个数学题. 在 Java™ 和 PHP 这类语言中,每个连接都 ...

  2. BAPI: TRANSACTION_BEGIN的作用

    大概知道是启动一个新会话, CALL FUNCTION 'TRANSACTION_BEGIN' 业务数据处理, CALL FUNCTION 'TRANSACTION_END' 详细功能不清楚. CLE ...

  3. 剑指offer 面试32题

    面试32题: 题目:从上到下打印二叉树 题:不分行从上到下打印二叉树 解题代码: # -*- coding:utf-8 -*- # class TreeNode: # def __init__(sel ...

  4. OSI参考模型与排错

    OSI参考模型中底层为其上层服务,因此排除网络故障应该也从底层到高层依次排查. 首先检查网络连接是否正常(物理层检查).例如网卡没有接好网线,将会看到带红叉的本地连接,属于物理层故障. 连接好网卡后, ...

  5. CuteEditor.Editor+a+a+c+a+a.a() System.RuntimeType.get_Assembly() 问题解决方法

    问题: Server Error in '/' Application. Attempt by method 'CuteEditor.Editor+a+a+c+a+a.a()' to access m ...

  6. NodeJS应用程序设置为window service-辅助工具(C#)

    1.修改nssm,去对话框后 2.生成批处理文件,执行 3.将nssm.exe.node.exe放在资源文件里面 附代码 工具

  7. php......留言板

    部门内部留言板 一.语言和环境 实现语言 PHP 二.要求: 本软件是作为部门内员工之间留言及发送消息使用. 系统必须通过口令验证,登录进入.方法是从数据库内取出用户姓名和口令的数据进行校验. 用户管 ...

  8. Loadrunder脚本篇——Run-time Settings之Preferences

    打开Preferences设置对话框,这里提供了对运行时的参数选择设置 Enable Image and Text Check 开启图片和文本检查.允许用户在回放期间通过web_find(文本检测)或 ...

  9. 财经世界（2）A股B股和H股

    在发行过程中,公司通过章程给不同股份形式赋予不同的权益,使公司股份出现A股.B股等形式.我国上市公司的股票有A股.B股.H股.N股.S股等的区分.这一区分的主要依据股票的上市地点和所面对的投资者而定. ...

  10. Python mysql表数据和json格式的相互转换

    功能: 1.Python 脚本将mysql表数据转换成json格式 2.Python 脚本将json数据转成SQL插入数据库 表数据: SQL查询:SELECT id,NAME,LOCAL,mobil ...