16-THREE.JS 半球光

<!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 半球光的更多相关文章

three.js 源码注释（三十九）Light/HemisphereLight.js 半球光、自然光（天光效果）
/*** * HemisphereLight类是在场景中创建半球光,就是天光效果,经常用在室外,将各个位置的物体都照亮,室内的光线大多是方向性的, * 无论是窗口还是灯槽,用平面光很方便,室外用平面 ...
15-THREE.JS 方向光
<!DOCTYPE html> <html> <head> <title></title> <script src="htt ...
《selenium2 python 自动化测试实战》（16）——js操作补充
js修改readonly属性我们看到这里日期框标签中有readonly属性,如果我们直接send_keys就无法输入内容,这时我们需要先去掉readonly属性: js ='document.get ...
16 (H5*) JS第6天日期、字符串、数组
目录 1:date 2:格式化日期 3:字符串 4:字符串的方法 5:字符串的案例 6:数组的方法 7:包装类型复习正文 1:日期:date <script> //创建实例对象 // ...
three.js光源
在Threejs中,光源用Light表示,它是所有光源的基类.它的构造函数是: THREE.Light ( hex ) 它有一个参数hex,接受一个16进制的颜色值.例如要定义一种红色的光源,我们可以 ...
three.js一个简单demo学些和讲解
叉口裁剪球体案例二话不说先上效果图: 全部代码带注释 <!DOCTYPE html> <html lang="en"> <head> < ...
1000粉！使用Three.js制作一个专属3D奖牌🥇
背景破防了 !突然发现 SegmentFault 平台的粉丝数量已经突破 1000 了,它是我的三个博客平台掘金.博客园.SegmentFault中首个粉丝突破 1000 的,于是设计开发这个页面, ...
Three.js开发指南---使用three.js里的各种光源（第三章）
本章的主要内容 1 three.js有哪些可用的光源 2 什么时候用什么光源. 3 如何调整配置各种光源 4 如何创建镜头炫光一光源光源大概有7种, 其中基础光源有4种环境光(AmbientL ...
使用 Babylon.js 在 HTML 页面加载 3D 对象
五一 Windwos Blogs 推了一篇博客, Babylon.js v3.2 发布了.因为一直有想要在自己博客上加载 3D 对象的冲动,这两天正好看到了,就动手研究研究.本人之前也并没有接触过 W ...

随机推荐

Linux中命令查找顺序
第一优先级:用绝对路径或相对路径执行的命令第二优先级:别名指定的命令第三优先级:Bash内部命令第四优先级:$PATH环境变量定义的目录查找顺序中找到的第一个命令
tensorflow 张量的阶、形状、数据类型及None在tensor中表示的意思。
x = tf.placeholder(tf.float32, [None, 784]) x isn't a specific value. It's a placeholder, a value th ...
mysql-5.7.16-linux-glibc2.5-x86_64精简后的主从配置
1.创建复制账号,并授予复制权限CREATE USER 'fansik'@'10.%' IDENTIFIED BY 'fansik';GRANT REPLICATION SLAVE ON *.* TO ...
hadoop学习第四天-Writable和WritableComparable序列化接口的使用&&MapReduce中传递javaBean的简单例子
一. 为什么javaBean要继承Writable和WritableComparable接口? 1. 如果一个javaBean想要作为MapReduce的key或者value,就一定要实现序列化,因为 ...
玩转pandas
一.pandas概述 pandas :pannel data analysis(面板数据分析).pandas是基于numpy构建的,为时间序列分析提供了很好的支持.pandas中有两个主要的数据结构, ...
Python基础（10）_内置函数、匿名函数、递归
一.内置函数 1.数学运算类 abs:求数值的绝对值 divmod:返回两个数值的商和余数,可用于计算页面数 >>> divmod(5,2) (2, 1) max:返回可迭代对象中的 ...
list列表、tuple元组、range常用方法总结
list 列表(数组),是可迭代对象,列表是可变的所以列表的方法都是在列表本身更改的.里面看可以放各种数据类型的数据,可存储大量数据连接列表可以使用 + 或 extend() a = [1, 3, ...
Spring AOP 学习（一）代理模式
AOP为Aspect Oriented Programming的缩写,意为:面向切面编程(也叫面向方面),可以通过预编译方式和运行期动态代理实现在不修改源代码的情况下给程序动态统一添加功能的一种技术. ...
025_MapReduce样例Hadoop TopKey算法
1.需求说明
20145240《Java程序设计》第一周学习总结
20145240 <Java程序设计>第一周学习总结教材学习内容总结第一周学习Java首先从最基本的下载.配置环境.了解基本人机命令行方式等基础知识,以及编写简单的"Hell ...

16-THREE.JS 半球光

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

随机推荐

热门专题