webGL 投影
Posted 浅唱年华1920
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了webGL 投影相关的知识，希望对你有一定的参考价值。
阴影需要什么？
1.只有支持阴影的灯光才可以
pointLight，spotlight，directionallight
点光源，聚光灯，平行光
2.添加摄像机辅助器 THREE.CameraHelper
var helper = new THREE.CameraHelper(directionalLight.shadow.camera);
scene.add(helper);
3.查看阴影摄像机的相关设置
light.shadow.camera.left //此四项值为阴影投射方向,需要注意，正负值不确定，可以使用dat.gui.js，设置灯光等值，调试查看
light.shadow.camera. right
left为负,bottom为负，其他为正阴影投射在屏幕正前方
right为负，bottom为负阴影投射到屏幕的后方
light.shadow.camera.top
light.shadow.camera.bottom
light.shadow.camera.near //如果看不到阴影，远近截面设置不对，尝试远截面设置大一点
light.shadow.camera.far
4.最后一步需要确认几项设置
renderer.shadowMap.enabled = true; // // 告诉渲染器需要阴影效果
light.castShadow = true; // 灯光开启投影影射
mesh.castShdow = true; // 几何图形生成投影
plane.receiveShaow = true; // 平面接收阴影设置
可以查看这里：
https://www.hangge.com/blog/cache/detail_1812.html
测试案例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> html, body { margin: 0; height: 100%; } canvas { display: block; } </style> </head> <body> </body> <script src="https://johnson2heng.github.io/three.js-demo/lib/three.js"></script> <script> var width = window.innerWidth; var height = window.innerHeight; var scene = new THREE.Scene(); var renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(width, height); // 告诉渲染器需要阴影效果 renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.PCFSoftShadowMap; // 默认的是，没有设置的这个清晰 THREE.PCFShadowMap document.body.appendChild(renderer.domElement); var camera = new THREE.PerspectiveCamera(45, width / window.height, 0.1, 1000); camera.position.set(0, 40, 100); camera.lookAt(new THREE.Vector3(0, 0, 0)); // 环境光 var ambientLight = new THREE.AmbientLight("#111111"); scene.add(ambientLight); var directionalLight = new THREE.DirectionalLight("#ffffff"); directionalLight.position.set(0, 40, 0); // 灯光位置 directionalLight.shadow.camera.near = 20; //产生阴影的最近距离 directionalLight.shadow.camera.far = 200; //产生阴影的最远距离 directionalLight.shadow.camera.left = -50; //产生阴影距离位置的最左边位置 directionalLight.shadow.camera.right = 50; //最右边 directionalLight.shadow.camera.top = 50; //最上边 directionalLight.shadow.camera.bottom = -50; //最下面 //这两个值决定使用多少像素生成阴影 默认512 directionalLight.shadow.mapSize.height = 1024; directionalLight.shadow.mapSize.width = 1024; //告诉平行光需要开启阴影投射 directionalLight.castShadow = true; scene.add(directionalLight); var helper = new THREE.CameraHelper(directionalLight.shadow.camera); scene.add(helper); var geometry3 = new THREE.CylinderGeometry(5, 5, 10, 10); var material3 = new THREE.MeshLambertMaterial({ color: 0xffff00 }); var mesh3 = new THREE.Mesh(geometry3, material3); //网格模型对象Mesh mesh3.position.set(-20, 10, 10);//设置mesh3模型对象的xyz坐标为120,0,0 mesh3.castShadow = true; scene.add(mesh3); //立方体 var cubeGeometry = new THREE.CubeGeometry(10, 10, 10); var cubeMaterial = new THREE.MeshLambertMaterial({ color: 0x00ffff }); var cube = new THREE.Mesh(cubeGeometry, cubeMaterial); cube.position.set(30, 15, 10); cube.castShadow = true;// 告诉立方体需要投射阴影 scene.add(cube); //底部平面 -- 底部背景 var planeGeometry = new THREE.PlaneGeometry(500, 500, 1, 1); var planeMaterial = new THREE.MeshLambertMaterial({ color: 0xf1f1f1 }); var plane = new THREE.Mesh(planeGeometry, planeMaterial); plane.rotation.x = -0.5 * Math.PI; plane.position.y = -0.5 * Math.PI; //告诉底部平面需要接收阴影 plane.receiveShadow = true; scene.add(plane); function render() { renderer.render(scene, camera); mesh3.rotation.x += 0.01; mesh3.rotation.y += 0.01; cube.rotation.x += 0.01; cube.rotation.y += 0.01; requestAnimationFrame(render); } render(); </script> </html>
以上是关于webGL 投影的主要内容，如果未能解决你的问题，请参考以下文章