three.js 教程BufferGeometry讲解

主要配置动态position和color，以下举例说明：

首先先用BufferGeometry创建一条无限延长的线段，初始化线段点

addRunline(){
    var geometry = new THREE.BufferGeometry();

    geometry.setAttribute( 'position', new THREE.Float32BufferAttribute( this.MAX_POINTS * 3, 3 ) );
    geometry.setDrawRange( 0, this.drawCount );

    var material = new THREE.LineBasicMaterial( { color: 0xffffff, linewidth: 2 } );

    this.line = new THREE.Line( geometry,  material );
    this.line.position.set(0,10,0)
    this.scene.add( this.line );
  }

在animate中延长线段

animate () {
    // 执行运动动画
    if(this.renderer && this.camera){
      this.renderer.render(this.scene, this.camera)
      requestAnimationFrame(this.animate.bind(this))
      if(this.line){
        this.line.geometry.attributes.position.needsUpdate = true; // 需要加在第一次渲染之后
        this.line.geometry.setDrawRange( 0, this.drawCount );
        console.log(this.line.geometry.attributes);
        
        var positions = this.line.geometry.attributes.position.array;
        var x, y, z, index;
        x = y = z = index = 0;
        this.drawCount++

        for ( var i = 0; i < this.drawCount; i ++ ) {
            positions[ index ++ ] = 0;
            positions[ index ++ ] = 0;
            positions[ index ++ ] = z++;
        }
      }
    }
  }

添加color渐变的box

addcolorBox(){
    const triangles = 1000;

    const geometry = new THREE.BoxBufferGeometry(10,10,10);
    const colors = [];
    let mesh;

    const color = new THREE.Color();

    const n = 50, n2 = n / 2;	
    const d = 12, d2 = d / 2;	

    for ( let i = 0; i < triangles; i ++ ) {

      // positions

      const x = Math.random() * n - n2;
      const y = Math.random() * n - n2;
      const z = Math.random() * n - n2;
      // colors

      const vx = ( x / n ) + 0.5;
      const vy = ( y / n ) + 0.5;
      const vz = ( z / n ) + 0.5;

      color.setRGB( vx, vy, vz );

      const alpha = Math.random();

      colors.push( color.r, color.g, color.b, alpha );
      colors.push( color.r, color.g, color.b, alpha );
      colors.push( color.r, color.g, color.b, alpha );

    }

    geometry.setAttribute( 'color', new THREE.Float32BufferAttribute( colors, 4 ) );

    const material = new THREE.MeshPhongMaterial( {
      color: 0xaaaaaa, specular: 0xffffff, shininess: 250,
      side: THREE.DoubleSide, vertexColors: 0xaaaaaa, transparent: true
    } );

    mesh = new THREE.Mesh( geometry, material );
    mesh.position.set(0,10,0)
    this.scene.add( mesh );
  }

 结合CatmullRomCurve3添加一个弯曲平滑的线段

addPath(){
    var curve = new THREE.CatmullRomCurve3( [
      new THREE.Vector3( 0, 0, 0 ),
      new THREE.Vector3( 20, 20, 20 ),
      new THREE.Vector3( 30, 20, 20 ),
    ] );
    
    var points = curve.getPoints( 50 ); // 值越大越平滑
    var geometry = new THREE.BufferGeometry().setFromPoints( points );
    var material = new THREE.LineBasicMaterial( { color : 0xffffff } );
    
    // Create the final object to add to the scene
    var curveObject = new THREE.Line( geometry, material )
    this.scene.add(curveObject)
  }

结合EllipseCurve生成一个圆

aX – 椭圆的中心的X坐标，默认值为0。
aY – 椭圆的中心的Y坐标，默认值为0。
xRadius – X轴向上椭圆的半径，默认值为1。
yRadius – Y轴向上椭圆的半径，默认值为1。
aStartAngle – 以弧度来表示，从正右侧算起曲线开始的角度，默认值为0。
aEndAngle – 以弧度来表示，从正右侧算起曲线终止的角度，默认值为2 x Math.PI。
aClockwise – 椭圆是否按照顺时针方向来绘制，默认值为false。
aRotation – 以弧度表示，椭圆从X轴正方向逆时针的旋转角度（可选），默认值为0。

var curve = new THREE.EllipseCurve(
      0,  0,            // ax, aY
      10, 10,           // xRadius, yRadius
      0,  2 * Math.PI,  // aStartAngle, aEndAngle
      false,            // aClockwise
      0                 // aRotation
    );
    
    var points = curve.getPoints( 50 );
    var geometry = new THREE.BufferGeometry().setFromPoints( points );
    var material = new THREE.LineBasicMaterial( { color : 0xffffff } );
    
    // Create the final object to add to the scene
    var curveObject = new THREE.Line( geometry, material )
    curveObject.position.set(0,20,0)
    this.scene.add(curveObject)

完整代码：（基础文件在 three.js教程学习初始化配置_yy_1028的博客-CSDN博客中复制即可）

import Template from "../common/Template"
import * as THREE from 'three'
export default class Director extends Template{
  constructor (ele) {
    super()
    this.ele = ele
    this.PCamera.fov = 45
    this.PCamera.far = 10000
    this.PCamera.near = 1
    this.rendererColor = new THREE.Color(0x01031c)
    this.cameraPostion = new THREE.Vector3(150, 100, 0)

    this.init(this.ele)
    this.addLight() 
    this.addAxesHelper(1000)
    if(this.camera && this.renderer) this.addOrbitControls(this.camera, this.renderer.domElement);
    this.animate()
    this.addGround()
    // this.addHouse()
    this.line = null
    this.MAX_POINTS = 500
    this.drawCount = 2
    // this.addRunline()
    // this.addcolorBox()
    this.addPath()
  }
  addPath(){
    var curve = new THREE.SplineCurve( [
      new THREE.Vector2( -10, 0 ),
      new THREE.Vector2( -5, 5 ),
      new THREE.Vector2( 0, 0 ),
      new THREE.Vector2( 5, -5 ),
      new THREE.Vector2( 10, 0 )
    ] );
    
    var points = curve.getPoints( 50 );
    var geometry = new THREE.BufferGeometry().setFromPoints( points );
    var material = new THREE.LineBasicMaterial( { color : 0xffffff } );
    
    // Create the final object to add to the scene
    var curveObject = new THREE.Line( geometry, material )
    curveObject.position.set(0,20,0)
    this.scene.add(curveObject)
  }
  addcolorBox(){
    const triangles = 1000;

    const geometry = new THREE.BoxBufferGeometry(10,10,10);
    const colors = [];
    let mesh;

    const color = new THREE.Color();

    const n = 50, n2 = n / 2;	
    const d = 12, d2 = d / 2;	

    for ( let i = 0; i < triangles; i ++ ) {

      // positions

      const x = Math.random() * n - n2;
      const y = Math.random() * n - n2;
      const z = Math.random() * n - n2;
      // colors

      const vx = ( x / n ) + 0.5;
      const vy = ( y / n ) + 0.5;
      const vz = ( z / n ) + 0.5;

      color.setRGB( vx, vy, vz );

      const alpha = Math.random();

      colors.push( color.r, color.g, color.b, alpha );
      colors.push( color.r, color.g, color.b, alpha );
      colors.push( color.r, color.g, color.b, alpha );

    }

    geometry.setAttribute( 'color', new THREE.Float32BufferAttribute( colors, 4 ) );

    const material = new THREE.MeshPhongMaterial( {
      color: 0xaaaaaa, specular: 0xffffff, shininess: 250,
      side: THREE.DoubleSide, vertexColors: 0xaaaaaa, transparent: true
    } );

    mesh = new THREE.Mesh( geometry, material );
    mesh.position.set(0,10,0)
    this.scene.add( mesh );
  }
  addRunline(){
    // geometry
    var geometry = new THREE.BufferGeometry();
    // attributes
    // var positions = new Float32Array( this.MAX_POINTS * 3 ); // 3 vertices per point
    geometry.setAttribute( 'position', new THREE.Float32BufferAttribute( this.MAX_POINTS * 3, 3 ) );
    geometry.setDrawRange( 0, this.drawCount );

    // material
    var material = new THREE.LineBasicMaterial( { color: 0xffffff, linewidth: 2 } );

    // line
    this.line = new THREE.Line( geometry,  material );
    this.line.position.set(0,10,0)
    this.scene.add( this.line );
  }
  addGround(){
    const groundGeometry = new THREE.PlaneGeometry(100,200)
    const groundMaterial = new THREE.MeshLambertMaterial({
      color:0x454942
    })

    let ground = new THREE.Mesh(groundGeometry, groundMaterial)
    ground.rotation.x = -Math.PI/2
    this.scene.add(ground)
  }
  addLight(){
    this.addAmbientLight(0x666666)
    this.addDirectionalLight(0xdfebff,{x:50, y:200, z:100},1)
  }
  animate () {
    // 执行运动动画
    if(this.renderer && this.camera){
      this.renderer.render(this.scene, this.camera)
      requestAnimationFrame(this.animate.bind(this))
      if(this.line){
        this.line.geometry.attributes.position.needsUpdate = true; // 需要加在第一次渲染之后
        this.line.geometry.setDrawRange( 0, this.drawCount );
        console.log(this.line.geometry.attributes);
        
        var positions = this.line.geometry.attributes.position.array;
        var x, y, z, index;
        x = y = z = index = 0;
        this.drawCount++

        for ( var i = 0; i < this.drawCount; i ++ ) {
            positions[ index ++ ] = 0;
            positions[ index ++ ] = 0;
            positions[ index ++ ] = z++;
        }
      }
    }
  }
}