three.js阴影
<!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阴影的更多相关文章
- Three.js 实现3D开放世界小游戏：阿狸的多元宇宙 🦊
声明:本文涉及图文和模型素材仅用于个人学习.研究和欣赏,请勿二次修改.非法传播.转载.出版.商用.及进行其他获利行为. 背景 2545光年之外的开普勒1028星系,有一颗色彩斑斓的宜居星球 ,星际移民 ...
- [js高手之路] html5 canvas系列教程 - 线形渐变,径向渐变与阴影设置
接着上文[js高手之路] html5 canvas系列教程 - 像素操作(反色,黑白,亮度,复古,蒙版,透明)继续. 一.线形渐变 线形渐变指的是一条直线上发生的渐变. 用法: var linear ...
- WebGL three.js学习笔记 阴影与实现物体的动画
实现物体的旋转.跳动以及场景阴影的开启与优化 本程序将创建一个场景,并实现物体的动画效果 运行的结果如图: 完整代码如下: <!DOCTYPE html> <html lang=&q ...
- 【微收藏】FourShadows.js – 时间感知的算法驱动的图标阴影JS库
废话一箩筐,筐筐有心得 不小心养成了一个刷微博的习惯,主要还是关注一些前端人士,学习一些前端方面的知识,看到大家都有一些刷微博的小习惯.有的是转发一下,转发内容来一个标记(MARK).也有评论中标记为 ...
- three.js - 添加材质 灯光 阴影
看下运行效果: 源码解释: <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
- three.js入门系列之光和阴影
初中物理教过我们镜面反射和漫反射,这是由于物体的材质直接导致的. 在three.js中,由于物体的材料不同,对于光源的反应也是不一样的,下面就让我们一探究竟. 一.材料 据Three.js中描述,有两 ...
- 简易DIV垂直居中阴影层笼罩JS实现
$(document).ready(init); function init() { var h = $(window).height(); var w = $(window).width(); /* ...
- JS框架_(JQuery.js)带阴影贴纸标签按钮
百度云盘 传送门 密码:azo6 纯CSS带阴影贴纸标签按钮效果: <!doctype html> <html> <head> <meta charset=& ...
- 002_Three.js 中添加阴影 - [Three.js] - [阴影效果]
在Three.js中设置阴影效果,有多个地方需要设置属性. : package org.cc.foo_008; p ...
- MVC基础知识 – 1.抽象工厂模式
1.调用规则 2.简单工厂 问题:在List.aspx里怎么new一个业务层? 2.1.再在 02SBLL 解决方案里建一个类库 BLL_Tow,也有一个 Users.cs 2.2.建立一个工厂 2. ...
- 发现一php木马代码
<?php ;//无需验证密码! $shellname='hello~地球~猴子星球欢迎你 '; define('myaddress',__FILE__); error_reporting(E_ ...
- Bootstrap简介
接下来的一段时间,想研究一下现有的网页框架,第一个不容错过的就是Bootstrap,Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CS ...
- SQLAlchemy Core插入数据，有好几种方法呢
看是一次插入一条还是多条, 看是数据表名是变量还是常量, 操作还是很灵活的, 主要看哪种顺手顺眼啦. #coding=utf-8 from datetime import datetime from ...
- 【131031】jsp学习实例 (2013-10-31 15:29:28)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><%@ page language= ...
- Oracle备份 还原命令
1.备份命令 exp username/password file=d:/test/test.dmp; 2.还原命令 imp username/password full=y file=d:/test ...