threejs物体根据相机位置显⽰_使⽤threejs绘制简单的3D图形* fog: 表⽰是否在场景中添加雾⽓效果，在3D空间中会变成⼀个有可见度的空间，默认值为null，可以设置⼀个Fog对象
* overrideMaterial：默认值是null，可以设定⼀个Material对象，这样场景中所有的物体被渲染出来就会是设定的材料
相机
相机⽤于控制3D空间显⽰的区域，通常会采⽤显⽰距离的透视相机和显⽰投影的正交相机，当然以可以直接使⽤相机，并配置合适的参数来实现相应的相机。透视相机会根据场景中物体默认Z轴的深度进⾏近⼤远⼩的显⽰，⽽正交投影相机则会将远近不同的物体按正常的⽐例进⾏显⽰。
普通相机直接使⽤：const camera = new THREE.Camera();
3D场景汇总常⽤透视相机， 如果是⽣成⼀个透视相机，那么对于3D空间内同样⼤⼩但是Z轴距离不容的两个物体在相机中同时显⽰，更远的物体显⽰更⼩。
const camera = new THREE.PerspectiveCamera(45, 1, 1, 100);
透视相机默认接受4个参数，分别表⽰视⾓、截⾯纵横⽐， 近截⾯距离，远截⾯距离(具体参数解释看上⾯那个链接，还有模型可看)
渲染器
浏览器中3D效果展⽰是基于webGL的API，使⽤渲染器从名字上能够体现这⼀点
const renderer = new THREE.WebGLRenderer();
初始化是可以配备参数的：
* canvas：传递⼀个canvas的dom元素，如果不传⼊，那么会新增画布，通过renderer.domElement来获取，画布⽤于展⽰绘制的内容
* alpha： 画布默认是⿊⾊背景，有时候我们只想要显⽰的内容有颜⾊，那么这⼀项就要设置为true
* antialias：抗锯齿效果，顾名思义，默认为false
* logarithmicDepthBuffer：这个值默认为false，是采⽤对数深度检测的内容，场景中物体离视野的距离不⼀，⼀般情况下在物体重叠时显⽰近的物体，特殊情况有可能深度判定有问题，前后材料有重叠破损的表现，此时就需要设置为true
三个核⼼对象确定完毕，那么就和页⾯直接关联起来，设置画布⼤⼩并添加到body中：
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
下⾯就粗暴地添加⼀组物体：
所谓组的概念，是由于场景中3D图形是⼀个⼀个的，多个3D图形就可以组成⼀组，⼀个或者⼀组图形都可以通过name属性命名，并通过name到对应的3D对象。对于⼀个场景中有多个模型，分组是⼗分必要的。
添加⼀组物体，⾸先要有⼀个物体，物体有形状，有材料，要想显⽰材料就需要有光，更多地还需要确定物体的位置、旋转⾓度、缩放⽐例。想要显⽰还需要添加到场景中，相机正确就位，渲染器将相机定住的视野进⾏拍照渲染。
let group = newTHREE.Group();
scene.add(group);//添加两个物体
let cube = new THREE.BoxGeometry( 10, 10, 10);
let boxMaterial= new THREE.MeshBasicMaterial( {color: 0x00ff00, wireframe: true} );
let box= newTHREE.Mesh( cube, boxMaterial );
box.position.x= 10;
group.add( box );
let sphere= new THREE.SphereGeometry( 5, 32, 32);
let sphereMaterial= new THREE.MeshNormalMaterial({ wireframe: true, transparent: true} );
let blet= newTHREE.Mesh( sphere, sphereMaterial );
blet.position.x= -10;
group.add( blet );//添加光js制作简单的焦点图效果
let light = new THREE.AmbientLight( 0x404040);
scene.add( light );//想要看到空间内的物体，需要调整⼀下距离和⽅位
camera.position.z = 100;//更新空间需要重新渲染
Geometry对应有许多⼏何形状，⼤部分都进⾏封装，规则图形很好进⾏绘制，独特的图形也需要⾃⼰描点传⼊数据绘制，⽐如shape。
材料⼜分许多种，这⾥材料都⽤到wireframe，便于观察我们添加的物体的确是3D结构。
场景中有⼀个组，那么组内所有显⽰的3D对象都是在场景中的。⽽想要显⽰必须要确保视野对着物体，也就是camera的位置、⾓度都合适，然后有光才能看见材料的颜⾊。最后别忘了render⼀下。
这时候场景中是这样的：
好像3D想过也不是很明显，那么加上动画转⼀转，将两个物体延⾃⾝中⼼旋转：
requestAnimationFrame(animate);
})
差不多这样吧：
还是很有意思的。。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。