当前位置：
凯发ag旗舰厅登录网址下载 >
编程资源
> 编程问答
>内容正文
编程问答
96 three.js 使用cubecamera相机创建反光效果 -凯发ag旗舰厅登录网址下载
凯发ag旗舰厅登录网址下载
收集整理的这篇文章主要介绍了
96 three.js 使用cubecamera相机创建反光效果
小编觉得挺不错的,现在分享给大家,帮大家做个参考.
案例查看地址：http://www.wjceo.com/blog/threejs/2018-05-03/159.html
通过案例可以看到，中间的球体不但可以和上一节一样看到环境贴图的相关纹理，连两边的模型都实现了反光的效果。这主要得益于cubecamera的强大功能。
使用three.cubecamera可以为场景中的所要渲染的物体创建快照，并使用这些快照创建cubemap对象。但是需要确保摄像机放置在three.mesh你所想显示反射的位置上。
- 首先，创建一个cubecamera：
- 我们创建场景内所需要的内容，给scene添加背景，创建球体和球体旁边的两个模型，并给球体的环境贴图赋值cubecamera的纹理：
- 最后在render回调函数内更新获取纹理：
注意，贴图的模型最好和相机的位置相同，这样获取到的贴图的效果最有代入感。
<html lang="en"> <head><meta charset="utf-8"><title>threejs使用cubecamera创建反光效果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）//近 - 近裁剪距离。//远 - 裁剪距离//cuberesolution - 设置立方体边缘的长度。//可以通过rendertarget对象获取生成的立方体纹理。//创建一个获取环境贴图的cubecameracubecamera = new three.cubecamera(0.1, 1000, 256);scene.add(cubecamera);}function initscene() {//给场景添加天空盒子纹理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简化试验流程function initgui() {//声明一个保存需求修改的相关数据的对象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();//将设置属性添加到gui当中，gui.add(对象，属性，最小值，最大值）}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);//设置控制器的中心点//controls.target.set( 0, 5, 0 );// 如果使用animate方法时，将此函数删除//controls.addeventlistener( 'change', render );// 使动画循环使用时阻尼或自转 意思是否有惯性controls.enabledamping = true;//动态阻尼系数 就是鼠标拖拽旋转灵敏度//controls.dampingfactor = 0.25;//是否可以缩放controls.enablezoom = true;//是否自动旋转controls.autorotate = false;controls.autorotatespeed = 0.5;//设置相机距离原点的最远距离controls.mindistance = 1;//设置相机距离原点的最远距离controls.maxdistance = 2000;//是否开启右键拖拽controls.enablepan = true;}function render() {//首先更新cubecamera的相机cubecamera.update( renderer, scene );//让旁边的两个模型自动旋转cubemesh.rotation.x = 0.01;cubemesh.rotation.y = 0.01;torusmesh.rotation.x = 0.01;torusmesh.rotation.y = 0.01;}//窗口变动触发的函数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>总结
以上是凯发ag旗舰厅登录网址下载为你收集整理的96 three.js 使用cubecamera相机创建反光效果的全部内容，希望文章能够帮你解决所遇到的问题。
如果觉得凯发ag旗舰厅登录网址下载网站内容还不错，欢迎将凯发ag旗舰厅登录网址下载推荐给好友。
- 上一篇：
- 下一篇：