當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

96 Three.js 使用cubeCamera相机创建反光效果

發(fā)布時(shí)間：2024/1/18 编程问答 40 豆豆

生活随笔收集整理的這篇文章主要介紹了 96 Three.js 使用cubeCamera相机创建反光效果小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

案例查看地址：http://www.wjceo.com/blog/threejs/2018-05-03/159.html

通過案例可以看到，中間的球體不但可以和上一節(jié)一樣看到環(huán)境貼圖的相關(guān)紋理，連兩邊的模型都實(shí)現(xiàn)了反光的效果。這主要得益于cubeCamera的強(qiáng)大功能。

簡(jiǎn)介

使用THREE.CubeCamera可以為場(chǎng)景中的所要渲染的物體創(chuàng)建快照，并使用這些快照創(chuàng)建CubeMap對(duì)象。但是需要確保攝像機(jī)放置在THREE.Mesh你所想顯示反射的位置上。

案例實(shí)現(xiàn)

首先，創(chuàng)建一個(gè)cubeCamera：

//CubeCamera（near：Number，far：Number，cubeResolution：Number） //近 - 近裁剪距離。 //遠(yuǎn) - 裁剪距離 //cubeResolution - 設(shè)置立方體邊緣的長(zhǎng)度。//可以通過renderTarget對(duì)象獲取生成的立方體紋理。 //創(chuàng)建一個(gè)獲取環(huán)境貼圖的cubeCamera cubeCamera = new THREE.CubeCamera(0.1, 1000, 256); scene.add(cubeCamera);

我們創(chuàng)建場(chǎng)景內(nèi)所需要的內(nèi)容，給scene添加背景，創(chuàng)建球體和球體旁邊的兩個(gè)模型，并給球體的環(huán)境貼圖賦值cubeCamera的紋理：

//添加中間顯示的球體 var geometry = new THREE.SphereBufferGeometry( 2, 100, 50 );//將cubeCamera的立方體紋理賦值給Material的envMap material = new THREE.MeshBasicMaterial({envMap:cubeCamera.renderTarget.texture });var cubeMaterial = new THREE.MeshPhongMaterial({map:new THREE.TextureLoader().load("/lib/textures/disturb.jpg") });//添加球形 var sphereMesh = new THREE.Mesh( geometry, material ); scene.add( sphereMesh );//添加立方體 cubeMesh = new THREE.Mesh(new THREE.CubeGeometry(2, 2, 2), cubeMaterial); cubeMesh.position.set(-5, 0, 0); scene.add(cubeMesh);//添加甜甜圈 torusMesh = new THREE.Mesh(new THREE.TorusGeometry(2, 1, 16, 100), cubeMaterial); torusMesh.position.set(8, 0, 0); scene.add(torusMesh);

最后在render回調(diào)函數(shù)內(nèi)更新獲取紋理：

cubeCamera.update( renderer, scene );

注意，貼圖的模型最好和相機(jī)的位置相同，這樣獲取到的貼圖的效果最有代入感。

案例代碼

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Threejs使用CubeCamera創(chuàng)建反光效果</title><style type="text/css">html, body {margin: 0;height: 100%;}canvas {display: block;}</style> </head><body onload="draw();"> </body> <script src="https://cdn.bootcss.com/three.js/91/three.min.js"></script> <script src="/lib/js/controls/OrbitControls.js"></script> <script src="https://cdn.bootcss.com/stats.js/r17/Stats.min.js"></script> <script src="https://cdn.bootcss.com/dat-gui/0.7.1/dat.gui.min.js"></script> <script src="/lib/js/Detector.js"></script><script>var renderer, camera, scene, gui, light, stats, controls, material, cubeMesh, torusMesh, cubeCamera;function initRender() {renderer = new THREE.WebGLRenderer({antialias: true});renderer.setPixelRatio(window.devicePixelRatio);renderer.setSize(window.innerWidth, window.innerHeight);renderer.setClearColor(0xeeeeee);renderer.shadowMap.enabled = true;//告訴渲染器需要陰影效果document.body.appendChild(renderer.domElement);}function initCamera() {camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 200);camera.position.set(0, 12, 15 );//CubeCamera（near：Number，far：Number，cubeResolution：Number）//近 - 近裁剪距離。//遠(yuǎn) - 裁剪距離//cubeResolution - 設(shè)置立方體邊緣的長(zhǎng)度。//可以通過renderTarget對(duì)象獲取生成的立方體紋理。//創(chuàng)建一個(gè)獲取環(huán)境貼圖的cubeCameracubeCamera = new THREE.CubeCamera(0.1, 1000, 256);scene.add(cubeCamera);}function initScene() {//給場(chǎng)景添加天空盒子紋理var cubeTextureLoader = new THREE.CubeTextureLoader();cubeTextureLoader.setPath( '/lib/textures/cube/skybox/' );//六張圖片分別是朝前的（posz）、朝后的（negz）、朝上的（posy）、朝下的（negy）、朝右的（posx）和朝左的（negx）。var cubeTexture = cubeTextureLoader.load( ['px.jpg', 'nx.jpg','py.jpg', 'ny.jpg','pz.jpg', 'nz.jpg'] );scene = new THREE.Scene();scene.background = cubeTexture;}//初始化dat.GUI簡(jiǎn)化試驗(yàn)流程function initGui() {//聲明一個(gè)保存需求修改的相關(guān)數(shù)據(jù)的對(duì)象gui = {changeBg:function () {scene.background = new THREE.CubeTextureLoader().setPath( '/lib/textures/cube/pisa/' ).load( [ 'px.png', 'nx.png', 'py.png', 'ny.png', 'pz.png', 'nz.png' ] );sphereMaterial.envMap = scene.background;}};//var datGui = new dat.GUI();//將設(shè)置屬性添加到gui當(dāng)中，gui.add(對(duì)象，屬性，最小值，最大值）}function initLight() {scene.add(new THREE.AmbientLight(0x444444));light = new THREE.DirectionalLight(0xffffff);light.position.set(0, 20, 20 );light.castShadow = true;light.shadow.camera.top = 10;light.shadow.camera.bottom = -10;light.shadow.camera.left = -10;light.shadow.camera.right = 10;//告訴平行光需要開啟陰影投射light.castShadow = true;scene.add(light);}function initModel() {//輔助工具var helper = new THREE.AxesHelper(50);scene.add(helper);//添加中間顯示的球體var geometry = new THREE.SphereBufferGeometry( 2, 100, 50 );//將cubeCamera的立方體紋理賦值給Material的envMapmaterial = new THREE.MeshBasicMaterial({envMap:cubeCamera.renderTarget.texture});var cubeMaterial = new THREE.MeshPhongMaterial({map:new THREE.TextureLoader().load("/lib/textures/disturb.jpg")});//添加球形var sphereMesh = new THREE.Mesh( geometry, material );scene.add( sphereMesh );//添加立方體cubeMesh = new THREE.Mesh(new THREE.CubeGeometry(2, 2, 2), cubeMaterial);cubeMesh.position.set(-5, 0, 0);scene.add(cubeMesh);//添加甜甜圈torusMesh = new THREE.Mesh(new THREE.TorusGeometry(2, 1, 16, 100), cubeMaterial);torusMesh.position.set(8, 0, 0);scene.add(torusMesh);}//初始化性能插件function initStats() {stats = new Stats();document.body.appendChild(stats.dom);}function initControls() {controls = new THREE.OrbitControls(camera, renderer.domElement);//設(shè)置控制器的中心點(diǎn)//controls.target.set( 0, 5, 0 );// 如果使用animate方法時(shí)，將此函數(shù)刪除//controls.addEventListener( 'change', render );// 使動(dòng)畫循環(huán)使用時(shí)阻尼或自轉(zhuǎn) 意思是否有慣性controls.enableDamping = true;//動(dòng)態(tài)阻尼系數(shù) 就是鼠標(biāo)拖拽旋轉(zhuǎn)靈敏度//controls.dampingFactor = 0.25;//是否可以縮放controls.enableZoom = true;//是否自動(dòng)旋轉(zhuǎn)controls.autoRotate = false;controls.autoRotateSpeed = 0.5;//設(shè)置相機(jī)距離原點(diǎn)的最遠(yuǎn)距離controls.minDistance = 1;//設(shè)置相機(jī)距離原點(diǎn)的最遠(yuǎn)距離controls.maxDistance = 2000;//是否開啟右鍵拖拽controls.enablePan = true;}function render() {//首先更新cubeCamera的相機(jī)cubeCamera.update( renderer, scene );//讓旁邊的兩個(gè)模型自動(dòng)旋轉(zhuǎn)cubeMesh.rotation.x += 0.01;cubeMesh.rotation.y += 0.01;torusMesh.rotation.x += 0.01;torusMesh.rotation.y += 0.01;}//窗口變動(dòng)觸發(fā)的函數(shù)function onWindowResize() {camera.aspect = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();renderer.setSize(window.innerWidth, window.innerHeight);}function animate() {//更新控制器render();//更新性能插件stats.update();controls.update();renderer.render(scene, camera);requestAnimationFrame(animate);}function draw() {//兼容性判斷if (!Detector.webgl) Detector.addGetWebGLMessage();initGui();initRender();initScene();initCamera();initLight();initModel();initControls();initStats();animate();window.onresize = onWindowResize;}</script> </html>

總結(jié)

以上是生活随笔為你收集整理的96 Three.js 使用cubeCamera相机创建反光效果的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇：什么是哈希表？为什么要使用哈希表？哈希表
下一篇：安川机器人编辑程序（一）