Three.js 를 이용 하여 그림자 효과 인 스 턴 스 코드 를 어떻게 실현 합 니까?

5987 단어 three.js음영 효과
머리말
모두 가 알다 시 피 웹 gl 의 플러그 인 으로서 three.js 는 원생 웹 gl 처럼 음영 을 추가 하 는 것 이 이렇게 힘 들 지 않 을 것 이다.그래서 한 시간의 연 구 를 거 쳤 다.마침내 음영 효 과 를 만 들 었 고 실수 하기 쉬 운 부분도 발견 했다.더 이상 할 말 이 없 으 니 상세 한 소 개 를 해 봅 시다.
선행 효과 도:

이 효 과 를 실현 하 는 것 은 사실 매우 간단 하 다.몇 개의 속성 만 설정 하면 현재 의 효 과 를 실현 할 수 있다.위의 재질 문 제 는 다음 절 에 놓 겠 습 니 다.
(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 를 배우 거나 사용 하 는 데 어느 정도 참고 학습 가치 가 있 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 댓 글 을 남 겨 주 셔 서 저희 에 대한 지지 에 감 사 드 립 니 다.
Three.js 는 dat.GUI 를 이용 하여 시험 절 차 를 어떻게 간소화 하 는 지 상세 하 게 설명 합 니 다.
Bootstrap 은 사용 하기 좋 은 전단 프레임 입 니 다.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage