25 Three.js的点光源THREE.PointLight
来源:互联网 发布:手机怎么找到淘宝客服 编辑:程序博客网 时间:2024/06/05 18:35
介绍
Three.js库中的THREE.PointLight(点光源)是一种单点发光、照射所有方向的光源。比如夜空中的照明弹。
THREE.PointLight的相关属性
案例
详情代码,上面的属性大家自行测试
<!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/OrbitControls.js"></script><script src="examples/js/libs/stats.min.js"></script><script src="examples/js/libs/dat.gui.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(); } //初始化dat.GUI简化试验流程 var gui; function initGui() { //声明一个保存需求修改的相关数据的对象 gui = { ambientLight:"#111111", //环境光源 pointLight:"#ffffff", //点光源 lightY: 30, //灯光y轴的位置 distance:0, //点光源距离 intensity:1, //灯光强度 visible:true //是否可见 }; var datGui = new dat.GUI(); //将设置属性添加到gui当中,gui.add(对象,属性,最小值,最大值) datGui.addColor(gui,"ambientLight").onChange(function (e) { ambientLight.color = new THREE.Color(e); }); datGui.addColor(gui,"pointLight").onChange(function (e) { pointLight.color = new THREE.Color(e); }); datGui.add(gui, "lightY", 0, 100); datGui.add(gui,"distance",0,100).onChange(function (e) { pointLight.distance = e; }); datGui.add(gui,"intensity",0,5).onChange(function (e) { pointLight.intensity = e; }); datGui.add(gui,"visible").onChange(function (e) { pointLight.visible = e; }); } var ambientLight,pointLight; function initLight() { ambientLight = new THREE.AmbientLight("#111111"); scene.add(ambientLight); pointLight = new THREE.PointLight("#ffffff"); pointLight.position.set(15, 30, 10); //告诉平行光需要开启阴影投射 pointLight.castShadow = true; scene.add(pointLight); } var cube; function initModel() { //辅助工具 var helper = new THREE.AxisHelper(10); scene.add(helper); // 创建一个立方体 // v6----- v5 // /| /| // v1------v0| // | | | | // | |v7---|-|v4 // |/ |/ // v2------v3 //立方体 var cubeGeometry = new THREE.CubeGeometry(10,10,10); var cubeMaterial = new THREE.MeshLambertMaterial({color: 0x00ffff}); cube = new THREE.Mesh(cubeGeometry, cubeMaterial); cube.position.x = 5; 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.MeshLambertMaterial({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.OrbitControls(camera, renderer.domElement); // 如果使用animate方法时,将此函数删除 //controls.addEventListener( 'change', render ); // 使动画循环使用时阻尼或自转 意思是否有惯性 controls.enableDamping = true; //动态阻尼系数 就是鼠标拖拽旋转灵敏度 //controls.dampingFactor = 0.25; //是否可以缩放 controls.enableZoom = true; //是否自动旋转 controls.autoRotate = false; //设置相机距离原点的最远距离 controls.minDistance = 50; //设置相机距离原点的最远距离 controls.maxDistance = 200; //是否开启右键拖拽 controls.enablePan = true; } function render() { renderer.render(scene, camera); } //窗口变动触发的函数 function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); render(); renderer.setSize(window.innerWidth, window.innerHeight); } function animate() { //更新控制器 render(); //更新性能插件 stats.update(); //更新相关位置 pointLight.position.y = gui.lightY; controls.update(); requestAnimationFrame(animate); } function draw() { initGui(); initRender(); initScene(); initCamera(); initLight(); initModel(); initControls(); initStats(); animate(); window.onresize = onWindowResize; }</script></html>
阅读全文
0 0
- 25 Three.js的点光源THREE.PointLight
- three.js 03-02 之 PointLight 光源
- three.js光源的应用
- Three.js中的光源
- 24 Three.js的环境光源THREE.AmbientLight
- 26 Three.js的聚光灯光源THREE.SpotLight
- three.js中常用的光源详解
- 23 Three.js的光源种类
- Three.JS学习 6:光源
- 28 Three.js的特殊光源THREE.HemisphereLight户外光照光源
- three.js 源码注释(四十)Light/PointLight.js
- Three.js开发指南---使用three.js里的各种光源
- THREE.JS中常用的4种光源
- 29 Three.js的特殊光源THREE.RectAreaLight窗口射入光线模拟
- three.js 01-03 之添加光源
- three.js 03-01 之 AmbientLight 光源
- three.js 03-03 之 SpotLight 光源
- three.js 03-04 之 DirectionalLight 光源
- 文件数据缓存(key-Value)
- 慕课笔记--[课程]进击Node.js基础(一)
- android inflater 用法&音乐播放器
- 慕课笔记--[课程]进击Node.js基础(二)
- 如何理解python装饰器
- 25 Three.js的点光源THREE.PointLight
- 启动tomcat出现一下错误: org.springframework.beans.factory.BeanCreationException: Error creating bean with n
- 字符串问题---字符串中数字子串的求和
- 股票记录-2017-8-17晚上总结
- POJ
- 【微观】微观经济分析笔记(一)
- 有关蓝牙的小心得
- round 2
- Mysql 分表分区