THREE.JS 使用CUBECAMERA相机创建反光效果
2024-05-11 02:23:30
THREE.JS 使用CUBECAMERA相机创建反光效果
先看下效果
源码
<!DOCTYPE html>
<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="/lib/js/libs/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 src="../libs/three.js"></script>
<script src="../libs/dat.gui.js"></script>
<script src="../libs/OrbitControls.js"></script> -->
<script src="F:\work\webGL\webGL\初级教程r73-2018年10月\初级教程r73-2018年10月\libs/Detector.js"></script>
<script src="../three.js-dev/build/three.js"></script>
<script src="../three.js-dev/examples/js/loaders/OBJLoader.js"></script>
<script src="../three.js-dev/examples/js/controls/OrbitControls.js"></script>
<script src="../three.js-dev/examples/js/libs/stats.min.js"></script>
<script src="../three.js-dev/examples/js/libs/dat.gui.min.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('../three.js-dev/examples/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('../three.js-dev/examples/textures/cube/skybox/').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("../three.js-dev/examples/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>THREE.JS 使用CUBECAMERA相机创建反光效果相关推荐
- 96 Three.js 使用cubeCamera相机创建反光效果
案例查看地址:http://www.wjceo.com/blog/threejs/2018-05-03/159.html 通过案例可以看到,中间的球体不但可以和上一节一样看到环境贴图的相关纹理,连两边 ...
- threeJS 创建反光效果
参看博客Three.js 使用cubeCamera相机创建反光效果 效果图 总体步骤 ① 创建场景 ② 创建相机 ③ 创建物体 ④ 创建渲染器 html代码 <!DOCTYPE html> ...
- Three.js - 使用 CubeCamera 创建反光效果
使用环境贴图可以创建虚假的反光效果,但是是静态的,并且不能实现镜面反射的效果,镜面所反射的物体是动态的,可以通过THREE.CubeCamera来实现镜面反射的效果. 1.示例 示例 https:// ...
- three.js使用CubeCamera创建反光效果，动态环境贴图实现，立方体全景贴图(vue中使用three.js83)
使用CubeCamera创建反光效果 1.demo效果 2. 实现要点 2.1 创建立方体相机CubeCamera 2.2 使用动态环境贴图材质 2.3 render中更新立方体相机 2.4 创建场景 ...
- node aws 内存溢出_如何使用Node.js和AWS快速创建无服务器RESTful API
node aws 内存溢出 by Mark Hopson 马克·霍普森(Mark Hopson) 如何使用Node.js和AWS快速创建无服务器RESTful API (How to quickly ...
- mac环境下node.js和phonegap/cordova创建ios和android应用
mac环境下node.js和phonegap/cordova创建ios和android应用 一介布衣 2015-01-12 nodejs 6888 分享到:QQ空间新浪微博腾讯微博人人网微信 ...
- js ws 状态_node.js中ws模块创建服务端和客户端，网页WebSocket客户端
首先下载websocket模块,命令行输入 npm install ws 1.node.js中ws模块创建服务端 // 加载node上websocket模块 ws; var ws = require( ...
- node.js中ws模块创建服务端和客户端，网页WebSocket客户端
首先下载websocket模块,命令行输入 npm install ws 1.node.js中ws模块创建服务端 // 加载node上websocket模块 ws; var ws = require( ...
- node.js 模块_如何创建Node JS可重用模块
node.js 模块 In my previous post, we have discussed about "How to export and import a Node JS Mod ...
最新文章
- Win2008支持PowerShell设置方法
- 小教活动总结-VB即时通讯小程序
- leetcode 204. 计数质数
- VirtualBox 虚拟机复制
- java AST 表达式_java AST JCTree简要分析
- Properties工具类
- Hyper-v中安装centos网卡故障
- 车载系统华山论剑：Ali OS、Android、QNX孰优孰劣
- 虚幻引擎3命令行参数
- ps vita 说明书
- Python开源机器学习项目实战
- python 读写三菱PLC数据，使用以太网读写Q系列，L系列，Fx系列的PLC数据
- html画表盘 随时间转动,Html5画钟表盘/指针实时跳动
- IllegalStateException: For MAC signing you do not need to specify the verifier key separately异常解决
- 陈艾盐：春燕百集访谈节目第二十集
- Selenium登录百度贴吧跳过图片验证的两种操作
- GitHub各种加速方式
- 例3.2 计算存款利息。有1000元，存一年。(1)活期，年利率为r1，（2）一年期定期，年利率为r2，（3）存两年半年定期，年利率为r3。
- 【AI名利场·人物】Gowild创始人邱楠：倔强顽强创新着，将AI虚拟生命进行到底...
- ROS开发笔记（5）——基于 python 开发 Turtlebot3 Gazebo仿真环境下键盘操控移动机器人（Teleop-bot ）