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 ...

随机推荐

ios 避免两个button同一时候被点击
版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/superchaoxian/article/details/24631293 这个能够通过[btn ...
c# HttpClient获取网页源码
#region 获取网页源码 public static string HttpClientGetHtmls(string url) { try { var client = new HttpClie ...
R语言中abline和lines的区别
函数lines()其作用是在已有图上加线,命令为lines(x,y),其功能相当于plot(x,y,type="1")函数abline()可以在图上加直线,其使用方法有四种格式.( ...
谷歌机器学习速成课程---3降低损失 (Reducing Loss)：学习速率
正如之前所述,梯度矢量具有方向和大小.梯度下降法算法用梯度乘以一个称为学习速率(有时也称为步长)的标量,以确定下一个点的位置.例如,如果梯度大小为 2.5,学习速率为 0.01,则梯度下降法算法会选择 ...
前端 JavaScript&Dom
JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果.通常JavaScript脚本是通过嵌入在HTML中来实现 ...
C51数据类型
【Tech】mac下svn和scp使用笔记
1.命令行从svn下载代码 mac本身自带svn,所以使用非常简单,在本地创建代码存放的文件夹,然后cd到该文件夹下,运行: svn checkout svn://ip地址/文件路径 . 然后出现要求 ...
JVM原理（Java代码编译和执行的整个过程+JVM内存管理及垃圾回收机制）
转载注明出处: http://blog.csdn.net/cutesource/article/details/5904501 JVM工作原理和特点主要是指操作系统装入JVM是通过jdk中Java.e ...
1.python基本数据类型
1.数值类型(4种) 数值类型都是不可变的 1)整型(int) example: a = 0 b = -1 诸如此类,都为整型 2)浮点型(float) example: f = 1.1 f = -1 ...
适配iOS9问题汇总
iOS 9适配过程中出现的问题,收集的链接资料供大家学习分享. http://wiki.mob.com/ios9-对sharesdk的影响(适配ios-9必读)/ http://www.cocoach ...

16-THREE.JS 半球光

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

随机推荐

热门专题