Class: MyThree

MyThree~MyThree(createXDobjectsopt, optionsopt)

new MyThree(createXDobjectsopt, optionsopt)

I use MyThree in my projects for displaying of my 3D objects in the canvas.
Parameters:
Name Type Attributes Description
createXDobjects createXDobjects <optional>
callback creates my 3D objects.
options Object <optional>
See Options. The following options are available:
Properties
Name Type Attributes Default Description
elContainer HTMLElement | string <optional>
document.getElementById( "containerDSE" ) or a new div element, child of body If an HTMLElement, then a HTMLElement, contains a canvas and HTMLElement with id="iframe-goes-in-here" for gui.
If a string, then is id of the HTMLElement.
Examples of the elContainer:
<div class="container" id="containerDSE">
	<canvas id="canvas" style="background-color:black"></canvas>
</div>;
or
<div class="container" id="containerDSE">
</div>
New canvas is created inside of the div tag.
camera THREE.PerspectiveCamera <optional>
PerspectiveCamera.
Properties
Name Type Attributes Default Description
position THREE.Vector3 <optional>
new THREE.Vector3( 0.4, 0.4, 2 ) camera position.
scale THREE.Vector3 <optional>
new THREE.Vector3( 1, 1, 1 ) camera scale.
fov Number <optional>
70 Camera frustum vertical field of view. See fov.
aspect Number <optional>
window.innerWidth / window.innerHeight Camera frustum aspect ratio. See aspect.
near Number <optional>
0.01 Camera frustum near plane. See near.
far Number <optional>
10 Camera frustum far plane. See far.
scene THREE.Scene <optional>
Scene.
Properties
Name Type Attributes Default Description
position THREE.Vector3 <optional>
new THREE.Vector3( 0, 0, 0 ) scene position.
orbitControls boolean | object <optional>
false - do not add the OrbitControls. Allow the camera to orbit around a target.
or
Properties
Name Type Attributes Default Description
enableRotate boolean <optional>
true Enable or disable horizontal and vertical rotation of the camera.
axesHelper boolean <optional>
false - do not add the AxesHelper.
canvasMenu boolean <optional>
false - do not create a canvasMenu instance.
stereoEffect boolean <optional>
false - do not use StereoEffect.
pointLight boolean | Object <optional>
false - do not use pointLight.
Properties
Name Type Attributes Description
pointLight1 Object <optional>
First pointLight settings.
Properties
Name Type Attributes Description
position THREE.Vector3 <optional>
pointLight position.
pointLight2 Object <optional>
Second pointLight settings.
Properties
Name Type Attributes Description
position THREE.Vector3 <optional>
pointLight position.
spriteText object <optional>
spriteText options. See SpriteText options parameter for details.
player boolean <optional>
false - do not create a Player instance.
playerOptions object <optional>
See settings.options.playerOptions parameter of the Player.
getLanguageCode function | string <optional>
language code of your browser Your custom getLanguageCode() function or language code string.
returns the "primary language" subtag of the language version of the browser.
Examples: "en" - English language, "ru" Russian.
See the rfc4646 2.1 Syntax for details.
You can import { getLanguageCode } from '../../commonNodeJS/master/lang.js';
Currently available follow language code strings:
	"en" - English language,
	"ru" - Russian.
dat object | boolean <optional>
use dat-gui JavaScript Controller Library. dat.gui.

false - do not use dat-gui.

Properties
Name Type Attributes Description
dat GUI dat.GUI().
gui GUI <optional>
new dat.GUI() instance.

undefined - do not use dat-gui JavaScript Controller Library. dat.gui.

parent HTMLtag <optional>
Parent of the canvas. Use if you want to see dat.gui inside of the canvas if canvas is not full screen.
cookie boolean <optional>
false - do not save to cookie all user settings
cookieName string <optional>
Name of the cookie.
orbitControlsGui boolean <optional>
false - do not adds a OrbitControlsGui into dat.gui.
axesHelperGui boolean <optional>
false - do not adds a AxesHelperGui into dat.gui.
playerGui boolean <optional>
false - do not adds a Player controllers into dat.gui.
playController boolean <optional>
false - do not adds a PlayController into dat.gui.
stereoEffectsGui boolean <optional>
false - do not adds Stereo Effects folder into dat.gui.
guiSelectPoint boolean | Object <optional>
false - do not displays the Select Point. dat.gui based graphical user interface for select a point from the mesh.
Properties
Name Type Attributes Description
point function <optional>
Callback function to create custom controllers for each point of selected mesh with custom controllers.
parameter options See options parameter above.
parameter dat dat.GUI().
parameter fParent parent folder.
example point: function ( options, dat, fMesh ) { return new FermatSpiral.gui( options, dat, fMesh ); },
boDisplayVerticeID boolean <optional>
true - display on the scene the point ID near to the point.
guiFrustumPoints boolean <optional>
false - do not adds Frustum Points folder into dat.gui.
cameraGui boolean <optional>
false - do not adds Camera folder into dat.gui.
moveScene object <optional>
false - do not displays the move group gui.
spriteTextGui object <optional>
false - do not displays the SpriteTextGui.
folderPoint object <optional>
false - do not adds a Point settings folder.
pointLightGui object <optional>
false - do not adds a PointLight folder.
cameraTarget object <optional>
camera looking at selected point during playing. See the cameraTarget parameter of the Player.cameraTarget.init(...) function for details.
frustumPoints object <optional>
Creates a FrustumPoints instance. See settings.options.frustumPoints parameter of FrustumPoints class.
palette MyThree.ColorPicker.palette | boolean | number | String <optional>
true Points сolor.
MyThree.ColorPicker.palette - is new ColorPicker.palette( ... )
See ColorPicker for details.
boolean: true - new ColorPicker.palette( { palette: ColorPicker.paletteIndexes.BGYW } );
number: is MyThree.ColorPicker.paletteIndexes. See ColorPicker.paletteIndexes for details.
String - color name. See list of available color names in the _colorKeywords object in the Color.js file. Example: 'red'.
See Options.setPalette.
canvas object <optional>
canvas properties
Properties
Name Type Attributes Description
width number <optional>
width of the canvas
height number <optional>
height of the canvas
fullScreen boolean <optional>
default is full screen. false - no full screen
noButtonFullScreen boolean <optional>
true - hide Full Screen button. default - Full Screen button is visible.
a number <optional>
1 Can be use as 'a' parameter of the Function. See options.a parameter of the Player.execFunc.
b number <optional>
0 Can be use as 'b' parameter of the Function. See options.b parameter of the Player.execFunc.
point object <optional>
point settings. See Options.point for details.
stats object <optional>
Use JavaScript Performance Monitor. stats .
scales object <optional>
axes scales. See options.scales of the AxesHelper.
Properties
Name Type Attributes Description
w object <optional>
w axis options. See Options.setW(options) options.scales.w for details.
controllers object <optional>
Controllers list.
User can see and edit some parameters on the web page.
See controllers of the Options.
Properties
Name Type Attributes Description
t Object <optional>
current Player time.
Properties
Name Type Attributes Default Description
controller HTMLElement | string <optional>
'time' input element of current Player time or id of the time input element.
elName HTMLElement | string <optional>
'tName' span element of the Player time name. See settings.options.playerOptions.name parameter of Player
or id of the span element.
player Object <optional>
Player's buttons on the web page. See player.createControllersButtons(options) for details.
Properties
Name Type Attributes Default Description
prev HTMLElement | string <optional>
'prev' input element of the button type. Go to previous animation scene.
or element id.
play HTMLElement | string <optional>
'play' input element of the button type. Start/stop of the playing.
or element id.
next HTMLElement | string <optional>
'next' input element of the button type. Go to next animation scene.
or element id.
onSelectScene event <optional>
New time of the Player.
title string <optional>
text in the top left corner of the canvas.
Source:

Namespaces

ColorPicker
getWorldPosition
Intersections
limitAngles
MyPoints
Options
Player
StereoEffect
three

Methods

setSize(width, height)

Sets the size of the canvas
Parameters:
Name Type Description
width number | object width of the canvas.
If width is object, followed keys is available:
Properties
Name Type Description
width number width of the canvas
height number height of the canvas
height number height of the canvas
Source: