How to use the three.PlaneBufferGeometry function in three

To help you get started, we’ve selected a few three examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github ykob / sketch-threejs / src / js / sketch / burn / Image.js View on Github external
constructor() {
    // Define Geometry
    const geometry = new THREE.PlaneBufferGeometry(1, 1, 64, 64);

    // Define Material
    const material = new THREE.RawShaderMaterial({
      uniforms: {
        time: {
          type: 'f',
          value: 0
        },
        easeTransition: {
          type: 'f',
          value: 0
        },
        noiseTex: {
          type: 't',
          value: null
        },
github ykob / sketch-threejs / src / js / sketch / shadow / Floor.js View on Github external
constructor() {
    // Define Geometry
    const geometry = new THREE.PlaneBufferGeometry(30, 30, 128, 128);

    // Define Material
    const material = new THREE.RawShaderMaterial({
      uniforms: {
        ...THREE.UniformsLib['lights'],
        time: {
          type: 'f',
          value: 0
        },
      },
      vertexShader: vs,
      fragmentShader: fs,
      flatShading: true,
    });

    // Create Object3D
github Bombanauts / Bombanauts / browser / game / main.js View on Github external
scene = new THREE.Scene();
  const ambient = new THREE.AmbientLight(0xffffff);
  scene.add(ambient);
  light = new THREE.SpotLight(0xffffff);
  light.position.set(10, 30, 20);
  light.target.position.set(0, 5, 0);
  scene.add(light);

  /*----- CREATE CLOCK FOR FIRE ANIMATION -----*/
  clock = new THREE.Clock()

  controls = new PointerLockControls(camera, sphereBody);
  scene.add(controls.getObject());

  /*----- FLOOR -----*/
  geometry = new THREE.PlaneBufferGeometry(125, 125, 50, 50);
  geometry.applyMatrix(new THREE.Matrix4().makeRotationX(-Math.PI / 2));
  const texture = new THREE.TextureLoader().load('images/grass.png');
  material = new THREE.MeshLambertMaterial({ map: texture });

  /*----- REPEAT TEXTURE TILING FOR FLOOR -----*/
  texture.wrapS = THREE.RepeatWrapping;
  texture.wrapT = THREE.RepeatWrapping;
  texture.repeat.x = 20;
  texture.repeat.y = 20;
  mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh);

  /*----- SKYBOX -----*/
  const skyGeo = new THREE.SphereGeometry(1000, 32, 32);
  const skyMaterial = new THREE.MeshBasicMaterial({ color: '#00bfff' });
  const sky = new THREE.Mesh(skyGeo, skyMaterial);
github MageStudio / Mage / src / controls / TransformPlane.js View on Github external
constructor() {
        super(
    		new PlaneBufferGeometry( 100000, 100000, 2, 2 ),
    		new MeshBasicMaterial( { visible: false, wireframe: true, side: DoubleSide, transparent: true, opacity: 0.1 } )
    	);

    	this.type = 'TransformControlsPlane';

    	this.unitX = new Vector3(1, 0, 0);
    	this.unitY = new Vector3(0, 1, 0);
    	this.unitZ = new Vector3(0, 0, 1);

    	this.tempVector = new Vector3();
    	this.dirVector = new Vector3();
    	this.alignVector = new Vector3();
    	this.tempMatrix = new Matrix4();
    	this.identityQuaternion = new Quaternion();

        this.isTransformControlsPlane = true;
github alibaba / tofu.js / src / core / layer / Layer.js View on Github external
*/
    this.camera = new OrthographicCamera(-1, 1, 1, -1, 0, 1);

    /**
     * scene, for composite draw
     * @member {Scene}
     */
    this.scene = new Scene();

    const readBuffer = this.afterEffects.readBuffer;
    /**
     * quad, for composite draw
     * @member {Mesh}
     */
    this.quad = new Mesh(
      new PlaneBufferGeometry(2, 2),
      new MeshBasicMaterial({
        transparent: true,
        map: readBuffer.texture,
        depthTest: false,
        depthWrite: false,
      }));

    this.scene.add(this.quad);
  }
github protectwise / troika / packages / troika-3d-ui / src / facade / UIBlockLayer3DFacade.js View on Github external
import { Object3DFacade } from 'troika-3d'
import { Color, Mesh, MeshBasicMaterial, PlaneBufferGeometry, Vector4 } from 'three'
import { createUIBlockLayerDerivedMaterial } from './UIBlockLayerDerivedMaterial.js'
const geometry = new PlaneBufferGeometry(1, 1).translate(0.5, -0.5, 0)
const defaultBgMaterial = new MeshBasicMaterial({color: 0})
const noclip = Object.freeze(new Vector4())


/**
 * A single layer in a UI Block's rendering, e.g. background or border. All layers honor
 * border radius, which is calculated shader-side for perfectly smooth curves at any scale,
 * with antialiasing.
 *
 * You shouldn't have to use this directly; UIBlock3DFacade will create these as needed
 * based on background/border styles.
 */
class UIBlockLayer3DFacade extends Object3DFacade {
  constructor(parent) {
    const mesh = new Mesh(geometry, defaultBgMaterial)
    mesh.frustumCulled = false //TODO moot if we make this an Instanceable, otherwise need to fix culling by transformed size
github K3D-tools / K3D-jupyter / js / src / providers / threejs / objects / Volume.js View on Github external
});

        geometry.computeBoundingSphere();
        geometry.computeBoundingBox();

        object = new THREE.Mesh(geometry, material);
        object.applyMatrix(modelMatrix);
        object.updateMatrixWorld();

        /*
            Light Map support
         */
        if (config.shadow !== 'off') {
            sceneRTT = new THREE.Scene();
            quadRTT = new THREE.Mesh(
                new THREE.PlaneBufferGeometry(lightMapRenderTargetSize, lightMapRenderTargetSize),
                new THREE.ShaderMaterial({
                    uniforms: _.merge(
                        uniforms,
                        THREE.UniformsLib.lights,
                        {
                            lightDirection: {type: 'v3', value: new THREE.Vector3()}
                        }
                    ),
                    defines: {
                        USE_MAP: 1
                    },
                    vertexShader: require('./shaders/Volume.lightmap.vertex.glsl'),
                    fragmentShader: require('./shaders/Volume.lightmap.fragment.glsl'),
                    clipping: true,
                    depthWrite: false,
                    depthTest: false
github facebook / react-360 / React360 / js / Views / Plane.js View on Github external
_generateGeometry() {
    const geometry = new PlaneBufferGeometry(this._dimWidth, this._dimHeight);
    this._setGeometry(geometry);
  }
github heremaps / harp.gl / @here / harp-examples / src / textcanvas.ts View on Github external
new THREE.PlaneBufferGeometry(
                        window.innerWidth - 1,
                        window.innerHeight - 1,
                        window.innerWidth / 16,
                        window.innerHeight / 16
                    )
                ),
                new THREE.LineBasicMaterial({
                    color: 0x999999,
                    depthWrite: false,
                    depthTest: false
                })
            ),
            new THREE.LineSegments(
                new THREE.WireframeGeometry(
                    new THREE.PlaneBufferGeometry(
                        window.innerWidth - 1,
                        window.innerHeight - 1,
                        2,
                        2
                    )
                ),
                new THREE.LineBasicMaterial({
                    color: 0xff0000,
                    depthWrite: false,
                    depthTest: false
                })
            )
        );

        penObject = new THREE.Mesh(
            new THREE.SphereBufferGeometry(4, 4, 4),