WebGL中three.js怎么實現(xiàn)物體的陰影動畫效果-創(chuàng)新互聯(lián)

小編給大家分享一下WebGL中three.js怎么實現(xiàn)物體的陰影動畫效果，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)建站2013年開創(chuàng)至今，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項目成都做網(wǎng)站、成都網(wǎng)站制作網(wǎng)站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元斗門做網(wǎng)站,已為上家服務(wù),為斗門各地企業(yè)和個人服務(wù),聯(lián)系電話:028-86922220

實現(xiàn)物體的旋轉(zhuǎn)、跳動以及場景陰影的開啟與優(yōu)化

本程序?qū)?chuàng)建一個場景，并實現(xiàn)物體的動畫效果

 運行的結(jié)果如圖：

WebGL中three.js怎么實現(xiàn)物體的陰影動畫效果

運行結(jié)果

 完整代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Three.js</title>
 <script src="../../../Import/three.js"></script>
 <script src="../../../Import/stats.js"></script>
 <script src="../../../Import/Setting.js"></script>
 <script src="../../../Import/OrbitControls.js"></script>
 <script src="../../../Import/dat.gui.min.js"></script>
 <style type="text/css">
 div#canvas-frame {
 border: none;
 cursor: pointer;
 width: 100%;
 height: 850px;
 background-color: #333333;
 }
 </style>
</head>
<body onload="threeStart()">
<div id="canvas-frame"></div>
<script>
 //控制面板中需要的兩個數(shù)據(jù)
 let control = new function () {
 this.rotationSpeed = 0.01;
 this.jumpSpeed = 0.03;
 };
 let renderer, camera, scene;
 let controller;
 let width,height;

 //初始化渲染器
 function initThree() {
 width = document.getElementById('canvas-frame').clientWidth;
 height = document.getElementById('canvas-frame').clientHeight;
 renderer = new THREE.WebGLRenderer({
 antialias: true
 });//定義渲染器
 renderer.setSize(width, height);//設(shè)置渲染的寬度和高度
 document.getElementById("canvas-frame").appendChild(renderer.domElement);//將渲染器加在html中的div里面
 renderer.setClearColor(0x333333, 1.0);//渲染的顏色設(shè)置
 renderer.shadowMapEnabled = true;//開啟陰影，默認是關(guān)閉的，太影響性能
 renderer.shadowMapType = THREE.PCFSoftShadowMap;//陰影的一個類型，可以不設(shè)置對比看效果
 }
 //初始化攝像機
 function initCamera() {
 camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);//perspective是透視攝像機，這種攝像機看上去畫面有3D效果

 //攝像機的位置
 camera.position.x = 50;
 camera.position.y = 50;
 camera.position.z = 50;
 camera.up.x = 0;
 camera.up.y = 1;//攝像機的上方向是Y軸
 camera.up.z = 0;
 camera.lookAt(0, 0, 0);//攝像機對焦的位置
 //這三個參數(shù)共同作用才能決定畫面
 }
 //初始化場景
 function initScene() {
 scene = new THREE.Scene();
 }
 //攝像機的控制，可以采用鼠標拖動來控制視野
 function cameraControl() {
 controller = new THREE.OrbitControls(camera, renderer.domElement);
 controller.target = new THREE.Vector3(0, 0, 0);
 }
 //一個很方便的控制面板，方便更改程序的參數(shù)
 function datGUI() {
 let gui = new dat.GUI();
 //可以設(shè)置可以調(diào)動的范圍
 gui.add(control, "rotationSpeed", 0, 0.05);
 gui.add(control, "jumpSpeed", 0, 0.08);
 }
 //初始化燈光
 function initLight() {
 let light = new THREE.SpotLight(0xffffff, 1.0, 0);//點光源
 light.position.set(-40, 60, -10);
 light.castShadow = true;//開啟陰影
 light.shadowMapWidth = 8192;//陰影的分辨率
 light.shadowMapHeight = 8192;
 scene.add(light);
 light = new THREE.AmbientLight(0xffffff, 0.2);//環(huán)境光，如果不加，點光源照不到的地方就完全是黑色的
 scene.add(light);
 }

 let cube;
 let sphere;

 //初始化物體
 function initObject() {
 //定義了一個地面
 let planeGeometry = new THREE.PlaneGeometry(100, 100, 1, 1);
 let planeMaterial = new THREE.MeshLambertMaterial({
 color: 0xcccccc,
 });
 let plane = new THREE.Mesh(planeGeometry, planeMaterial);
 plane.rotation.x = -0.5 * Math.PI;
 plane.position.x = 15;
 plane.receiveShadow = true;//開啟地面的接收陰影
 scene.add(plane);//添加到場景中

 //定義了一個方塊
 let cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
 let cubeMaterial = new THREE.MeshLambertMaterial({
 color: 0xff1111,
 });
 cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
 cube.position.x = -4;
 cube.position.y = 3;
 cube.position.z = 0;
 cube.castShadow = true;//開啟陰影
 scene.add(cube);

 //定義了一個球體
 let sphereGeometry = new THREE.SphereGeometry(4, 100, 100);
 let sphereMaterial = new THREE.MeshLambertMaterial({
 color: 0xba7890,
 });
 sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
 sphere.position.x = 20;
 sphere.position.y = 4;
 sphere.position.z = 2;
 sphere.castShadow = true;//開啟陰影
 scene.add(sphere);
 }
 //方塊的自動旋轉(zhuǎn)
 function cubeRotation() {
 cube.rotation.x += control.rotationSpeed;
 cube.rotation.y += control.rotationSpeed;
 cube.rotation.z += control.rotationSpeed;
 }

 let step = 0;
 //球體的拋物線運動軌跡
 function boxJump() {
 step += control.jumpSpeed;
 sphere.position.x = 20 + 10 * (Math.cos(step));
 sphere.position.y = 4 + 10 * (Math.abs(Math.sin(step)));
 }
 //定義的一個功能文件
 function initSetting() {
 loadAutoScreen(camera,renderer);
 loadFullScreen();
 loadStats();
 }
 //主函數(shù)
 function threeStart() {
 initThree();
 initCamera();
 initScene();
 initLight();
 initObject();
 cameraControl();
 datGUI();
 initSetting();
 animation();
 }
 //動畫
 function animation() {
 cubeRotation();//方塊旋轉(zhuǎn)函數(shù)
 boxJump();//球體運動函數(shù)
 stats.update();//更新性能檢測器

 renderer.clear();
 renderer.render(scene, camera);//開始渲染

 requestAnimationFrame(animation);//重復(fù)執(zhí)行此函數(shù)，不停的渲染，達到動畫的效果
 }
</script>
</body>
</html>

其中OrbitControls.js和dat.gui.min.js這兩個文件都是Three.js自帶的兩個很好用的工具，第一個是可以讓攝像機有軌道地進行移動，而不用再自己寫函數(shù)去實現(xiàn)，第二個是一個輕量級的圖形用戶界面庫（GUI 組件），使用這個庫可以很容易地創(chuàng)建出能夠改變代碼變量的界面組件，方便我們測試程序。

另外如果想要在程序中開啟陰影的話首先需要把renderer.shadowMapEnabled設(shè)置為true，默認是關(guān)閉的，因為實現(xiàn)陰影的效果是比較消耗性能的。同時要把light的投擲陰影開啟light.castShadow = true，但是并不是所有的燈光都可以開啟，比如環(huán)境光就不可以。每一個需要產(chǎn)生陰影的物體也要開啟陰影，我們需要用地面來接收陰影，所以也需要開啟地面的接收

WebGL中three.js怎么實現(xiàn)物體的陰影動畫效果

plane.receiveShadow = true；
cube.castShadow = true;
 sphere.castShadow = true;

現(xiàn)在的效果是這樣的：

WebGL中three.js怎么實現(xiàn)物體的陰影動畫效果

 可以看到，陰影是比較難看的，所以設(shè)置一些陰影的類型，PCFSoftShadowMap能讓邊緣柔和，但只是基于像素顆粒的邊緣柔和。我們可以先使用此類型，然后再提高陰影的分辨率

light.shadowMapWidth = 8192;
 light.shadowMapHeight = 8192;

默認的值應(yīng)該是1024。

 此時的陰影效果是這樣的

優(yōu)化后陰影

 至此，我們的場景還有物體的動畫效果就已經(jīng)實現(xiàn)。

以上是“WebGL中three.js怎么實現(xiàn)物體的陰影動畫效果”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

文章標題：WebGL中three.js怎么實現(xiàn)物體的陰影動畫效果-創(chuàng)新互聯(lián)
分享URL：http://bm7419.com/article24/hcgje.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站排名、手機網(wǎng)站建設(shè)、網(wǎng)站改版、網(wǎng)站營銷、網(wǎng)站制作、ChatGPT

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

小程序開發(fā)