Three 物体(二)

多细节层次(LOD,Levels of Detail)

多细节层次 —— 在显示网格时,根据摄像机距离物体的距离,来使用更多或者更少的几何体来对其进行显示。

每一个级别都和一个几何体相关联,且在渲染时,可以根据给定的距离,来在这些级别对应的几何体之间进行切换。 通常情况下,你会创建多个几何体,比如说三个,一个距离很远(低细节),一个距离适中(中等细节),还有一个距离非常近(高质量)。

var lod = new THREE.LOD(); 
//Create spheres with 3 levels of detail and create new LOD levels for them 
for( var i = 0; i < 3; i++ ) { 
  var geometry = new THREE.IcosahedronBufferGeometry( 10, 3 - i ) 
  var mesh = new THREE.Mesh( geometry, material ); 
  lod.addLevel( mesh, i * 75 ); 
} 
scene.add( lod );

Constructor

LOD( )

创建一个新的 LOD.

属性

请参阅其基类Object3D来查看公共属性。

# .autoUpdate : boolean

Whether the LOD object is updated automatically by the renderer per frame or not. If set to false, you have to call LOD.update() in the render loop by yourself. Default is true.

# .levels : array

一个包含有level objects(各层次物体)的数组。

每一个层级都是一个对象,具有以下两个属性: object —— 在这个层次中将要显示的Object3D。
distance —— 将显示这一细节层次的距离。

方法

请参阅其基类Object3D来查看共有方法。

# .addLevel ( object : Object3D, distance : Float ) : this

object —— 在这个层次中将要显示的Object3D。
distance —— 将显示这一细节层次的距离。

添加在一定距离和更大范围内显示的网格。通常来说,距离越远,网格中的细节就越少。

# .clone () : LOD

返回一个LOD对象及其所关联的在特定距离中的物体。

# .getObjectForDistance ( distance : Float ) : Object3D

获得第一个比distance大的Object3D(网格)的引用。

# .raycast ( raycaster : Raycaster, intersects : Array ) : Array

在一条投射出去的Ray(射线)和这个LOD之间获得交互。 Raycaster.intersectObject将会调用这个方法。

# .toJSON ( meta ) : Object

使用这个方法,为LOD对象中的每个细节层次创建一个JSON结构。

# .update ( camera : Camera ) : null

基于每个level中的object和camera(摄像机)之间的距离,来设置其可见性。

网格(Mesh)

表示基于以三角形为polygon mesh(多边形网格)的物体的类。 同时也作为其他类的基类,例如SkinnedMesh。

var geometry = new THREE.BoxBufferGeometry( 1, 1, 1 ); 
var material = new THREE.MeshBasicMaterial( { color: 0xffff00 } ); 
var mesh = new THREE.Mesh( geometry, material ); 
scene.add( mesh );

构造器

Mesh( geometry : Geometry, material : Material )

geometry —— (可选)Geometry或者BufferGeometry的实例,默认值是一个新的BufferGeometry。
material —— (可选)一个Material,或是一个包含有Material的数组,默认是一个新的MeshBasicMaterial。

属性

请参阅其基类Object3D来查看共有属性。

# .drawMode : Integer

决定了网格中的三角形将如何从顶点来构造。 请参阅draw mode constants(绘图模式常量)来查看其所有可能的值。 其默认值是TrianglesDrawMode。

# .isMesh : Boolean

用于检查这个类或者其派生类是否为网格,默认值为true

你不应当对这个属性进行改变,因为它在内部使用,以用于优化。

# .geometry : Geometry

Geometry 或 BufferGeometry 的实例或者派生类,定义了物体的结构。

如有可能,推荐总是使用BufferGeometry来获得最好的表现。

# .material : Material

由Material基类或者一个包含材质的数组派生而来的材质实例,定义了物体的外观。默认值是一个具有随机颜色的MeshBasicMaterial。

# .morphTargetInfluences : Array

一个包含有权重(值一般在0-1范围内)的数组,指定应用了多少变形。 默认情况下是未定义的,但是会被updateMorphTargets重置为一个空数组。

# .morphTargetDictionary : Object

基于morphTarget.name属性的morphTargets字典。 默认情况下是未定义的,但是会被updateMorphTargets重建。

方法

请参阅其基类Object3D来查看共有方法。

# .setDrawMode ( value : Integer ) : null

设置drawMode的值。

# .clone () : Mesh

返回这个Mesh对象及其子级的克隆。

# .raycast ( raycaster : Raycaster, intersects : Array ) : null

在一条投射出去的Ray(射线)和这个网格之间产生交互。 Raycaster.intersectObject将会调用这个方法但是这个结果是未排序的

# .updateMorphTargets () : null

更新morphTargets,使其不对对象产生影响,重置morphTargetInfluences and morphTargetDictionary属性。

  • 21
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在Cesium中添加Three.js物体,需要使用Cesium的Scene API和Three.js的WebGLRenderer。具体步骤如下: 1. 创建一个Cesium的Scene对象和一个Three.js的WebGLRenderer对象。 2. 将WebGLRenderer的domElement添加到Cesium的Scene中。 3. 创建一个Three.js的场景和相机,并将相机的投影矩阵设置为Cesium的摄像机的投影矩阵。 4. 创建一个Three.js的物体,并将其添加到Three.js的场景中。 5. 在每一帧渲染时,先更新Cesium的摄像机位置和方向,再更新Three.js的相机位置和方向,并渲染Three.js场景。 以下是示例代码: ```javascript // 创建Cesium的Scene对象和Three.js的WebGLRenderer对象 var viewer = new Cesium.Viewer('cesiumContainer'); var renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true }); // 将WebGLRenderer的domElement添加到Cesium的Scene中 viewer.scene.primitives.add(new Cesium.WebGLRenderer(scene.canvas, renderer)); // 创建Three.js的场景和相机,并将相机的投影矩阵设置为Cesium的摄像机的投影矩阵 var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera( viewer.camera.frustum.fov, viewer.camera.frustum.aspectRatio, viewer.camera.frustum.near, viewer.camera.frustum.far ); // 创建一个Three.js的物体,并将其添加到Three.js的场景中 var geometry = new THREE.BoxGeometry(1, 1, 1); var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); var cube = new THREE.Mesh(geometry, material); scene.add(cube); // 在每一帧渲染时,先更新Cesium的摄像机位置和方向,再更新Three.js的相机位置和方向,并渲染Three.js场景 viewer.scene.postRender.addEventListener(function () { camera.position.copy(viewer.camera.position); camera.quaternion.copy(viewer.camera.orientation); renderer.render(scene, camera); }); // 相关问题:
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值