<!DOCTYPE html>

<html>

<head>

    <title>Example 01.03 - Materials and light</title>

    <script type="text/javascript" src="../libs/three.js"></script>

    <script type="text/javascript" src="../libs/jquery-1.9.0.js"></script>

    <script type="text/javascript" src="../libs/stats.js"></script>

    <script type="text/javascript" src="../libs/dat.gui.js"></script>

    <style>

        body{

            /* set margin to 0 and overflow to hidden, to go fullscreen */

            margin: 0;

            overflow: hidden;

        }

    </style>

</head>

<body>

<!-- Div which will hold the Output -->

<div id="WebGL-output">

</div>

<!-- Javascript code that runs our Three.js examples -->

<script type="text/javascript">

    // once everything is loaded, we run our Three.js stuff.

    $(function () {

        // create a scene, that will hold all our elements such as objects, cameras and lights.

        var scene = new THREE.Scene();

        // create a camera, which defines where we're looking at.

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

        // create a render and set the size

        var renderer = new THREE.WebGLRenderer();

        renderer.setClearColorHex(0xEEEEEE, 1.0);

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

        renderer.shadowMapEnabled = true;//告诉渲染器我们想要阴影。设置shadowMapEnabled（允许阴影映射）的值为true

        // create the ground plane

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

        var planeMaterial =    new THREE.MeshLambertMaterial({color: 0xffffff});//改为受光影响的材质MeshLambertMaterialI

        var plane = new THREE.Mesh(planeGeometry,planeMaterial);

        plane.receiveShadow  = true;//要得到阴影，对这些对象的相应属性设置为true

        // rotate and position the plane

        plane.rotation.x=-0.5*Math.PI;

        plane.position.x=15

        plane.position.y=0

        plane.position.z=0

        // add the plane to the scene

        scene.add(plane);

        // create a cube

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

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

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

        cube.castShadow = true;//将方块的阴影投射到地面上

        // position the cube

        cube.position.x=-4;

        cube.position.y=3;

        cube.position.z=0;

        // add the cube to the scene

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

        // position the sphere

        sphere.position.x=20;

        sphere.position.y=4;

        sphere.position.z=2;

        sphere.castShadow=true;//将球体的阴影投射到地面上

        // add the sphere to the scene

        scene.add(sphere);

        // position and point the camera to the center of the scene

        camera.position.x = -30;

        camera.position.y = 40;

        camera.position.z = 30;

        camera.lookAt(scene.position);

        // add spotlight for the shadows 通过spotlight()函数创建光源

        var spotLight = new THREE.SpotLight( 0xffffff );

        spotLight.position.set( -40, 60, -10 );//SpotLight()方法从它的位置（spotLight.position.set( -40, 60, -10 )）照亮我们的场景

        spotLight.castShadow = true;//要定义哪些光源会产生阴影。使用的SpotLight()可以产生影子。设置正确的属性，阴影最终就会被渲染出来。

        scene.add( spotLight );

        // add the output of the renderer to the html element

        $("#WebGL-output").append(renderer.domElement);

        // call the render function

        renderer.render(scene, camera);

    });

</script>

</body>

</html>

three.js阴影的更多相关文章

  1. Three.js 实现3D开放世界小游戏：阿狸的多元宇宙 🦊

    声明:本文涉及图文和模型素材仅用于个人学习.研究和欣赏,请勿二次修改.非法传播.转载.出版.商用.及进行其他获利行为. 背景 2545光年之外的开普勒1028星系,有一颗色彩斑斓的宜居星球 ,星际移民 ...

  2. [js高手之路] html5 canvas系列教程 - 线形渐变,径向渐变与阴影设置

    接着上文[js高手之路] html5 canvas系列教程 - 像素操作(反色,黑白,亮度,复古,蒙版,透明)继续. 一.线形渐变 线形渐变指的是一条直线上发生的渐变. 用法: var linear ...

  3. WebGL three.js学习笔记 阴影与实现物体的动画

    实现物体的旋转.跳动以及场景阴影的开启与优化 本程序将创建一个场景,并实现物体的动画效果 运行的结果如图: 完整代码如下: <!DOCTYPE html> <html lang=&q ...

  4. 【微收藏】FourShadows.js – 时间感知的算法驱动的图标阴影JS库

    废话一箩筐,筐筐有心得 不小心养成了一个刷微博的习惯,主要还是关注一些前端人士,学习一些前端方面的知识,看到大家都有一些刷微博的小习惯.有的是转发一下,转发内容来一个标记(MARK).也有评论中标记为 ...

  5. three.js - 添加材质 灯光 阴影

    看下运行效果: 源码解释: <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  6. three.js入门系列之光和阴影

    初中物理教过我们镜面反射和漫反射,这是由于物体的材质直接导致的. 在three.js中,由于物体的材料不同,对于光源的反应也是不一样的,下面就让我们一探究竟. 一.材料 据Three.js中描述,有两 ...

  7. 简易DIV垂直居中阴影层笼罩JS实现

    $(document).ready(init); function init() { var h = $(window).height(); var w = $(window).width(); /* ...

  8. JS框架_(JQuery.js)带阴影贴纸标签按钮

    百度云盘 传送门 密码:azo6 纯CSS带阴影贴纸标签按钮效果: <!doctype html> <html> <head> <meta charset=& ...

  9. 002_Three.js 中添加阴影 - [Three.js] - [阴影效果]

    在Three.js中设置阴影效果,有多个地方需要设置属性. ![](https://img2018.cnblogs.com/blog/1735896/201912/1735896-2019123116 ...

随机推荐

  1. XMPP框架下微信项目总结（2）授权登陆/注销/注册/打印日志

    xmpp授权登陆步骤1 初始化xmppstream 连接服务器 传递属性jid(IP地址 端口号)2 连接成功后 传递“登”陆密码授权 3 授权后,发送在线消息xmpp所有的代理都是子线程中调用的,处 ...

  2. CLR via C#（01）-.NET平台下代码是怎么跑起来的

    1. 源代码编译为托管模块 程序在.NET框架下运行,首先要将源代码编译为托管模块.CLR是一个可以被多种语言所使用的运行时,它的很多特性可以用于所有面向它的开发语言.微软开发了多种语言的编译器,编译 ...

  3. 【翻译六】java-连接和实例

    Joins The join method allows one thread to wait for the completion of another. If t is a Thread obje ...

  4. Oracle【IT实验室】数据库备份与恢复之六：LogMiner

    6.1 LogMiner 的用途 Oracle LogMiner 是Oracle公司从产品8i以后提供的一个实际非常有用的分析工具,使用该工具可以轻松获得  Oracle 重作日志文件(归档日志文件) ...

  5. C# 创建Windows Service

    当我们需要一个程序长期运行,但是不需要界面显示时可以考虑使用Windows Service来实现.这篇博客将简单介绍一下如何创建一个Windows Service,安装/卸载Windows Servi ...

  6. Bootstrap看厌了？试试Metro UI CSS吧

    (此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) 题记:Bootstrap作为一款超级流行的前端框架,已经成为很多人的首选,不过有时未免有点审 ...

  7. ARM伪指令,王明学learn

    ARM伪指令 在ARM汇编语言程序中里,有一些特殊指令助记符与指令系统的助记符不同,没有相对应的操作码,通常称这些特殊指令助记符为伪指令,他们所完成的操作称为伪操作.伪指令在元程序中的作用是为完成汇编 ...

  8. Printf()输出格式控制（转）

    int printf(const char *format,[argument]); format 参数输出的格式,定义格式为: %[flags][width][.perc] [F|N|h|l]typ ...

  9. IplImage, CvMat, Mat 的关系

    IplImage, CvMat, Mat 的关系 转载来源:http://www.cnblogs.com/summerRQ/articles/2406109.html opencv中常见的与图像操作有 ...

  10. 湖南省第十二届大学生计算机程序设计竞赛 B 有向无环图 拓扑DP

    1804: 有向无环图 Time Limit: 5 Sec  Memory Limit: 128 MBSubmit: 187  Solved: 80[Submit][Status][Web Board ...