反光效果"/>
95 Three.js 使用设置envMap环境贴图创建反光效果
案例查看地址：.html
简介
计算环境的反光效果对CPU耗费是非常大，而且通常会使用光线追踪算法。在Three.js中你依然可以实现发光的效果，只不过是做一个假的。我们可以通过将纹理贴图到模型上面来模拟环境纹理反光。
案例实现
- 首先，我们使用
CubeTextureLoader创建一个全景的贴图，并且添加给scene.background:
//给场景添加天空盒子纹理
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;- 然后，我们创建了一个球体，将背景纹理赋值给球体材质的环境纹理
envMap：
//添加中间显示的球体
var geometry = new THREE.SphereBufferGeometry( 5, 100, 50 );
//将纹理的环境纹理设置为scene的背景纹理
sphereMaterial = new THREE.MeshLambertMaterial( { envMap: scene.background } );
sphereMesh = new THREE.Mesh( geometry, sphereMaterial );
scene.add( sphereMesh );这样，看上去就像是球体具有反光的感觉一样。
案例代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Threejs使用环境贴图创建反光效果</title><style type="text/css">html, body {margin: 0;height: 100%;}canvas {display: block;}</style>
</head><body onload="draw();">
</body>
<script src=".js/91/three.min.js"></script>
<script src="/lib/js/utils/ImageUtils.js"></script>
<script src="/lib/js/controls/OrbitControls.js"></script>
<script src=".js/r17/Stats.min.js"></script>
<script src=".7.1/dat.gui.min.js"></script>
<script src="/lib/js/Detector.js"></script><script>var renderer, camera, scene, gui, light, stats, controls, sphereMesh, sphereMaterial;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 );}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(对象，属性，最小值，最大值）datGui.add(gui, "changeBg");}function initLight() {scene.add(new THREE.AmbientLight(0xffffff));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( 5, 100, 50 );//将纹理的环境纹理设置为scene的背景纹理sphereMaterial = new THREE.MeshLambertMaterial( { envMap: scene.background } );sphereMesh = new THREE.Mesh( geometry, sphereMaterial );scene.add( sphereMesh );}//初始化性能插件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() {}//窗口变动触发的函数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>更多推荐
95 Three.js 使用设置envMap环境贴图创建反光效果
发布评论