如何使用Three.js实现阴影效果的示例代码
众所周知，作为webgl的插件，three.js肯定没有原生webgl加个阴影那么费力。于是，经过一个小时的研究(笨人不聪明，已经是极限速度了)。最后做了阴影效果，发现了一些错误。话不多说，我们来看看详细介绍。
首先是效果图:
要达到这个效果其实很简单。您只需要设置几个属性就可以达到当前的效果。而上述材料问题我将放在下一节:
(1)首先你需要告诉渲染器我需要一个阴影，你为我生成一个阴影:
renderer . shadow map . enabled = true；
(2)然后告诉光我需要阴影:
light.castShadow = true
(3)告诉模型哪些需要投射阴影:
//告诉球投个影。
sphere.castShadow = true
//告诉立方体投射阴影。
cube.castShadow = true
(4)最后，告诉底部平面矩形你要接受阴影:
plane.receiveShadow = true
只要设置好以上四个步骤，就可以实现阴影效果。
注意:你的模型的材质必须是对光照有反应的材质，否则无效，因为这个问题已经很久没有造成整个阴影了。
案例完整代码:
& lt！DOCTYPE html & gt
& lthtml lang = " en " & gt
& lthead & gt
& ltmeta charset="UTF-8 " >
& lttitle & gtTitle & lt/title & gt；
& ltstyle type="text/css " >
html，正文{
边距:0；
身高:100%；
}
画布{
显示:块；
}
& lt/style & gt；
& lt/head & gt；
& ltbody onload = " draw()；"& gt
& lt/body & gt；
& ltscript src = " build/three . js " & gt；& lt/script & gt；
& ltscript src = " examples/js/controls/trackball controls . js " & gt；& lt/script & gt；
& ltscript src = " examples/js/libs/stats . min . js " & gt；& lt/script & gt；
& lt脚本& gt
var渲染器；
函数initRender() {
渲染器=新三。WebGLRenderer({ antialias:true })；
renderer . setsize(window . inner width，window . inner height)；
//告诉渲染器需要一个阴影效果。
renderer . shadow map . enabled = true；
renderer.shadowMap.type = THREE。PCFSoftShadowMap//默认情况下，此处清除三个。未设置PCFShadowMap。
document . body . appendchild(renderer . DOM element)；
}
var相机；
函数initCamera() {
相机=新三。透视相机(45，window.innerWidth/window.innerHeight, 0.1，1000)；
camera.position.set(0，40，100)；
camera.lookAt(新三。向量3(0，0，0))；
}
var场景；
函数initScene() {
场景=新三。场景()；
}
var光；
函数initLight() {
scene.add(新三。AmbientLight(0x444444))。
光=新三。聚光灯(0x ffffff)；
light.position.set(60，30，0)；
//告诉平行光打开阴影投射。
light.castShadow = true
scene.add(灯光)；
}
函数initModel() {
//上面的球
var球面几何=新三。球面几何(5，20，20)；
var sphereMaterial =新三。mesh standard material({ color:0x 7777 ff })；
var球面=新三。网格(球形测量，球形材料)；
sphere . position . y = 5；
//告诉球投出阴影。
sphere.castShadow = true
scene.add(球体)；
//辅助工具
var helper =新三。axis helper(10)；
scene . add(helper)；
//立方体
var cubeGeometry = new THREE。立方体几何(10，10，8)；
var cubeMaterial = new THREE。MeshLambertMaterial({ color:0x 00ffff })；
var cube =新三。网格(立方体几何，立方体材料)；
cube . position . x = 25；
cube . position . y = 5；
cube . position . z =-5；
//告诉立方体投射阴影。
cube.castShadow = true
scene.add(立方体)；
//底部平面
var planeGeometry = new THREE。平面几何(100，100)；
var planeMaterial = new THREE。mesh standard material({ color:0x aaaaaa })；
var平面=新三。网格(平面几何，平面材料)；
plane.rotation.x = - 0.5 * Math。PI；
plane . position . y =-0；
//告诉底层平面它需要接收阴影。
plane.receiveShadow = true
scene.add(平面)；
}
//初始化性能插件
var统计；
函数initStats() {
Stats = new Stats()；
document . body . appendchild(stats . DOM)；
}
//用户交互插件:按住鼠标左键旋转，按住鼠标右键平移，滚轮缩放。
风险值控制。
函数initControls() {
控制=新的三个。轨迹球控制(摄像机)；
//旋转速度
controls . rotatespeed = 5；
//缩放速度
controls . zoom speed = 3；
//翻译速度
controls.panSpeed = 0.8
//不缩放？
controls.noZoom = false
//不泛？
controls.noPan = false
//是否开启移动惯性？
controls.staticMoving = false
//动态阻尼系数就是灵敏度。
controls . dynamicdampingfactor = 0.3；
//未知，需要的时候留着。
//controls.keys = [ 65，83，68]；
controls . addevent listener(' change '，render)；
}
函数render() {
renderer.render(场景、相机)；
}
//窗口变化触发的函数
函数onWindowResize() {
camera . aspect = window . inner width/window . inner height；
camera . updateprojectionmatrix()；
controls . handle resize()；
render()；
renderer . setsize(window . inner width，window . inner height)；
}
函数animate() {
//更新控制器
render()；
//更新性能插件
stats . update()；
controls . update()；
requestAnimationFrame(animate)；
}
函数draw() {
init render()；
init scene()；
init camera()；
init light()；
init model()；
init controls()；
init stats()；
animate()；
window . on resize = onWindowResize；
}
& lt/script & gt；
& lt/html & gt；
摘要