How to use three

Comprehensive three code examples:

How to use three.TGALoader:

245
246
247
248
249
250
251
252
253
254
    'FBXLoader: THREE.TGALoader is required to load TGA textures',
  );
  return;
} else {
  if (THREE.Loader.Handlers.get('.tga') === null) {
    var tgaLoader = new THREE.TGALoader();
    tgaLoader.setPath(this.textureLoader.path);

    THREE.Loader.Handlers.add(/\.tga$/i, tgaLoader);
  }

How to use three.Water:

139
140
141
142
143
144
145
146
147
148
 * @param  {[type]} light [description]
 * @return {[type]}       [description]
 */
export const createWater = (light, objs) => {
        let geometry = new THREE.PlaneBufferGeometry(1000, 1000)
        return new THREE.Water(geometry, {
                textureWidth: 2048,
                textureHeight: 2048,
                waterNormals: new THREE.TextureLoader().load( 
                        waterNormalImg,

How to use three.Vector:

116
117
118
119
120
121
122
123
124

// 是否可旋转,旋转速度(鼠标左键)
this.controls.enableRotate = true;
this.controls.rotateSpeed = 0.3;

//controls.target = new THREE.Vector();//摄像机聚焦到某一个点
// 最大最小相机移动距离(景深相机)
// controls.minDistance = 10;
// controls.maxDistance = 40;

How to use three.Renderer:

533
534
535
536
537
538
539
540
541
542
543
}


export default class Robot {
  scene: THREE.Scene;
  camera: THREE.Camera;
  renderer: THREE.Renderer;
  targetProxies: Array<THREE.Object3D> = [];
  rotationControls: Array<THREE.Object3D> = [];
  debugLog: string => void;
  debugTextAtPosition: (string, THREE.Object3D) => void;

How to use three.Triangle:

19
20
21
22
23
24
25
26
27
28
  this.computeVertexNormals();
  this.applyMatrix4(new Matrix4().makeScale(10, 10, 10));
  this.p0 = new Vector3();
  this.p1 = new Vector3();
  this.p2 = new Vector3();
  this.triangle = new Triangle();
}

setUvs() {
  for (let j = 0; j < 468; j++) {

How to use three.ColladaExporter:

0
1
2
3
4
5
6
7
8
9
/**
 * @author Garrett Johnson / http://gkjohnson.github.io/
 * https://github.com/gkjohnson/collada-exporter-js
 *
 * Usage:
 *  var exporter = new THREE.ColladaExporter();
 *
 *  var data = exporter.parse(mesh);
 *
 * Format Definition:

How to use three.DragControls:

149
150
151
152
153
154
155
156
157
158
        this._paths[0].geometry.verticesNeedUpdate = true;

}.bind(this));


var dragControls = new THREE.DragControls(camera, [], renderer.domElement);

dragControls.on('hoveron', function(e){
        transformControl.attach(e.object.drone);
        cancelHideTransorm();

How to use three.PSCFSoftShadowMap:

36
37
38
39
40
41
42
43
44
  , antialias: true
  }
)
this.renderer.setClearColor(0x444444, 1.0)
this.renderer.shadowMap.enabled = true
this.renderer.shadowMap.type = THREE.PSCFSoftShadowMap

let loader = new THREE.ObjectLoader()
this.scene = loader.parse(baseScene)

How to use three.SVGObject:

24
25
26
27
28
29
30
31
32
  this.node = node;

};

THREE.SVGObject.prototype = Object.create( THREE.Object3D.prototype );
THREE.SVGObject.prototype.constructor = THREE.SVGObject;


export class OncoSVGRenderer {

How to use three.SVGLoader:

14
15
16
17
18
19
20
21
22
23
        this.manager = ( manager !== undefined ) ? manager : THREE.DefaultLoadingManager;

};

/* three-svg-loader mod */
module.exports = (exports || {}).default = THREE.SVGLoader

THREE.SVGLoader.prototype = {

        constructor: THREE.SVGLoader,

How to use three.X3DLoader:

18
19
20
21
22
23
24
25
26
27
httpRequest.onreadystatechange = () => {
    if (httpRequest.readyState === XMLHttpRequest.DONE) {
        if (httpRequest.status === 200) {
            var xmlText = httpRequest.responseText;

            var loader = new THREE.X3DLoader();
            const scene = loader.parse(xmlText);
            var light = new THREE.AmbientLight( 0x404040 ); // soft white light
            scene.add( light );
            renderer.render(scene, camera);

How to use three.LightProbeGenerator:

22
23
24
25
26
27
28
29
30
31
require('three/examples/js/loaders/DRACOLoader');  // THREE.DRACOLoader
require('three/examples/js/loaders/GLTFLoader');  // THREE.GLTFLoader
require('three/examples/js/loaders/OBJLoader');  // THREE.OBJLoader
require('three/examples/js/loaders/MTLLoader');  // THREE.MTLLoader
require('three/examples/js/utils/BufferGeometryUtils');  // THREE.BufferGeometryUtils
require('three/examples/js/lights/LightProbeGenerator'); // THREE.LightProbeGenerator

THREE.DRACOLoader.prototype.crossOrigin = 'anonymous';
THREE.GLTFLoader.prototype.crossOrigin = 'anonymous';
THREE.MTLLoader.prototype.crossOrigin = 'anonymous';

How to use three.FramebufferTexture:

9
10
11
12
13
14
15
16
17
18
this.renderOrder = Infinity;
//
const positionScreen = new three_1.Vector3();
const positionView = new three_1.Vector3();
// textures
const tempMap = new three_1.FramebufferTexture(16, 16, three_1.RGBAFormat);
const occlusionMap = new three_1.FramebufferTexture(16, 16, three_1.RGBAFormat);
// material
const geometry = Lensflare.Geometry;
const material1a = new three_1.RawShaderMaterial({

How to use three.ARView:

56
57
58
59
60
61
62
63
64
65
document.body.appendChild(canvas)
scene = new THREE.Scene()

// Creating the ARView, which is the object that handles
// the rendering of the camera stream behind the three.js scene
arView = new THREE.ARView(vrDisplay, renderer)

// The ARPerspectiveCamera is very similar to THREE.PerspectiveCamera,
// except when using an AR-capable browser, the camera uses
// the projection matrix provided from the device, so that the

How to use three.ARUtils:

37
38
39
40
41
42
43
44
45
46
    if (display) {
        vrFrameData = new VRFrameData()
        vrDisplay = display
        init()
    } else {
        THREE.ARUtils.displayUnsupportedMessage()
    }
})

function init() {

How to use three.CSM:

39
40
41
42
43
44
45
46
47
48
let renderer = new THREE.WebGLRenderer();

renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap; // or any other type of shadowmap
        
let csm = new THREE.CSM({
        maxFar: camera.far,
        cascades: 4,
        shadowMapSize: 1024,
        lightDirection: new THREE.Vector3(1, -1, 1).normalize(),

How to use three.ARPerspectiveCamera:

63
64
65
66
67
68
69
70
71
72
// The ARPerspectiveCamera is very similar to THREE.PerspectiveCamera,
// except when using an AR-capable browser, the camera uses
// the projection matrix provided from the device, so that the
// perspective camera's depth planes and field of view matches
// the physical camera on the device.
camera = new THREE.ARPerspectiveCamera(
    vrDisplay,
    60,
    window.innerWidth / window.innerHeight,
    vrDisplay.depthNear,

How to use three.ARDebug:

42
43
44
45
46
47
48
49
50
51
        THREE.ARUtils.displayUnsupportedMessage()
    }
})

function init() {
    var arDebug = new THREE.ARDebug(vrDisplay)
    document.body.appendChild(arDebug.getElement())

    renderer = new THREE.WebGLRenderer({ alpha: true })
    renderer.setPixelRatio(window.devicePixelRatio)

How to use three.JDLoader:

49
50
51
52
53
54
55
56
57
58

const Zlib = require("../vendor/three/examples/js/libs/inflate.min")

window.Zlib = Zlib.Zlib
let loadingManager = new THREE.LoadingManager()
let loader = new THREE.JDLoader()
let fbxLoader = new THREE.FBXLoader(loadingManager)
let objLoader = new THREE.OBJLoader2(loadingManager)
let gltfLoader = new THREE.GLTFLoader(loadingManager)
gltfLoader.setDRACOLoader(new THREE.DRACOLoader())

How to use three.FontUtils:

95
96
97
98
99
100
101
102
103
104
    // lol
  }
}

// setup typeface
window._typeface_js = {faces: THREE.FontUtils.faces, loadFace: THREE.FontUtils.loadFace};
THREE.typeface_js = window._typeface_js;

// request animation frame shim
(function() {

How to use three.OrbitControls2:

31
32
33
34
35
36
37
38
39
40
camera = new THREE.PerspectiveCamera( 80, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.set(150, 0, 380);
//camera
scene.add( camera );

//controls = new THREE.OrbitControls2( camera );
//controls.radius = 400;
//controls.speed = 3;

//

How to use three.FilmPass:

175
176
177
178
179
180
181
182
183
184
window.addEventListener( 'resize', onWindowResize, false );

// postprocessing

var renderModel = new THREE.RenderPass( scene, camera );
var effectFilm = new THREE.FilmPass( 0.35, 0.75, 2048, false );

effectFilm.renderToScreen = true;

composer = new THREE.EffectComposer( renderer );

How to use three.RenderTarget:

206
207
208
209
210
211
212
213
214
215
  this.renderViewToRenderTarget(view, this.fullSizeRenderTarget, zone);
  this.renderer.readRenderTargetPixels(this.fullSizeRenderTarget, zone.x, this.height - (zone.y + zone.height), zone.width, zone.height, zone.buffer);
  return zone.buffer;
}
/**
 * Render view to a THREE.RenderTarget.
 *
 * @param {View} view - The view to render
 * @param {THREE.RenderTarget} [target] - destination render target. Default value: full size render target owned by c3DEngine.
 * @param {object} [zone] - partial zone to render (zone x/y uses view coordinates) Note: target must contain complete zone

How to use three.TransformControls:

117
118
119
120
121
122
123
124
125
controls.damping = 0.2;
controls.addEventListener('change', () => this._dirty = true);
this.controls = controls;

/*
var transformControl = new THREE.TransformControls(camera, renderer.domElement);
transformControl.addEventListener('change', () => this.render());

scene.add(transformControl);

How to use three.WEBVR:

12
13
14
15
16
17
18
19
20
21
// to use three's version:
// const { WEBVR } = require('three/examples/jsm/vr/WebVR')
//
// use vendor'd version
require('../../vendor/three/examples/js/vr/WebVR')
const WEBVR = THREE.WEBVR

const XRClient = require('./client')

const {

How to use three.TetrahedromBufferGeometry:

403
404
405
406
407
408
409
410
411
412
413
414
415


    return geometry;
}


export function phosphateGeom () {
    return new THREE.TetrahedromBufferGeometry(1);
}


export function baseMaterial (nuc, type) {
    //var material = new THREE.MeshLambertMaterial({color: 0x554444 });

How to use three.MapControls:

23
24
25
26
27
28
29
30
31
32
33
34
35
36


    return control
};


THREE.MapControls.prototype = Object.create(THREE.EventDispatcher.prototype);
THREE.MapControls.prototype.constructor = THREE.MapControls;


Math.lerp = (a, b, t) => a + (b - a) * t;


log(Math.lerp(0, 1, .5));

How to use three.BufferGeometryExporter:

24
25
26
27
28
29
30
31
32
33
//

var geometries = {};
var geometryExporter = new THREE.GeometryExporter();
var geometry2Exporter = new THREE.Geometry2Exporter();
var bufferGeometryExporter = new THREE.BufferGeometryExporter();

var parseGeometry = function ( geometry ) {

    if ( output.geometries === undefined ) {

How to use three.GeometryExporter:

22
23
24
25
26
27
28
29
30
31
};

//

var geometries = {};
var geometryExporter = new THREE.GeometryExporter();
var geometry2Exporter = new THREE.Geometry2Exporter();
var bufferGeometryExporter = new THREE.BufferGeometryExporter();

var parseGeometry = function ( geometry ) {

three functions:

Sorted by popularity