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:
GitHub: zDawnING/MyLearnWebGL
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:
GitHub: jsdf/robot-control
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:
GitHub: f0rsythe14/marker_ar
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:
GitHub: dennisss/tansa
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();
See more examples
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);
See more examples
How to use three.LightProbeGenerator:
GitHub: yojik/aframe
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(),
See more examples
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())
See more examples
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:
GitHub: kyohei8/threejs-sandbox
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:
GitHub: avocadojesus/hackaholics
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:
GitHub: VeinKowal/veins
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:
GitHub: dennisss/tansa
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);
See more examples
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 {
See more examples
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 ) {
See more examples
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 ) {
See more examples