Three 物体 (一)

骨骼(Bone)

骨骼是Skeleton(骨架)的一部分。骨架是由SkinnedMesh(蒙皮网格)依次来使用的。 骨骼几乎和空白Object3D相同。

var root = new THREE.Bone(); 
var child = new THREE.Bone(); 
root.add( child ); 
child.position.y = 5;

构造器

Bone( )

创建一个新的Bone.

属性

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

# .isBone : Boolean

用于检查这个类或其派生类是否为骨骼。默认值为true

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

# .type : String

设置为“Bone”,这可以用于在一个场景中找到所有的Bones。

组(Group)

它几乎和Object3D是相同的,其目的是使得组中对象在语法上的结构更加清晰。

var geometry = new THREE.BoxBufferGeometry( 1, 1, 1 ); 
var material = new THREE.MeshBasicMaterial( {color: 0x00ff00} ); 
var cubeA = new THREE.Mesh( geometry, material ); 
cubeA.position.set( 100, 100, 0 ); 
var cubeB = new THREE.Mesh( geometry, material ); 
cubeB.position.set( -100, -100, 0 ); 

//create a group and add the two cubes 
//These cubes can now be rotated / scaled etc as a group 
var group = new THREE.Group(); 
group.add( cubeA ); 
group.add( cubeB ); 
scene.add( group );

构造器

Group( )

属性

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

# .type : String

一个字符串:“Group”。这个属性不应当被改变。

线(Line)

一条连续的线。它几乎和LineSegments是一样的,唯一的区别是它在渲染时使用的是gl.LINE_STRIP, 而不是gl.LINES

var material = new THREE.LineBasicMaterial({ color: 0x0000ff }); 
var geometry = new THREE.Geometry(); 
geometry.vertices.push( new THREE.Vector3( -10, 0, 0 ), new THREE.Vector3( 0, 10, 0 ), new THREE.Vector3( 10, 0, 0 ) ); 
var line = new THREE.Line( geometry, material ); 
scene.add( line );

构造器

Line( geometry : Geometry, material : Material )

geometry —— 表示线段的顶点,默认值是一个新的BufferGeometry。
material —— 线的材质,默认值是一个新的具有随机颜色的LineBasicMaterial。

如果没有指定材质,一个随机颜色的线的材质将会被创建,并应用到该物体上。

属性

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

# .isLine : Boolean

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

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

# .geometry : Geometry

表示线段的顶点。

# .material : Material

线的材质。

方法

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

# .computeLineDistances () : Line

计算LineDashedMaterial所需的距离的值的数组。 对于几何体中的每一个顶点,这个方法计算出了当前点到线的起始点的累积长度。

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

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

# .clone () : Line

返回这条线及其子集的一个克隆对象。

环线(LineLoop)

一条头尾相接的连续的线。

它几乎和Line是相同的,唯一的区别是它在渲染时使用的是gl.LINE_LOOP, 而不是gl.LINE_STRIP, 它绘制一条直线到下一个顶点,并将最后一个顶点连回第一个顶点。

构造器

LineLoop( geometry : Geometry, material : Material )

geometry —— 表示环线上的点的顶点列表。
material —— 线的材质,默认值是LineBasicMaterial。

如果没有指定材质,一个随机颜色的线的材质将会被创建,并应用到该物体上。

属性

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

# .isLineLoop : Boolean

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

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

线段(LineSegments)

在若干对的顶点之间绘制的一系列的线。它和Line几乎是相同的,唯一的区别是它在渲染时使用的是gl.LINES, 而不是gl.LINE_STRIP

构造器

LineSegments( geometry : Geometry, material : Material )

geometry —— 表示每条线段的两个顶点。
material —— 线的材质,默认值是LineBasicMaterial。

如果没有指定材质,一个随机颜色的线的材质将会被创建,并应用到该物体上。

属性

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

# .isLineSegments : Boolean

用于检查这个类或者其派生类是否为线段,默认值为true。 你不应当对这个属性进行改变,因为它在内部使用,以用于优化。

方法

环线(LineLoop) 线段( LineSegments )请参阅其基类Line来查看共有属性。

  • 19
    点赞
  • 20
    收藏
    觉得还不错? 一键收藏
  • 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、付费专栏及课程。

余额充值