How to use the three.MeshBasicMaterial 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 JohnnyDevNull / ng-three-template / src / app / engine / engine.service.ts View on Github external
// create the scene
    this.scene = new THREE.Scene();

    this.camera = new THREE.PerspectiveCamera(
      75, window.innerWidth / window.innerHeight, 0.1, 1000
    );
    this.camera.position.z = 5;
    this.scene.add(this.camera);

    // soft white light
    this.light = new THREE.AmbientLight( 0x404040 );
    this.light.position.z = 10;
    this.scene.add(this.light);

    const geometry = new THREE.BoxGeometry(1, 1, 1);
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    this.cube = new THREE.Mesh( geometry, material );
    this.scene.add(this.cube);

  }
github bs-community / skinview3d / js / build / skinview3d.module.js View on Github external
// texture
		this.skinImg = new Image();
		this.skinCanvas = document.createElement("canvas");
		this.skinTexture = new Texture(this.skinCanvas);
		this.skinTexture.magFilter = NearestFilter;
		this.skinTexture.minFilter = NearestFilter;

		this.capeImg = new Image();
		this.capeCanvas = document.createElement("canvas");
		this.capeTexture = new Texture(this.capeCanvas);
		this.capeTexture.magFilter = NearestFilter;
		this.capeTexture.minFilter = NearestFilter;

		this.layer1Material = new MeshBasicMaterial({ map: this.skinTexture, side: FrontSide });
		this.layer2Material = new MeshBasicMaterial({ map: this.skinTexture, transparent: true, opacity: 1, side: DoubleSide, alphaTest: 0.5 });
		this.capeMaterial = new MeshBasicMaterial({ map: this.capeTexture, transparent: true, opacity: 1, side: DoubleSide, alphaTest: 0.5 });

		// scene
		this.scene = new Scene();

		// Use smaller fov to avoid distortion
		this.camera = new PerspectiveCamera(40);
		this.camera.position.y = -12;
		this.camera.position.z = 60;

		this.renderer = new WebGLRenderer({ angleRot: true, alpha: true, antialias: false });
		this.renderer.setSize(300, 300); // default size
		this.renderer.context.getShaderInfoLog = function () {
			return "";
		}; // shut firefox up
		this.domElement.appendChild(this.renderer.domElement);
github shinseed / BIMServer-NodeJs / BIMServerSrc / components / threeView / OBJLoader2.js View on Github external
MeshCreator.prototype.setMaterials = function ( materials ) {
			this.materials = Validator.verifyInput( materials, this.materials );
			this.materials = Validator.verifyInput( this.materials, { materials: [] } );

			var defaultMaterial = this.materials[ 'defaultMaterial' ];
			if ( ! defaultMaterial ) {

				defaultMaterial = new THREE.MeshStandardMaterial( { color: 0xDCF1FF } );
				defaultMaterial.name = 'defaultMaterial';
				this.materials[ 'defaultMaterial' ] = defaultMaterial;

			}
			var vertexColorMaterial = this.materials[ 'vertexColorMaterial' ];
			if ( ! vertexColorMaterial ) {

				vertexColorMaterial = new THREE.MeshBasicMaterial( { color: 0xDCF1FF } );
				vertexColorMaterial.name = 'vertexColorMaterial';
				vertexColorMaterial.vertexColors = THREE.VertexColors;
				this.materials[ 'vertexColorMaterial' ] = vertexColorMaterial;

			}
		};
github GoogleWebComponents / model-viewer / src / three-components / EnvironmentScene.ts View on Github external
createAreaLightMaterial(intensity: number): MeshBasicMaterial {
    const material = new MeshBasicMaterial();
    material.color.setScalar(intensity);
    return material;
  }
}
github heremaps / harp.gl / @here / harp-examples / src / textcanvas.ts View on Github external
window.innerHeight - 1,
                        2,
                        2
                    )
                ),
                new THREE.LineBasicMaterial({
                    color: 0xff0000,
                    depthWrite: false,
                    depthTest: false
                })
            )
        );

        penObject = new THREE.Mesh(
            new THREE.SphereBufferGeometry(4, 4, 4),
            new THREE.MeshBasicMaterial({ color: 0xff0000 })
        );
        gridScene.add(penObject);
    }
github madebywild / konterball / src / javascripts / hud / countdown.js View on Github external
constructor(scene, config, font) {
    this.scene = scene;
    this.font = font;
    this.config = config;

    const material = new MeshBasicMaterial({
      color: 0xffffff,
      transparent: true,
    });
    const geometry = new TextGeometry('5', {
      font: this.font,
      size: FONT_SIZE,
      height: 0.001,
      curveSegments: 3,
    });
    geometry.computeBoundingBox();
    this.countdown = new Mesh(geometry, material);
    this.countdown.position.x = -geometry.boundingBox.max.x / 2;
    this.countdown.position.y = this.config.tableHeight + 0.2;
    this.countdown.position.z = this.config.tablePositionZ + 0.5;
    this.scene.add(this.countdown);
  }
github aarosil / react-three-hook / src / example-asteroids / LaserStrengthMeter.three.js View on Github external
const meterOutlineGeometry = new THREE.Geometry();
  meterOutlineGeometry.vertices.push(
    new THREE.Vector3(METER_WIDTH, 0, 0),
    new THREE.Vector3(METER_WIDTH, METER_HEIGHT, 0),
    new THREE.Vector3(0, METER_HEIGHT, 0),
    new THREE.Vector3(0, 0, 0),
    new THREE.Vector3(METER_WIDTH, 0, 0),
  );
  const meterOutline = new THREE.Line(
    meterOutlineGeometry,
    meterOutlineMaterial,
  );
  meterOutline.position.x = right - METER_HEIGHT - METER_WIDTH;
  meterOutline.position.y = top - 2 * METER_HEIGHT;

  const meterMaterial = new THREE.MeshBasicMaterial({ color: 0xffffff });
  const meterGeometry = meterOutlineGeometry.clone();
  meterGeometry.faces = [new THREE.Face3(0, 1, 2), new THREE.Face3(2, 3, 4)];
  const meter = new THREE.Mesh(meterGeometry, meterMaterial);
  meter.position.x = right - METER_HEIGHT - METER_WIDTH;
  meter.position.y = top - 2 * METER_HEIGHT;

  scene.add(meterOutline);
  scene.add(meter);

  return {
    meter,
    meterOutline,
  };
};
github willviles / ember-3d / blueprints / ember-3d / files / __root__ / example / objects / cube.js View on Github external
import Ember from 'ember';
import MeshObjectMixin from 'ember-3d/objects/mesh';
import { BoxGeometry, MeshBasicMaterial } from 'three';

const { get } = Ember;

export default MeshObjectMixin.extend({

  geometry: new BoxGeometry(700, 700, 700, 10, 10, 10),
  material: new MeshBasicMaterial({color: 0xfffff, wireframe: true}),

  animate() {
    let cube = get(this, 'object');

    function loop() {
      requestAnimationFrame(loop);
      cube.rotation.x += 0.01;
      cube.rotation.y += 0.01;
    }

    loop();
  }

});
github verma / plasio / js / render.js View on Github external
this.regions.forEach(function(region) {
			var scene = new THREE.Scene();
			var mat = new THREE.MeshBasicMaterial({ color: region.color.getHex(), transparent: true, opacity: 0.5 });
			var m = new THREE.Mesh(geom, mat);

			v.copy(region.end).sub(region.start);
			vmid.copy(v).multiplyScalar(0.5);


			if (region.type === RegionsController.TypeAA) {
				m.position.copy(region.start).add(vmid);
				m.scale.copy(v);
			}
			else {
				m.position.copy(region.start).add(vmid);
				m.scale.set(region.widthScale * o.scaleFactor, region.heightScale * o.scaleFactor, v.length());
				m.lookAt(region.end);
			}
github sdras / three-vue-pattern / src / components / AppBase.vue View on Github external
new THREE.Vector2(0.5, 0),
            new THREE.Vector2(mapRight, 1),
            new THREE.Vector2(mapLeft, 1)
          ])
        }
      }

      tileGeometry.uvsNeedUpdate = true

      var tileRow = new THREE.Object3D()
      this.tileHolder.add(tileRow)

      //this is the scale
      var scale = this.scale / 3

      var tileMat = new THREE.MeshBasicMaterial({
        //main object
        map: this.bufferTexture,
        side: THREE.DoubleSide
      })

      var tileMesh = new THREE.Mesh(tileGeometry, tileMat)
      tileMesh.scale.set(scale, scale, 1)
      tileMesh.rotation.z = rotOffset
      tileRow.add(tileMesh)

      var tileCountX = 15
      for (var i = 0; i < tileCountX; i++) {
        var tileMeshLeft = tileMesh.clone()
        tileMeshLeft.position.x -= tileWidth * scale * (i + 1)
        tileRow.add(tileMeshLeft)