ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

Three.js 学习_帮助类

2022-07-09 20:02:58  阅读:253  来源: 互联网

标签:帮助 scene THREE Three add var new js spotLight


1. ArrowHelper

用于在Three.js场景中添加一个箭头对象,用于模拟方向的三维维箭头对象.其代码定义如下:

var origin = new THREE.Vector3(0, 0, 0);
var xDir = new THREE.Vector3(1, 0, 0);
var length = 1;
var arrow = new THREE.ArrowHelper(xDir, origin, length, color);
var ob = new THREE.Object3D();
ob.position.x = x;
ob.rotation.order = 'XYZ';
ob.rotation.y = ry;
ob.rotation.z = rz;
scene.add(ob);
ob.add(arrow);

其效果如下:

clip_image001

2. AxesHelper

用于简单模拟3个坐标轴的对象,红色代表 X 轴. 绿色代表 Y 轴. 蓝色代表 Z 轴.提供了一个AxesHelper类,可以用来创建一个可视化的三维坐标系。

如下图所示:

clip_image003

3. BoxHelper

用于图形化地展示对象世界轴心对齐的包围盒的辅助对象。

const sphere = new THREE.SphereGeometry();
const object = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( 0xff0000 ) );
const box = new THREE.BoxHelper( object, 0xffff00 );
scene.add( box );

4. Box3Helper

用于显示一个三维对象的外包盒子,其和BoxHelper的区别是,其范围会更大

var box3 = new THREE.Box3();
box3.setFromCenterAndSize(new THREE.Vector3(0, 0, 0), new THREE.Vector3(2, 2, 2));
var helper = new THREE.Box3Helper(box3, 0xffff00);
scene.add(helper);

clip_image004

5. CameraHelper

显示相机信息的帮助类

// 屏幕相机
let camera = new THREE.PerspectiveCamera(45, 1, 0.01, 300)
camera.position.set(-1, 1.2, 1.5)
camera.lookAt(0, 0, 0)

// 带相机助手的相机
const camera1 = new THREE.PerspectiveCamera(45, 1, 0.01, 3)
camera1.position.set(-1, 1.2, 1.5)
camera.lookAt(0, 0, 0)
let cameraHelper = new THREE.CameraHelper(camera1)
scene.add(cameraHelper)

// 需要每帧更新旋转矩阵
stage.onUpdate(() => {
  cameraHelper.update()
  camera1.updateMatrix()
  camera1.lookAt(0, 0, 0)
})

6. DirectionalLightHelper

方向光的助手,用于显示方向光的信息。

var light = new THREE.DirectionalLight(0xFFFFFF,2);
light.position.set(20,20,50);
var helper = new THREE.DirectionalLightHelper(light, 50,0xFFFFFF);
scene.add(helper);

7. GridHelper

用于在视图上添加一个网格

var gridHelper = new THREE.GridHelper( 100, 30, 0x2C2C2C, 0x888888 );
scene.add(gridHelper);

如图所示:

clip_image006

10. PolarGridHelper

用于在视图上添加磁极网格形态,如图所示:

clip_image007

11. HemisphereLightHelper

添加一个球体光源的的标识帮助,如图所示:

clip_image008

12. PlaneHelper

在三维场景中添加一个平面,并且设置平面信息

var plane = new THREE.Plane(new THREE.Vector3(1, 1, 0.2), 3);
// PlaneHelper( plane:平面, size:平面助手的边长, hex:顏色 )
var helper02 = new THREE.PlaneHelper(plane, 100, 0xcfff00);
helper02.position.set(0,-20,0);
scene.add(helper02);

clip_image009

13. PointLightHelper

添加一个点光源的标识信息

var pointLight = new THREE.PointLight(0xff0dd0, 10, 100);
pointLight.position.set(30, 40, 10);
scene.add(pointLight);
// PointLightHelper( light:点光, sphereSize:点光对象的大小, color:颜色 )
var sphereSize = 10;
var pointLightHelper = new THREE.PointLightHelper(pointLight, sphereSize);
scene.add(pointLightHelper);

如图所示:

clip_image010

14. SkeletonHelper

用于给具有骨骼模型的元素,添加骨骼标识信息

 // 骨骼显示助手
skeleton = new THREE.SkeletonHelper(model);
scene.add(skeleton);

clip_image011

19. SpotLightHelper

用于模拟聚光灯 SpotLight 的锥形辅助对象.

spotLight = new THREE.SpotLight(0xffffff, 1);
spotLight.position.set(15, 110, 50);
spotLight.angle = Math.PI / 4;
spotLight.penumbra = 0.05;//边缘范围,反比
spotLight.decay = 2;//衰减系数,反比
spotLight.distance = 400;//发光距离
spotLight.castShadow = true;//阴影
spotLight.shadow.mapSize.width = 1024;
spotLight.shadow.mapSize.height = 1024;
spotLight.shadow.camera.near = 10;//近截面
spotLight.shadow.camera.far = 250;
scene.add(spotLight);
// 聚光灯显示助手
SpotLightHelper( light:灯光, color:颜色 )
lightHelper = new THREE.SpotLightHelper(spotLight,0xdfdfdf);
scene.add(lightHelper);

clip_image012

标签:帮助,scene,THREE,Three,add,var,new,js,spotLight
来源: https://www.cnblogs.com/minhost/p/16461739.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有