Home

Index

How to use the Scene function from three

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

three.Scene is a class in the Three.js library that represents a 3D scene and provides a container for all objects that need to be rendered.

SSAAChunkedRender.js

74
75
76
77
78
79
80
81
82
83
    format: THREE.RGBAFormat,
    stencilBuffer: true,
});

const camera2 = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
const scene2 = new THREE.Scene();
const quad2 = new THREE.Mesh(new THREE.PlaneBufferGeometry(2, 2), copyMaterial);

quad2.frustumCulled = false;
scene2.add(quad2);

119

813

Scene.js

GitHub: K3D-tools/K3D-jupyter

601
602
603
604
605
606
607
608
609
this.headLight.position.set(0, 0, 1);
this.fillLight.position.set(-0.25, -1, 1.0);
this.backLight.position.set(-2.5, 0.4, -1);

this.scene = new THREE.Scene();
this.gridScene = new THREE.Scene();

this.axesHelper.scene = new THREE.Scene();
this.K3DObjects = new THREE.Group();

116

804

+ 2 other calls in file

How does three.Scene work?

three.Scene is a class in the Three.js library that represents a 3D scene in which 3D objects can be added and rendered, and it provides functionality for setting up and managing lights, cameras, and other scene-related elements. When creating a new Three.js project, the first step is often to create a Scene instance, onto which all other objects and elements will be added.

Volume.js

GitHub: K3D-tools/K3D-jupyter

208
209
210
211
212
213
214
215
216
217

/*
    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(

115

803

index.js

GitHub: JackGit/xplan

115
116
117
118
119
120
121
122
123
124
  container.appendChild(renderer.domElement)
  this.renderer = renderer
}

_createOutGlow () {
  this.blurScene = new THREE.Scene()
  this.glowGroup = Glow.createOuterGlow()
  this.blurScene.add(this.glowGroup)

  let blurRenderTarget = new THREE.WebGLRenderTarget(this.width, this.height, {

280

+ 3 other calls in file

Ai Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import * as THREE from "three";

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

// create a geometry
const geometry = new THREE.BoxGeometry(1, 1, 1);

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

// create a mesh
const cube = new THREE.Mesh(geometry, material);

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

This code creates a green cube and adds it to the scene, which can then be rendered with a three.Renderer.

simulator.js

GitHub: edankwan/hyper-mix

48
49
50
51
52
53
54
55
56
57
// if ( !gl.getExtension( 'EXT_blend_minmax' )) {
//     alert( 'No EXT_blend_minmax support!' );
//     // return;
// }

_scene = new THREE.Scene();
_camera = new THREE.Camera();
_camera.position.z = 1;

_copyShader = new THREE.RawShaderMaterial({

217

+ 13 other calls in file

main.js

GitHub: wkentaro/morefusion

3
4
5
6
7
8
9
10
11
12
require('three/examples/js/loaders/MTLLoader');
require('three/examples/js/controls/OrbitControls');

robotic_top_down = {};

var scene = new THREE.Scene();
scene.background = new THREE.Color(0xeeeeee);

robotic_top_down.resetCamera = function() {
  camera.position.set(-0.1, 0, 1.4);

209

main.js

GitHub: kentywang/Agamari

39
40
41
42
43
44
45
46
47
48
};

let { players, food } = store.getState();

// initialize THREE scene, camera, renderer
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(65,
                                     window.innerWidth / window.innerHeight,
                                     1,
                                     2500);

+ 15 other calls in file

README.md?plain=1

GitHub: akira-cn/node-canvas-webgl

12
13
14
15
16
17
18
19
20
const {createCanvas} = require('../lib');

const width = 512,
  height = 512;

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);

const canvas = createCanvas(width, height);

fbo.js

GitHub: edankwan/touch-leap-motion

44
45
46
47
48
49
50
51
52
53
for(var i = 0, len = hand.fingerBones.length; i < len; i++) {
    _data.push(hand.fingerBones[i].outputMatrix);
}


_fboScene = new THREE.Scene();
_fboCamera = new THREE.Camera();
_fboCamera.position.z = 1;

_copyShader = new THREE.ShaderMaterial({

index.js

GitHub: maxogden/stl-obj-viewer

70
71
72
73
74
75
76
77
78
var height = 500

camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 10000)
camera.position.z = 500

scene = new THREE.Scene()

scene.add(camera)
material = new THREE.MeshLambertMaterial({color: 0xCCCCCC, wireframe: false})

+ 14 other calls in file

simulate.js

GitHub: cfry/dde

179
180
181
182
183
184
185
186
187
188
sim.enable_rendering = false
sim.renderFrozen = false;
sim.renderSlowed = false;
//for organization: https://discoverthreejs.com/book/first-steps/lights-color-action/
sim.container = sim_graphics_pane_id //a div that contains a canvas
sim.scene  = new THREE.Scene();
sim.scene.name = "scene"
sim.scene.background = new THREE.Color( 0xBBBBBB ) // 0x000000black is the default
createRenderer()
createCamera()

index.js

GitHub: shrekshao/ParticleProjector

208
209
210
211
212
213
214
215
216
// scene.add( pointMesh );



// background scene
backgroundScene = new THREE.Scene();
// var backgroundDirectionalLight = new THREE.DirectionalLight( 0xffffff );
// backgroundDirectionalLight.position.set( 0, 0, -1 ).normalize();
// backgroundScene.add( backgroundDirectionalLight );

+ 5 other calls in file

Simulation.js

GitHub: shrekshao/ParticleProjector

134
135
136
137
138
139
140
141
142


// scene: nothing fancy
// just a full screen quad
// TODO: maybe a triangle to avoid aliasing on the edge
var _scene = new THREE.Scene();

var _plane = new THREE.PlaneBufferGeometry( 2.0, 2.0 );
var _quad = new THREE.Mesh( _plane, _simulationMaterial );

+ 9 other calls in file

shark_viewer.js

GitHub: JaneliaSciComp/SharkViewer

922
923
924
925
926
927
928
929
930
931

const axesCamera = new THREE.PerspectiveCamera( 50, CANVAS_WIDTH / CANVAS_HEIGHT, 1, 1000 );
axesCamera.up = this.camera.up; // important!
this.axesCamera = axesCamera;

const axesScene = new THREE.Scene();
const axesPos = new THREE.Vector3( 0,0,0 );
axesScene.add( new THREE.ArrowHelper( new THREE.Vector3( 1,0,0 ), axesPos, 60, 0xFF0000, 20, 10 ) );
axesScene.add( new THREE.ArrowHelper( new THREE.Vector3( 0,1,0 ), axesPos, 60, 0x00FF00, 20, 10 ) );
axesScene.add( new THREE.ArrowHelper( new THREE.Vector3( 0,0,1 ), axesPos, 60, 0x0000FF, 20, 10 ) );

+ 11 other calls in file

GPUPickerHelper.js

GitHub: TilCreator/storyboarder

24
25
26
27
28
29
30
31
32
33
        depthWrite: true,
        depthPacking: THREE.RGBADepthPacking,
        side: THREE.FrontSide,
        blending: THREE.NoBlending
    });
this.depthScene = new THREE.Scene();
this.depthScene.overrideMaterial = this.depthMaterial;
this.depthScene.needsUpdate = true;
this.depthScene.autoUpdate = true;
this.reusableVector = new THREE.Vector3();

268

cardboard-distorter.js

GitHub: arturitu/webvr-template

78
79
80
81
82
83
84
85
86
87
  vertexShader: shader.vertexShader,
  fragmentShader: shader.fragmentShader
});

this.camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
this.scene  = new THREE.Scene();
this.quad = new THREE.Mesh(new THREE.PlaneBufferGeometry(2, 2), null);
this.scene.add(this.quad);

this.render = function(renderFunc, buffer) {

+ 9 other calls in file

vr-template.js

GitHub: OasisProject/WebVR-Template

24
25
26
27
28
29
30
31
32
33

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

// Create a three.js scene.
scene = new three.Scene();4

//var bodyObject = new THREE.Object3D();

// Create a three.js camera.

+ 9 other calls in file

client.js

GitHub: scenevr/client

160
161
162
163
164
165
166
167
168
169
Client.prototype.addEditor = function () {
  this.editor = new Editor(this);
};

Client.prototype.createScene = function () {
  this.setScene(new THREE.Scene());
};

Client.prototype.setScene = function (scene) {
  this.scene = scene;

+ 7 other calls in file

PBVRenderer.js

GitHub: nagyist/PBVR-client

23
24
25
26
27
28
29
30
31
32
const camera = new THREE.PerspectiveCamera(45, 1, 1, 1000);
camera.position.z = 70;

this.geometries = _.range(N).map(i => new THREE.BufferGeometry());
this.materials = _.range(N).map(i => this.getShaderMaterialInstance());
this.scenes = _.range(N).map(i => new THREE.Scene());

this.postProcess(camera);

this.animate = this.animate.bind(this);

+ 9 other calls in file

init.js

GitHub: ykob/sketch-threejs

16
17
18
19
20
21
22
23
24
  antialias: false,
  canvas: canvas,
});
const renderBack = new THREE.WebGLRenderTarget(document.body.clientWidth, window.innerHeight);
const scene = new THREE.Scene();
const sceneBack = new THREE.Scene();
const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
const cameraBack = new THREE.PerspectiveCamera(45, document.body.clientWidth / window.innerHeight, 1, 10000);
const clock = new THREE.Clock();

259

+ 3 other calls in file

Other functions in three

Sorted by popularity

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

Other popular packages:

Home

About