利用Three.js如何实现阴影效果实例代码
前言
众所周知作为webgl的插件，three.js肯定没有原生webgl那样，添加一个阴影这么费劲。所以，经过一小时的研究（笨人不聪明，已经是极限速度了）。终于将阴影效果做了出来，并且还发现一些容易犯错的地方。话不多说了，来一起看看详细的介绍吧。
先上效果图：
实现这个效果其实很简单，只需要设置几个属性就可以实现当前的效果。而上面的材质问题我将放到下一节：
（1）首先需要告诉渲染器我需要阴影，你给我生成阴影：
renderer.shadowMap.enabled = true;
（2）然后告诉灯光，我需要阴影：
light.castShadow = true;
（3）告诉模型哪些需要投射阴影：
//告诉球需要投射阴影
sphere.castShadow = true;
//告诉立方体需要投射阴影
cube.castShadow = true;
（4）最后告诉最底下的平面长方形你要接受阴影：
plane.receiveShadow = true;
上面四步只要设置好了，就可以实现阴影的效果了。
注意事项：你的模型的材质一定要选择对灯光有反应的材质，要不然不会出现效果，就是因为这个问题导致好长时间没有整出来阴影。
案例全部代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
html, body {
margin: 0;
height: 100%;
}
canvas {
display: block;
}
</style>
</head>
<body onload="draw();">
</body>
<script src="build/three.js"></script>
<script src="examples/js/controls/TrackballControls.js"></script>
<script src="examples/js/libs/stats.min.js"></script>
<script>
var renderer;
function initRender() {
renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize(window.innerWidth, window.innerHeight);
//告诉渲染器需要阴影效果
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap; // 默认的是，没有设置的这个清晰 THREE.PCFShadowMap
document.body.appendChild(renderer.domElement);
}
var camera;
function initCamera() {
camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 1000);
camera.position.set(0, 40, 100);
camera.lookAt(new THREE.Vector3(0,0,0));
}
var scene;
function initScene() {
scene = new THREE.Scene();
}
var light;
function initLight() {
scene.add(new THREE.AmbientLight(0x444444));
light = new THREE.SpotLight(0xffffff);
light.position.set(60,30,0);
//告诉平行光需要开启阴影投射
light.castShadow = true;
scene.add(light);
}
function initModel() {
//上面的球
var sphereGeometry = new THREE.SphereGeometry(5,20,20);
var sphereMaterial = new THREE.MeshStandardMaterial({color:0x7777ff});
var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
sphere.position.y = 5;
//告诉球需要投射阴影
sphere.castShadow = true;
scene.add(sphere);
//辅助工具
var helper = new THREE.AxisHelper(10);
scene.add(helper);
//立方体
var cubeGeometry = new THREE.CubeGeometry(10,10,8);
var cubeMaterial = new THREE.MeshLambertMaterial({color:0x00ffff});
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.position.x = 25;
cube.position.y = 5;
cube.position.z = -5;
//告诉立方体需要投射阴影
cube.castShadow = true;
scene.add(cube);
//底部平面
var planeGeometry = new THREE.PlaneGeometry(100,100);
var planeMaterial = new THREE.MeshStandardMaterial({color:0xaaaaaa});
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.rotation.x = - 0.5 * Math.PI;
plane.position.y = -0;
//告诉底部平面需要接收阴影
plane.receiveShadow = true;
scene.add(plane);
}
//初始化性能插件
var stats;
function initStats() {
stats = new Stats();
document.body.appendChild(stats.dom);
}
//用户交互插件 鼠标左键按住旋转，右键按住平移，滚轮缩放
var controls;
function initControls() {
controls = new THREE.TrackballControls( camera );
//旋转速度
controls.rotateSpeed = 5;
//变焦速度
controls.zoomSpeed = 3;
//平移速度
controls.panSpeed = 0.8;
//是否不变焦
controls.noZoom = false;
//是否不平移
controls.noPan = false;
//是否开启移动惯性
controls.staticMoving = false;
//动态阻尼系数 就是灵敏度
controls.dynamicDampingFactor = 0.3;
//未知，占时先保留
//controls.keys = [ 65, 83, 68 ];
controls.addEventListener( 'change', render );
}
function render() {
renderer.render( scene, camera );
}
//窗口变动触发的函数
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
controls.handleResize();
render();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
//更新控制器
render();
//更新性能插件
stats.update();
controls.update();
requestAnimationFrame(animate);
}
function draw() {
initRender();
initScene();
initCamera();
initLight();
initModel();
initControls();
initStats();
animate();
window.onresize = onWindowResize;
}
</script>
</html>
总结
Three.js利用Detector.js插件如何实现兼容性检测详解
前言本文主要给大家介绍了关于Three.js用Detector.js插件实现兼容性检测的相关内容，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍吧。其实Detector.js插件的代码很短，但是功能很全，（1）判断canvas兼容。（2）判断webgl兼容性。（3）在页面添加不兼容提示信息。这三个功能已经对兼容...
小白请教一下大神们 怎么用three.js加载obj模型
<!DOCTYPE html> var scene = null;var camera = null;var renderer = null;var mesh = null;var id = null;function init() { renderer = new THREE.WebGLRenderer({\/\/渲染器 canvas: document.getElementById('mainCanvas')\/\/画布 });renderer.setClearColor(0x000000);\/\/画布颜色...
如何用three.js 加载js模型
为了帮助网友解决“如何用Three.js 加载js模型”相关的问题，中国学网通过互联网对“如何用Three.js 加载js模型”相关的解决方案进行了整理,用户详细问题包括:\/.PerspectiveCamera( 75.Scene(); soft white light scene: true } *\/.load( " var texture = new THREE.position;scene, materials ){ \/...
Three.js 实现VR看房
准备工作：1、three.js https:\/\/threejs.org\/build\/three.js 2、搭建项目环境 我使用的live-server 3、720°全景图 目录结构 mian.js ; (function () { \/\/ 在THREEjs中，渲染一个3d世界的必要因素是场景（scene）、相机（camera）、渲染器（renderer）。渲染出一个3d...
three.js 给模型添加标注
1. 需要有一个被选择的mesh,通过raycaster获取 2. 创建先和一个平面 3. 将线和标注的面放在获取的mesh上 var mouse =new THREE.Vector2();var raycaster =new THREE.Raycaster();mouse.x = (event.clientX \/ domElement.width) *2 -1;mouse.y = -(event.clientY \/ domElement.height) *2...
如何用Three.js 加载js模型
var jsonLoader = new THREE.JSONLoader();jsonLoader.load( "models\/orange.js", addModelToScene );function addModelToScene( geometry, materials ){ \/\/ geometry = new THREE.CubeGeometry(100,100,100);\/\/ var texture = new THREE.ImageUtils.loadTexture('images\/checkerboard.jpg');\/\/...
关于使用three.js将3D模型转换成图片方法
在使用three.js加载3D模型之后，项目中遇到一个问题：需要将3D模型旋转之后的位姿转换成图片并保存下来，尝试了两种方法：问题：由于canvas中加载的是3D模型，导致转换出来的图片一片漆黑，方法失败 经过尝试之后，成功将模型转换成图片（base64编码图片）方法如下：转换之后，imgData为base64编码的图片，可以...
一、THREEJS 使用入门
2、官方使用案例 https:\/\/threejs.org\/examples\/ ，可以直接套用。以 https:\/\/github.com\/mrdoob\/three.js\/blob\/master\/examples\/webgl_materials.html 为例，讲解如何使用Threejs构建自己的应用：步骤一、新建html页面。3、如何在vue中引入THREEJS 步骤一、新建threejs 组件，ZeusStage.vue 步骤二...
threejs怎么加入相机控制
threejs怎么加入相机控制 !DOCTYPE html html lang="en" head meta charset="UTF-8" title手动旋转相机\/title script type="text\/javascript" src="..\/libs\/three.js"\/script script type="text\/javascript" src="..\/libs\/jquery-1.9.0.js"\/script \/head body div id="container"\/div script type="text...
WebGL初探—Three.js全景图实战
three.js中主要由摄像机 ，场景 ，渲染器 , 资源加载器，素材组成 webgl中的所有东西都是基于摄像机去展示的，可以利用摄像头的视角形成对3d视图观测视角，比如鱼眼视角，从而就让我们可以在平面图上可以开发出真实场景的3D视图。接下来我们看看怎么用three.js创建一个摄像机：摄像机有了但是...
锺怨甲硝： filter : progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color=＂#cccccc＂); /*力度,角度,颜色 */ 兼容IE用滤镜.JS也得用滤镜
水富县15918142610： 各位大虾,请问如何用Java实现阴影效果 0 - ？
锺怨甲硝： JS实现阴影是这个 括号后面是括号内可以填写的参数 box-shadow:(inset内阴影)水平偏移量 垂直偏移量 羽化范围 阴影增加面积 颜色
水富县15918142610： 怎么让图片下方有阴影效果?可以用JS实现吗?还是用张图片代替阴影 - ？
锺怨甲硝： css的滤镜可以解决,你搜一下具体方法
水富县15918142610： CSS3阴影效果 - ？
锺怨甲硝： text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果.随着html5和CSS3的普及,这一特殊效果使用越来越普遍. 基本语法是{box-shadow:[inset] x-offset y-offset blur-radius spread-radiuscolor} 对象选择器 {box-shadow...
水富县15918142610： 如何利用CSS设置文字的阴影效果 - ？
锺怨甲硝： 可以看下php中文网的资料<!DOCTYPE html><html><head> <meta charset=＂utf-8＂> <title>php中文网(php.cn)</title> <style> h1 { text-shadow: 5px 5px 5px #FF0000; } </style></head><body><h1>文本阴影效果!</h1></body></html>上面有段实例代码,你看下,希望对你有帮助!
水富县15918142610： 如何实现窗口阴影效果 - ？
锺怨甲硝： 前言:当我们阴影事很多地方都必不可少的,因为这是生活中经常出现的事物,所以有阴影效果的事物看起来会比较自然,而且阴影的产生还会让事物有立体感,甚至出现悬空的特殊效果,下面我们就来绘制一个阴影的边框 方法步骤如下: 1、...
水富县15918142610： 基于three.js的3d引擎怎么做 - ？
锺怨甲硝： threejs本身就是3D引擎,最核心的几套算法都已经实现了(向量,矩阵建模等) 如果你要再在threejs之上做一些工作,我个人认为应该是这几个方面 首先是场景生产器,需要对模型的加载进行优化,例如场景的依赖加载,近景优先加载,远景采用模糊的建模节省资源,等完全加载之后再展示,具体你可以看看低网速一些3D游戏的做法,自适应分辨率等等等,通过算法压缩模型构建的三维点坐标等 然后就是抗锯齿算法,碰撞算法等,另外还有内存优化等(c++必做的工作,案例就是暴雪经典的HASH算法等) 然后就是材质的集成和优化,例如一些光照特效等
水富县15918142610： css 怎么制作有阴影的div或者li - ？
锺怨甲硝： 实现阴影我知道的只有两种,一种直接用图片,另一种用的是css3.建议你去这里学习一下看看能不能实现你想要的效果
水富县15918142610： three.js怎么设置半透明效果 - ？
锺怨甲硝： 设置alpha 代码 View v = findViewById(R.id.content);//找到你要设透明背景的layout 的id v.getBackground().setAlpha(100);//透明度值
水富县15918142610： 如何使点的three.js 2D图形 - ？
锺怨甲硝： 演示实验场景效果 下面的演示将会向你展示使用Three.js库和WebGL渲染出的场景效果.也许它也可以通过WebGL直接实现该效果,但是如果加上Three.js库的帮助,将会使得开发变得更加简单.1. Nucleal Nucleal 是一个搭载Three.js实现的WebGL实验,它能够将图片分解成成千上万的物理颗粒.你可以选择多种图片的颗粒组合效果,包括速度和效果.动画的实现非常平滑自然令人印象深刻.2. Lights 光照效果 Lights 光照效果实现了一个惊人的视觉体验,它由Three.js所驱动,它搭配了多种颜色丰富的形状,这是一道光,它穿过一个充满五颜六色形状的空间,效果非常震撼,建议带上耳机效果会更好.
