利用Three.js如何实现阴影效果实例代码_javascript技巧_脚本之家

前言

众所周知作为webgl的插件,three.js肯定没有原生webgl那样,添加一个阴影这么费劲。所以,经过一小时的研究。终于将阴影效果做了出来,并且还发现一些容易犯错的地方。话不多说了,来一起看看详细的介绍吧。

先上效果图:

实现这个效果其实很简单,只需要设置几个属性就可以实现当前的效果。而上面的材质问题我将放到下一节:

首先需要告诉渲染器我需要阴影,你给我生成阴影:

renderer.shadowMap.enabled = true; 

然后告诉灯光,我需要阴影:

light.castShadow = true; 

告诉模型哪些需要投射阴影:

//告诉球需要投射阴影 sphere.castShadow = true; //告诉立方体需要投射阴影 cube.castShadow = true; 

最后告诉最底下的平面长方形你要接受阴影:

plane.receiveShadow = true; 

上面四步只要设置好了,就可以实现阴影的效果了。

www.6766.com ,注意事项:你的模型的材质一定要选择对灯光有反应的材质,要不然不会出现效果,就是因为这个问题导致好长时间没有整出来阴影。

案例全部代码:

   Title  html, body { margin: 0; height: 100%; } canvas { display: block; }         var renderer; function initRender() { renderer = new THREE.WebGLRenderer; renderer.setSize(window.innerWidth, window.innerHeight); //告诉渲染器需要阴影效果 renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.PCFSoftShadowMap; // 默认的是,没有设置的这个清晰 THREE.PCFShadowMap document.body.appendChild; } var camera; function initCamera() { camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 1000); camera.position.set; camera.lookAt(new THREE.Vector3; } var scene; function initScene() { scene = new THREE.Scene(); } var light; function initLight() { scene.add(new THREE.AmbientLight; light = new THREE.SpotLight; light.position.set; //告诉平行光需要开启阴影投射 light.castShadow = true; scene.add; } function initModel() { //上面的球 var sphereGeometry = new THREE.SphereGeometry; var sphereMaterial = new THREE.MeshStandardMaterial; var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial); sphere.position.y = 5; //告诉球需要投射阴影 sphere.castShadow = true; scene.add; //辅助工具 var helper = new THREE.AxisHelper; scene.add; //立方体 var cubeGeometry = new THREE.CubeGeometry; var cubeMaterial = new THREE.MeshLambertMaterial; var cube = new THREE.Mesh(cubeGeometry, cubeMaterial); cube.position.x = 25; cube.position.y = 5; cube.position.z = -5; //告诉立方体需要投射阴影 cube.castShadow = true; scene.add; //底部平面 var planeGeometry = new THREE.PlaneGeometry; var planeMaterial = new THREE.MeshStandardMaterial; var plane = new THREE.Mesh(planeGeometry, planeMaterial); plane.rotation.x = - 0.5 * Math.PI; plane.position.y = -0; //告诉底部平面需要接收阴影 plane.receiveShadow = true; scene.add; } //初始化性能插件 var stats; function initStats() { stats = new Stats(); document.body.appendChild; } //用户交互插件 鼠标左键按住旋转,右键按住平移,滚轮缩放 var controls; function initControls() { controls = new THREE.TrackballControls; //旋转速度 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; } function render() { renderer.render; } //窗口变动触发的函数 function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); controls.handleResize; renderer.setSize( window.innerWidth, window.innerHeight ); } function animate; //更新性能插件 stats.update; requestAnimationFrame; } function draw; initScene; initLight; initControls; animate(); window.onresize = onWindowResize; }   

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家学习或者使用Three.js具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持。

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图