Home

Index

How to use the WebGLRenderer function from three

Find comprehensive JavaScript three.WebGLRenderer code examples handpicked from public code repositorys.

three.WebGLRenderer is a WebGL-based graphics renderer used for rendering three-dimensional scenes in a web browser.

Renderer.js

18
19
20
21
22
23
24
25
26
27
    alpha: true,
    stencil: true,
    powerPreference: 'high-performance',
});

self.renderer = new THREE.WebGLRenderer({
    alpha: true,
    precision: 'highp',
    premultipliedAlpha: true,
    antialias: K3D.parameters.antialias > 0,

119

812

index.js

GitHub: JackGit/xplan

97
98
99
100
101
102
103
104
105
106
    this.locationGroup.add(sprite)
  })
}

_createRenderer () {
  let renderer = new THREE.WebGLRenderer({
    alpha: true,
    antialias: true,
    preserveDrawingBuffer: true
  })

280

How does three.WebGLRenderer work?

The three.WebGLRenderer is a class in the Three.js library that renders 3D scenes to a web page using WebGL technology, which allows for hardware-accelerated rendering of graphics on compatible devices. When created, it creates a WebGL context and sets up various default settings and properties for rendering, such as the size of the canvas element, the gamma factor, and the maximum number of textures that can be used. It also provides methods for rendering a scene and updating it as needed.

README.md?plain=1

GitHub: spite/THREE.CubemapToEquirectangular

23
24
25
26
27
28
29
30
31
32
```

Define a new instance of THREE.CubemapToEquirectangular.
```js
// create renderer, scene, camera, etc.
var renderer = new THREE.WebGLRenderer();
var scene = new THREE.Scene();
var camera = new THREE.Camera( /* ... */ );

// Create a managed CubemapToEquirectangular

178

+ 11 other calls in file

demo.js

GitHub: fluuuid/labs

12
13
14
15
16
17
18
19
20
  update();
}

var counter = 0;

renderer = new THREE.WebGLRenderer( {
    antialias : true,
    clearColor: 0
} );

163

Ai Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
// Create a WebGLRenderer instance
const renderer = new THREE.WebGLRenderer();

// Set the size of the renderer canvas
renderer.setSize(window.innerWidth, window.innerHeight);

// Add the renderer canvas to the HTML document
document.body.appendChild(renderer.domElement);

// Create a scene
const scene = new THREE.Scene();

// Create a camera
const camera = new THREE.PerspectiveCamera(
  45,
  window.innerWidth / window.innerHeight,
  1,
  500
);

// Set the position of the camera
camera.position.set(0, 0, 100);

// Add the camera to the scene
scene.add(camera);

// Create a box geometry
const geometry = new THREE.BoxGeometry();

// Create a material with a solid color
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });

// Create a mesh with the geometry and material
const cube = new THREE.Mesh(geometry, material);

// Add the mesh to the scene
scene.add(cube);

// Render the scene with the camera
renderer.render(scene, camera);

This code creates a basic WebGLRenderer instance and uses it to render a green box in a simple Three.js scene.

chemview.js

GitHub: gabrielelanaro/chemview

13
14
15
16
17
18
19
20
21
22
this.container = $el;
this.container.widthInv = 1 / this.container.width();
this.container.heightInv = 1 / this.container.height();
this.container.whratio = this.container.width() / this.container.height();
this.container.hwratio = this.container.height() / this.container.width();
this.renderer = new THREE.WebGLRenderer({
        canvas: this.container.get(0),
        antialias: true,
        preserveDrawingBuffer: true,
});

+ 20 other calls in file

main.js

GitHub: kentywang/Agamari

45
46
47
48
49
50
51
52
53
54
camera = new THREE.PerspectiveCamera(65,
                                     window.innerWidth / window.innerHeight,
                                     1,
                                     2500);
canvas = document.getElementById('canvas');
renderer = new THREE.WebGLRenderer({alpha: true, canvas});
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize(window.innerWidth / 1,
                 window.innerHeight / 1,
                 false);

+ 15 other calls in file

render.js

GitHub: hobuinc/usgs-lidar

1177
1178
1179
1180
1181
1182
1183
1184
1185
1186

// ambiently light our scale objects
var l = new THREE.AmbientLight(0xffffff);
scene.add(l);

renderer = new THREE.WebGLRenderer( { antialias: false } );
renderer.setSize(w, h);
renderer.autoClear = false;

// instantiate camera control instance with the container we'd like it to use

110

index.js

GitHub: avin/generative

132
133
134
135
136
137
138
139
140
141
  const audio = new Audio('assets/songs/Let_It_Snow_(Trap_Remix).mp3');
  audio.play();
});

// Create a renderer
const renderer = new THREE.WebGLRenderer({
  canvas: context.canvas,
});

renderer.setClearColor('hsl(200, 90%, 10%)', 1);

+ 5 other calls in file

index.js

GitHub: maxogden/stl-obj-viewer

85
86
87
88
89
90
91
92
93
pointLight.position.z = 500

// add to the scene
scene.add(pointLight)

if ("WebGLRenderingContext" in window) renderer = new THREE.WebGLRenderer()
else renderer = new THREE.CanvasRenderer()

renderer.setSize( width, height )

+ 14 other calls in file

index.js

GitHub: ASSERT-KTH/ci-hackathon

28
29
30
31
32
33
34
35
36
37
camera.position.x = 0;
camera.position.y = 50;
camera.position.z = 300;
camera.lookAt(new THREE.Vector3(0,  100, 0));

var renderer = new THREE.WebGLRenderer({canvas: roomCanvas});
renderer.setSize( roomCanvas.width, roomCanvas.height, false );

function addControls(){

+ 2 other calls in file

renderer.js

GitHub: zya/apophenia

18
19
20
21
22
23
24
25
26
require('../../node_modules/three/examples/js/postprocessing/BokehPass');
require('../../node_modules/three/examples/js/nodes/postprocessing/NodePass');

var camera, scene;

var renderer = new THREE.WebGLRenderer({
  alpha: true,
  antialias: false
});

+ 9 other calls in file

map.js

GitHub: hakatashi/esolang-battle

7
8
9
10
11
12
13
14
15
16
constructor(element, onFacesUpdate, onClick) {
        this.onFacesUpdate = onFacesUpdate;
        this.onClick = onClick;
        this.element = element;

        this.renderer = new THREE.WebGLRenderer({alpha: true});
        this.camera = new THREE.PerspectiveCamera(45, 1, 0.1, 1e4);
        this.scene = new THREE.Scene();

        this.scene.add(this.camera);

shark_viewer.js

GitHub: JaneliaSciComp/SharkViewer

902
903
904
905
906
907
908
909
910

// copied from example at http://jsfiddle.net/b97zd1a3/16/
addAxes() {
  const CANVAS_WIDTH = 200;
  const CANVAS_HEIGHT = 200;
  const axesRenderer = new THREE.WebGLRenderer( { alpha: true } ); // clear
  axesRenderer.setClearColor( 0x000000, 0 );
  axesRenderer.setSize( CANVAS_WIDTH, CANVAS_HEIGHT );
  this.axesRenderer = axesRenderer;

+ 3 other calls in file

spotlightview_new.js

GitHub: audunsh/evince

3103
3104
3105
3106
3107
3108
3109
3110
3111
3112




//console.log(VRButton);
const renderer = new THREE.WebGLRenderer();
//document.body.appendChild( VRButton.createButton( renderer ) );
this.renderer = renderer;

this.el.appendChild( VRButton.createButton( this.renderer ) );

+ 17 other calls in file

index.js

GitHub: OpenSlicer/OpenSlicer

496
497
498
499
500
501
502
503
504
505
506
507
}




function init() {
    scene = new THREE.Scene()
    renderer = new THREE.WebGLRenderer({
        canvas: canvas,
        antialias: true,
        alpha: true
    })

+ 2 other calls in file

ThreeFactory.js

GitHub: zhouzhili/webGL-webGIS-Learning

32
33
34
35
36
37
38
39
40
41
  this.scene = new THREE.Scene()
}

_initRender() {
  const { renderOpt } = this.opts
  const renderer = new THREE.WebGLRenderer({ antialias: true, ...renderOpt })
  //告诉渲染器需要阴影效果
  renderer.shadowMap.enabled = true
  renderer.shadowMap.type = THREE.PCFSoftShadowMap // 默认的是，没有设置的这个清晰 THREE.PCFShadowMap
  if (this.opts.el) {

main.js

GitHub: Siilwyn/three.js-gsap-audio-boilerplate

7
8
9
10
11
12
13
14
15
16
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);
const renderer = new three.WebGLRenderer({
  antialias: true,
  canvas: document.querySelector('[data-renderer]')
});
renderer.setClearColor(0xeeeeee);

framework.js

GitHub: gracexu94/FinalProject

56
57
58
59
60
61
62
63
64

// run this function after the window loads
window.addEventListener('load', function() {
  var scene = new THREE.Scene();
  var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
  var renderer = new THREE.WebGLRenderer( { antialias: true } );
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setClearColor(0x020202, 0);

+ 3 other calls in file

vr-template.js

GitHub: OasisProject/WebVR-Template

17
18
19
20
21
22
23
24
25
26


module.exports = { 
    init: function() {
//Setup three.js WebGL renderer
    renderer = new three.WebGLRenderer({ antialias: true })
    renderer.setPixelRatio(window.devicePixelRatio);

    // Append the canvas element created by the renderer to document body element.
    document.body.appendChild(renderer.domElement);

+ 9 other calls in file

TestScene.js

GitHub: sneha-belkhale/street-rat

6
7
8
9
10
11
12
13
14
15
const OrbitControls = require('three-orbit-controls')(THREE);


export default class TestScene {
  constructor() {
    this.renderer = new THREE.WebGLRenderer({ antialias: true });

    const isVRSupport = 'getVRDisplays' in navigator;

    this.renderer.physicallyCorrectLights = true;

Other functions in three

Sorted by popularity

three.Vector3 is the most popular function in three (22341 examples)

Other popular packages:

Home

About