通过Three.js实现一个圆点或圆圈的效果，如果不自定义着色器的代码情况下，一般有两个思路，一个是通过Three.js几何体API绘制任何一种你想要的轮廓，一个是通过背景透明的纹理贴图来实现。
通过
CircleGeometry
绘制一个圆形轮廓，
RingGeometry
可以绘制一个圆环形状，通过
ShapeGeometry
可以绘制任何轮廓，只要输入轮廓的坐标数据，然后通过几何体创建的轮廓创建一个网格模型即可。
对于通过几何体创建一个圆点或圆圈形状，一般要使用网格模型
Mesh
，如果使用纹理贴图的方式，对于点模型
Points
、精灵模型
Sprite
和网格模型
Mesh
都是可以的。
如需要一个点或圈是什么形状，只需要美术出一张背景透明的.png格式图片就可以，把显示的形状，绘制在png图片上即可，就像普通前端中的UI标签图片一样。然后在Three.js代码中加载图片的一个纹理对象Texture，然后赋值给模型对象绑定的材质对象
.map
属性即可，这时候要注意一定要把材质对象的
.transparent
属性设置为
true
，否则png透明区域没用，无法显示一个你想要的轮廓。
至于项目中选择网格模型还是说精灵模型，要根据具体情况来定，不过纹理贴图的设置代码都是一样的。
如果选择网格模型一般需要通过Threejs几何体API
PlaneGeometry
来创建一个矩形平面，然后可以给他设置任何你想要的纹理贴图形状。
对于使用纹理贴图，可以实现一个渐变色的光圈相比较通过几何体API创建网格模型的情况也很容易，你只需要让美术把png图片的光圈颜色或透明度进行渐变就可以。
本文转载地址:
我的个人技术博客
three.js原点或圆圈效果通过Three.js实现一个圆点或圆圈的效果，如果不自定义着色器的代码情况下，一般有两个思路，一个是通过Three.js几何体API绘制任何一种你想要的轮廓，一个是通过背景透明的纹理贴图来实现。几何体通过CircleGeometry绘制一个圆形轮廓，RingGeometry可以绘制一个圆环形状，通过ShapeGeometry可以绘制任何轮廓，只要输入轮廓的坐标数...
1、如果一个点A在被另一个物体B里面。
2、则从点A到空间另一点(C)的射线一定与物体B的边缘相交。
3、通过以物体B中心为起点，向物体的各个顶点发出射线，检测射线是否与其他点（A）相交，若相交则 检查最近的一个交点与射线起点的距离，如果这个距离比物体中心到物体顶点的距离都要小，则点A在 物体B里面 点A就是鼠标点击到世界坐标系中的坐标 物体B就是选中的物体 而点C就是相机的位置。
点A就是鼠标点击到世界坐标系中的坐标
物体B就是选中的物体
而点C就是相机的位置。
该
效果
是通过 ArcCurve渲染圆或者圆弧，参数：ArcCurve( x, y, r, srange, erange );
x,y 圆弧坐标
原点
, r：圆弧半径 ; srange, erange：圆弧起始角度；
// 一些教程中介绍说 ArcCurve是 EllipseCurve 的别名，查看参数，发现两者类似
//和椭圆曲线 EllipseCurve( aX, aY, xRadius, yRadius, aStartAngle, aEndAngle, aClockwise, aRo
他是几何体Geometry的方法，通过该方法就可以把数组points的顶点数据提取出来复制给几何体的顶点位置属性
同样缓冲几何体也有setFromPoints方法，不过他是将顶点数据赋值给
当我们进行话直线的时候，首先要确定两点
然后我们给他材质，然后添加到场景中
为了能看清楚两端，我们还可以给他添加点模型
渲染出来是这样的
此外还有三维直线和二维直线在three
js
中已经有相应的接口，供我们创建一条平滑的曲线，他是利用Catmul
除了矩形,圆形在实际的图形运用中也比较广泛。例如水波或光圈
效果
;若是用最基础的webgl理论来讲，我们都知道圆属于多边形的绘制,可以通过绘制圆上的各点，再将其连接起来通过gl.drawArrays方法，传入gl.TRIANGLE_FAN来进行绘制。今天我们介绍Three.
js
的绘制方法。
二.绘制原理
其实在three.
js
中，是有CircleGeometry圆几何体类的，我们可以很轻松的new一个来创建一个圆形平面，然后填充材质即可得到圆形的图案。那我们为什么要自己来绘制呢，原因很简单，自定义的
CircleGeometry圆几何体 是欧几里得几何的一个简单形状。它是由一些三角形部分组成的，它们以中心点为中心，并延伸到一个给定的半径。它是逆时针的，从一个开始的角度和一个给定的中心角度。它还可以用来创建常规的多边形（五角星等），其中的段数决定了边的数量。
示例：CircleGeometry.html
CircleGeometry(radius : Float, segme...
让距离圆心坐标(0.5, 0.5)的距离作为该点的颜色值。
float pct = distance(st,vec2(0.5));
gl_FragColor = vec4(vec3(pct), 1.);
2、通过控制距离-方法二(dot)
dot...
要实现水面倒影
效果
，可以使用three.
js
的水面倒影插件`three.
js
-water`。这个插件可以创建一个水面对象，并且将其反射到场景中，从而实现水面倒影
效果
。
以下是实现水面倒影
效果
的基本步骤：
1. 导入`three.
js
`和`three.
js
-water`插件。
```javascript
import * as THREE from 'three';
import Water from 'three-water';
2. 创建场景、渲染器和相机。
```javascript
const scene = new THREE.Scene();
const renderer = new THREE.WebGLRenderer();
const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 100, 200);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
3. 创建水面对象。
```javascript
const waterGeometry = new THREE.PlaneBufferGeometry(10000, 10000);
const water = new Water(waterGeometry, {
color: 'blue',
scale: 5,
flowDirection: new THREE.Vector2(1, 1),
textureWidth: 512,
textureHeight: 512,
reflectivity: 0.3
water.rotation.x = -Math.PI / 2;
scene.add(water);
4. 创建地面对象，并将其添加到场景中。
```javascript
const groundGeometry = new THREE.PlaneBufferGeometry(10000, 10000);
const groundMaterial = new THREE.MeshPhongMaterial({
color: 0x999999,
depthWrite: false
const ground = new THREE.Mesh(groundGeometry, groundMaterial);
ground.rotation.x = -Math.PI / 2;
scene.add(ground);
5. 创建一个立方体，并将其添加到场景中。
```javascript
const cubeGeometry = new THREE.BoxBufferGeometry(50, 50, 50);
const cubeMaterial = new THREE.MeshPhongMaterial({
color: 'red'
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.position.set(0, 25, 0);
scene.add(cube);
6. 创建一个点光源，并将其添加到场景中。
```javascript
const light = new THREE.PointLight('white', 1, 1000);
light.position.set(0, 200, 0);
scene.add(light);
7. 使用`three.
js
-water`插件提供的`update`方法更新水面对象。
```javascript
function animate() {
requestAnimationFrame(animate);
water.material.uniforms.time.value += 1.0 / 60.0;
water.render();
renderer.render(scene, camera);
animate();
通过以上步骤，就可以在three.
js
中实现水面倒影
效果
了。完整的代码示例可以参考`three.
js
-water`插件的官方文档。
