Threejs场景中的基本组件

总序

相机:决定哪些东西将要在屏幕上渲染

光源:决定对材质会如何显示和生成阴影的使用

物体: 相机中被渲染的对象

Scene场景的几个方法

  1. Scene.add(object);//往场景中添加物体
  2. Scene.remove(object);//场景中去除物体
  3. Scene.children;//Scene的子对象列表;数组吧,包括相机和光源
  4. Scene.getChildByName()//通过物体的name属性访问该物体

    在var cude=…时候可以设定cude.name为“方块1”

  5. Scene.traverse(function);//函数参数对每个子对象都调用一次函数
Scene.traverse(function(e){
    //将一个函数作为参数传进来,对Scene的每个子对象都调用一次
    if(e instanceof THREE.Mesh && e!=plane){
        ...如果e是网格对象且不是地面,则做旋转处理等
    }
}) //可以用for循环children达到同样的效果

注: 场景渲染的时候THREE.Camera会被自动添加进来,如果喜欢也可以手动添加

scene.add(camera);

场景的两个属性 fog(雾化)和overrideMaterial(材质覆盖)

Fog

scene.fog=new THREE.Fog(0xffffff,0.015,100)

参数:白色雾化效果,近处属性值,远处属性值,雾化开始和结束的地方,以及加深的程度

Another Way Fog:

scene.fog= new THREE.FogExp2(0xffffff,0.015)//后一个参数为浓度

材质覆盖

用来设置所有物体的材质>意思是所有添加到场景中的物体都使用一样的材质

scene.overrideMaterial= new THREE.MeshLambertMaterial({color:0xffffff});//所有的都是白色的

网格对象的函数和属性

  • position:决定该对象相对其父对象的位置,一般父对象为THREE.Scene
  • rotation:rotation.x|y|z 绕着某一个轴旋转一定的角度
  • scale:比例,可以沿着xyz轴缩放对象
  • translateX|Y|Z(amount)//将对象平移amount位置

Material材质

MeshLambertMaterial 和MeshPhongMaterial 这两种材质会对光源产生反应

  • MeshLambertMaterial :可以用来创建颜色暗淡不光亮的物体
  • MeshPhongMaterial :可以用来创建光亮的物体 如金属

Camera相机

正投影相机和透视相机

  • 透视投影 距离相机越远的物体被渲染得越小
  • 正投影 同一物体渲染的大小一样,对象和相机的距离不会影响渲染结果,可以达到模拟城市的效果

    ===>更多使用透视相机,更贴近真实世界

    相机的点聚焦 一般指向camera.lookAt(new THREE.Vector3(x,y,z)) // 0 0 0

window.requestAnimationFrame

window.requestAnimationFrame(callback)使用一个回调函数作为参数,主要用途是按帧对网页进行重绘.不过有一点需要注意,requestAnimationFrame是在主线程上完成。这意味着,如果主线程非常繁忙,requestAnimationFrame的动画效果会大打折扣。并不是所有的浏览器都支持requestAnimationFrameAPI 最好的方法是模拟这个方法如下

 window.requestAnimFrame = (function(){
      return  window.requestAnimationFrame       ||
              window.webkitRequestAnimationFrame ||
              window.mozRequestAnimationFrame    ||
              window.oRequestAnimationFrame      ||
              window.msRequestAnimationFrame     ||
              function( callback ){
                window.setTimeout(callback, 1000 / 60);
              };
    })();
 function renderScene(){
        requestAnimationFrame(renderScene);
        renderer.render(scene,camera);
    }

在renderScene中又调用了一次requestAnimationFrame(renderScene),这样是保证动画的持续运行,在代码中调用这个函数来启动动画。

阴影

制造产生阴影的几个步骤,让球体和方块将阴影投影到地上,哪些物体投射阴影,哪些物体接受阴影

  1. render.shadowMapEnabled=true;//告诉render我们需要阴影(允许阴影隐射)
  2. plane.receiveShadow=true;//地面接受阴影
  3. cude.castShadow=true;//cast投射,就是方块投射阴影
  4. spotLight.castShadow=true;不是所有的光源都可以投射阴影 ,这里使用聚点光源可以产生阴影
时间: 2024-11-05 02:25:32

Threejs场景中的基本组件的相关文章

游戏开发之UE4添加角色到场景中

接着上次继续学习,现在我们已经有了一个场景并且运行了,我们需要添加一个角色到场景中.要这样做,我们必须从UE4的GameFramework类继承它. 一. 创建一个从Character类继承的类 从基本框架类继承是很简单的: 1) 在项目中打开你的UE4编辑器. 2) 在文件,选择"新建C++类". 3) 这里你可以选择从Pawn类(Pawn类从控制器接收输入)继承或从Actor类继承.不过我们可以这里选择从Character类(角色)继承. 4) 点击继续,然后你可以命名这个类.这里

Unreal Engine 4 Radiant UI 入门教程(零)在场景中摆放网页

相关的学习资源: https://forums.unrealengine.com/showthread.php?12097-PLUGIN-RadiantUI-SDK-UIs-HUDs-Interactive-WebViews-HTML5-Javascript-CSS https://www.youtube.com/channel/UCnhY_Rd8iyFrvzOgQVptWqg http://www.bootcss.com/ https://github.com/LeGone/RadiantUI

Bootstrap中的 Typeahead 组件

Bootstrap 中的 Typeahead 组件其实就是嵌入到其中的typeahead.js插件,可以完成输入框的自动匹配功能,在通过一些人工的调整基本可以胜任所有的匹配功能和场景,下面介绍下简单的使用思路: 首先,最简单的使用方式,就是直接在标记中声明,通过 data-provide="typeahead" 来声明这是一个 typeahead 组件,通过 data-source= 来提供数据.当然了,你还必须提供 bootstrap-typeahead.js 脚本. 如: <

Vue2.x中的父子组件相互通信

原理 在 Vue.js 中,父子组件的关系可以总结为 props down, events up . 父组件通过 props 向下传递数据给子组件,子组件通过 events 给父组件发送消息.看看它们是怎么工作的. 业务场景 这里指的是直接父子级关系的通信 美女(子组件)将消息发送给大群(父组件) 大群(父组件)收到美女发送的消息后再回个信息给美女(子组件) 父组件 template <template> <div> <p>群消息girl:</p> <

在WebGL场景中使用2DA*寻路

  这篇文章将讨论如何在一个自定义的地面网格上进行简单的2D寻路,以及确定路径后如何使用基于物理引擎的运动方式使物体沿路径到达目标地点.读者需要预先对WebGL和Babylonjs知识有一些了解,可以参考我录制的WebGL入门视频教程和翻译的官方入门文档,当然也可以用自己喜欢的其他方式来学习. 文章主要分成如下几部分: 1.自定义地面网格与寻路矩阵 2.生成Babylon格式3D模型 3.使用pathfinding库进行2D寻路 4.基于cannon.js物理引擎使物体沿路径移动 场景可以通过h

为THREEJS场景添加光影效果

添加光影效果主要用到的代码如下: //使渲染器支持阴影贴图 THREE.Render.shadowMapEnabled= true; //设置灯光阴影属性 //设置灯光生成阴影 THREE.Light.castShadow= true; //如果是调试状态,还可以把灯光的调试帮助框显示出来 THREE.Light.shadowCameraVisible= true; //设置阴影贴图质量 THREE.Light.shadowMapWidth = THREE.Light.shadowMapHeig

Unity3D NGUI从背包中拖出并在场景中生成物体

http://www.cnblogs.com/zhanghaipeng-Unity3D/p/4732592.html 由于游戏需要从背包中拖出武器并在场景中相应的位置生成出来,所以研究了一下这个. 一般来说,在Unity3D开发中如果使用NGUI为游戏做UI,我们的场景和UI并不是使用一个相机进行渲染的,所以从背包中拖出物体并在场景相应的位置生成物体,就会涉及到UICamera和场景摄像机的转换.我在做这个时主要通过打射线来实现坐标转换. 如何创建一个可拖动的UI组件可以参考NGUI中的Exam

Asp.Net Core中利用Seq组件展示结构化日志功能

在一次.Net Core小项目的开发中,掌握的不够深入,对日志记录并没有好好利用,以至于一出现异常问题,都得跑动服务器上查看,那时一度怀疑自己肯定没学好,不然这一块日志不可能需要自己扒服务器日志来查看,果然,很多东西没掌握,至此,花点时间看了下日志的相关操作.利用日志服务来查看日志数据. 本文地址:https://www.cnblogs.com/CKExp/p/9246788.html 本文Demo的地址:https://gitee.com/530521314/LogPanel.git 一.日志

玩转ASP.NET Core中的日志组件

玩转ASP.NET Core中的日志组件简介日志组件,作为程序员使用频率最高的组件,给程序员开发调试程序提供了必要的信息.ASP.NET Core中内置了一个通用日志接口ILogger,并实现了多种内置的日志提供器,例如 ConsoleDebugEventSourceEventLogTraceSourceAzure App Service除了内置的日志提供器,ASP.NET Core还支持了多种第三方日志工具,例如 elmah.ioGelfJSNLogKissLog.netLoggrNLogSe