We Keep Coding

Using more than 1 parameter with one slider with datGUI in three.js

i use TreeJs to modelise a form and i want to move 2 parameter in the same slider i want to know if its possible :
like moving x position of two differents vertices at the same time and not only one.
I already use datGui to move one vertice but i want to move more than one with the same slider.
<script src="js/three.js"></script>
<script>
//camera
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
camera.position.set( 0, -2, 10);
camera.lookAt( 0, -2, 0 );
//rendu
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight);
document.body.appendChild( renderer.domElement );
//coté gauche---------------------------------------------
var material = new THREE.LineBasicMaterial( { color: 0xffffff } );
//trait A1 (haut vertical)
var a1 = new THREE.Geometry();
a1.vertices = [new THREE.Vector3(-2, 0, 0),
new THREE.Vector3(-2, 2, 0) ];
var A1 = new THREE.Line( a1, material );
//trait A2 (haut horizontal)
var a2 = new THREE.Geometry();
a2.vertices = [new THREE.Vector3( -2, 0, 0),
new THREE.Vector3(-4, 0, 0) ];
var A2 = new THREE.Line( a2, material );
//trait A3 (centre vertical)
var a3 = new THREE.Geometry();
a3.vertices.push(new THREE.Vector3( -4, 0, 0) );
a3.vertices.push(new THREE.Vector3(-4, -2, 0) );
var A3 = new THREE.Line( a3, material );
//trait A4 (bas horizontal)
var a4 = new THREE.Geometry();
a4.vertices.push(new THREE.Vector3( -4, -2, 0) );
a4.vertices.push(new THREE.Vector3(-2, -2, 0) );
var A4 = new THREE.Line( a4, material );
//trait A5 (bas horizontal)
var a5 = new THREE.Geometry();
a5.vertices.push(new THREE.Vector3( -2, -2, 0) );
a5.vertices.push(new THREE.Vector3(-2, -4, 0) );
var A5 = new THREE.Line( a5, material );
//render-------------------------------------------------
scene.add(A1,A2,A3,A4,A5);
var render = function () {
requestAnimationFrame( render );
camera.updateProjectionMatrix();
//maj refresh
A3.geometry.verticesNeedUpdate = true;
renderer.render(scene, camera);
};
render();
// dat gui----------------------------------------------
var gui = new dat.GUI();
var cameraGui = gui.addFolder("camera position");
cameraGui.add(camera.position, 'x').min(-20).max(20).step(0.25);
cameraGui.add(camera.position, 'y').min(-20).max(20).step(0.25);
cameraGui.add(camera.position, 'z').min(-20).max(20).step(0.25);
cameraGui.open();
var A3Gui = gui.addFolder("position a3");
A3Gui.add(A3.position,'x');
A3Gui.open();
</script>

Just use the built-in .onChange() function explained in their docs: https://workshop.chromeexperiments.com/examples/gui/#7--Events
var A3Gui = gui.addFolder("position a3");
var posSlider = A3Gui.add(A3.position,'x');
posSlider.onChange(function(value){
// Change all the things you want
// with 'value' as the new result
});

Rotate object around arbitrary axis in Three.js,just like the moon around the Earth.

I have tried many solutions of the question,but the object
still around his own axis without any translate.

You might want to add the object as the child of another object, and rotate that object instead...
var renderer = new THREE.WebGLRenderer();
var w = 300;
var h = 200;
renderer.setSize( w,h );
document.body.appendChild( renderer.domElement );
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(
45, // Field of view
w/h, // Aspect ratio
0.1, // Near
10000 // Far
);
camera.position.set( 15, 10, 15 );
camera.lookAt( scene.position );
controls = new THREE.OrbitControls(camera, renderer.domElement);
var light = new THREE.PointLight( 0x808080 );
light.position.set( 20, 20, 20 );
scene.add( light );
var light1 = new THREE.AmbientLight( 0x101010 );
light1.position.set( 20, 20, 20 );
scene.add( light1 );
var light2 = new THREE.PointLight( 0x808080 );
light2.position.set( -20, 20, -20 );
scene.add( light2 );
var light3 = new THREE.PointLight( 0x808080 );
light3.position.set( -20, -20, -20 );
scene.add( light3 );
var mkBody=(rad,color)=>{
var sphereGeom = new THREE.SphereGeometry(rad,16,16);
var material = new THREE.MeshLambertMaterial( { color: color } );
var mesh = new THREE.Mesh( sphereGeom, material );
return mesh;
}
var sun = mkBody(2,0xffee00)
scene.add( sun )
sun.material.emissive.set(0x808000)
var b1 = mkBody(0.7,0x80ffff)
b1.position.set(6,0,0)
sun.add( b1 )
var b2 = mkBody(0.2,0xeeeeee)
b2.position.set(1.1,0,0)
b1.add( b2 )
sun.onBeforeRender = function(){
this.rotation.y+=0.01
}
b1.onBeforeRender = function(){
this.rotation.y+=0.1
}
renderer.setClearColor( 0x404040, 1);
(function animate() {
requestAnimationFrame(animate);
controls.update();
renderer.render(scene, camera);
})();
<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>
Another option is to transform the geometry itself...
var renderer = new THREE.WebGLRenderer();
var w = 300;
var h = 200;
renderer.setSize( w,h );
document.body.appendChild( renderer.domElement );
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(
45, // Field of view
w/h, // Aspect ratio
0.1, // Near
10000 // Far
);
camera.position.set( 15, 10, 15 );
camera.lookAt( scene.position );
controls = new THREE.OrbitControls(camera, renderer.domElement);
var light = new THREE.PointLight( 0x808080 );
light.position.set( 20, 20, 20 );
scene.add( light );
var light1 = new THREE.AmbientLight( 0x101010 );
light1.position.set( 20, 20, 20 );
scene.add( light1 );
var light2 = new THREE.PointLight( 0x808080 );
light2.position.set( -20, 20, -20 );
scene.add( light2 );
var light3 = new THREE.PointLight( 0x808080 );
light3.position.set( -20, -20, -20 );
scene.add( light3 );
var mkBody=(rad,color)=>{
var sphereGeom = new THREE.SphereGeometry(rad,16,16);
var material = new THREE.MeshLambertMaterial( { color: color } );
var mesh = new THREE.Mesh( sphereGeom, material );
return mesh;
}
var sun = mkBody(2,0xffee00)
scene.add( sun )
sun.material.emissive.set(0x808000)
var b1 = mkBody(0.7,0x80ffff)
b1.position.set(6,0,0)
sun.add( b1 )
b1.updateMatrixWorld();
b1.geometry.applyMatrix(b1.matrixWorld); //Transform the actual geometry...
scene.add(b1); //Now reparent it to the scene
b1.position.set(0,0,0); //And reset its position...
sun.onBeforeRender = function(){
this.rotation.y+=0.01
}
b1.onBeforeRender = function(){
this.rotation.y+=0.1
}
renderer.setClearColor( 0x404040, 1);
(function animate() {
requestAnimationFrame(animate);
controls.update();
renderer.render(scene, camera);
})();
<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>

Threejs: WebGL 3D text to three.js ocean scene

I'm working with the three.js ocean scene and 3D canvas text. The 3D text is suppose to replace the location of the ball, but the text doesn't appear.
When I inspect elements, I only notice the canvas for the background rendering. How can both canvases- the background and 3D text- appear? How can I overlay a canvas on another?
What is another way to have 3D text over the water without using canvas or canvasrenderer.js for the 3D text?
Original code for Canvas 3D Text: https://github.com/mrdoob/three.js/blob/master/examples/canvas_geometry_text.html
JavaScript to combine both elements:
var container, stats;
var camera, scene, renderer;
var parameters = {
width: 2000,
height: 2000,
widthSegments: 250,
heightSegments: 250,
depth: 1500,
param: 4,
filterparam: 1
};
var waterNormals;
var group;
var targetRotation = 0;
var targetRotationOnMouseDown = 0;
var loader = new THREE.FontLoader();
loader.load( 'fonts/helvetiker_regular.typeface.json', function ( font ) {
} );
init();
animate();
function init( font ) {
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.set( 0, 150, 500 );
scene = new THREE.Scene();
// Get text from hash
var theText = "three.js";
var hash = document.location.hash.substr( 1 );
if ( hash.length !== 0 ) {
theText = hash;
}
var geometry0 = new THREE.TextGeometry( theText, {
font: font,
size: 80,
height: 20,
curveSegments: 2
});
geometry.computeBoundingBox();
var centerOffset = -0.5 * ( geometry.boundingBox.max.x - geometry.boundingBox.min.x );
var material0 = new THREE.MultiMaterial( [
new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff, overdraw: 0.5 } ),
new THREE.MeshBasicMaterial( { color: 0x000000, overdraw: 0.5 } )
] );
var mesh = new THREE.Mesh( geometry0, material0 );
mesh.position.x = centerOffset;
mesh.position.y = 100;
mesh.position.z = 50;
group = new THREE.Group();
group.add( mesh );
scene.add( group );
renderer = new THREE.CanvasRenderer();
renderer.setClearColor( 0xf0f0f0 );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
stats = new Stats();
container.appendChild( stats.dom );
//
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 55, window.innerWidth / window.innerHeight, 0.5, 3000000 );
camera.position.set( 2000, 750, 2000 );
controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.enablePan = false;
controls.minDistance = 1000.0;
controls.maxDistance = 5000.0;
controls.maxPolarAngle = Math.PI * 0.495;
controls.target.set( 0, 500, 0 );
scene.add( new THREE.AmbientLight( 0x444444 ) );
var light = new THREE.DirectionalLight( 0xffffbb, 1 );
light.position.set( - 1, 1, - 1 );
scene.add( light );
waterNormals = new THREE.TextureLoader().load( 'textures/waternormals.jpg' );
waterNormals.wrapS = waterNormals.wrapT = THREE.RepeatWrapping;
water = new THREE.Water( renderer, camera, scene, {
textureWidth: 512,
textureHeight: 512,
waterNormals: waterNormals,
alpha: 1.0,
sunDirection: light.position.clone().normalize(),
sunColor: 0xffffff,
waterColor: 0x001e0f,
distortionScale: 50.0,
} );
mirrorMesh = new THREE.Mesh(
new THREE.PlaneBufferGeometry( parameters.width * 500, parameters.height * 500 ),
water.material
);
mirrorMesh.add( water );
mirrorMesh.rotation.x = - Math.PI * 0.5;
scene.add( mirrorMesh );
// load skybox
var cubeMap = new THREE.CubeTexture( [] );
cubeMap.format = THREE.RGBFormat;
var loader = new THREE.ImageLoader();
loader.load( 'textures/skyboxsun25degtest.png', function ( image ) {
var getSide = function ( x, y ) {
var size = 1024;
var canvas = document.createElement( 'canvas' );
canvas.width = size;
canvas.height = size;
var context = canvas.getContext( '2d' );
context.drawImage( image, - x * size, - y * size );
return canvas;
};
cubeMap.images[ 0 ] = getSide( 2, 1 ); // px
cubeMap.images[ 1 ] = getSide( 0, 1 ); // nx
cubeMap.images[ 2 ] = getSide( 1, 0 ); // py
cubeMap.images[ 3 ] = getSide( 1, 2 ); // ny
cubeMap.images[ 4 ] = getSide( 1, 1 ); // pz
cubeMap.images[ 5 ] = getSide( 3, 1 ); // nz
cubeMap.needsUpdate = true;
} );
var cubeShader = THREE.ShaderLib[ 'cube' ];
cubeShader.uniforms[ 'tCube' ].value = cubeMap;
var skyBoxMaterial = new THREE.ShaderMaterial( {
fragmentShader: cubeShader.fragmentShader,
vertexShader: cubeShader.vertexShader,
uniforms: cubeShader.uniforms,
depthWrite: false,
side: THREE.BackSide
} );
var skyBox = new THREE.Mesh(
new THREE.BoxGeometry( 1000000, 1000000, 1000000 ),
skyBoxMaterial
);
scene.add( skyBox );
var geometry = new THREE.IcosahedronGeometry( 400, 4 );
for ( var i = 0, j = geometry.faces.length; i < j; i ++ ) {
geometry.faces[ i ].color.setHex( Math.random() * 0xffffff );
}
var material = new THREE.MeshPhongMaterial( {
vertexColors: THREE.FaceColors,
shininess: 100,
envMap: cubeMap
} );
}
//
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
water.material.uniforms.time.value += 1.0 / 60.0;
controls.update();
water.render();
renderer.render( scene, camera );
}

The first thing i notice is that you are calling the init(); animate(); functions before the loader has a chance to load the font ( and because of that you are not passing the font into the init function like the canvas_geometry_text example ).
I've pasted the code from the ocean example below ( with comments for how I modified it to work with the code from the canvas_geometry_text example ). I've tested this and it works
var container, stats;
var camera, scene, renderer;
var sphere;
var parameters = {
width: 2000,
height: 2000,
widthSegments: 250,
heightSegments: 250,
depth: 1500,
param: 4,
filterparam: 1
};
var waterNormals;
// 1.
// copy+paste this code from the canvas_geometry_text file
var loader = new THREE.FontLoader();
loader.load( 'fonts/helvetiker_regular.typeface.json', function ( font ) {
init( font );
animate();
} );
// 2.
// comment out these calls to init() and animate()
// these will be called in the loader's callback above instead
// init();
// animate();
// add 'font' parameter to init
function init( font ) {
container = document.createElement( 'div' );
document.body.appendChild( container );
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 55, window.innerWidth / window.innerHeight, 0.5, 3000000 );
camera.position.set( 2000, 750, 2000 );
controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.enablePan = false;
controls.minDistance = 1000.0;
controls.maxDistance = 5000.0;
controls.maxPolarAngle = Math.PI * 0.495;
controls.target.set( 0, 500, 0 );
scene.add( new THREE.AmbientLight( 0x444444 ) );
var light = new THREE.DirectionalLight( 0xffffbb, 1 );
light.position.set( - 1, 1, - 1 );
scene.add( light );
waterNormals = new THREE.TextureLoader().load( 'textures/waternormals.jpg' );
waterNormals.wrapS = waterNormals.wrapT = THREE.RepeatWrapping;
water = new THREE.Water( renderer, camera, scene, {
textureWidth: 512,
textureHeight: 512,
waterNormals: waterNormals,
alpha: 1.0,
sunDirection: light.position.clone().normalize(),
sunColor: 0xffffff,
waterColor: 0x001e0f,
distortionScale: 50.0,
} );
mirrorMesh = new THREE.Mesh(
new THREE.PlaneBufferGeometry( parameters.width * 500, parameters.height * 500 ),
water.material
);
mirrorMesh.add( water );
mirrorMesh.rotation.x = - Math.PI * 0.5;
scene.add( mirrorMesh );
// load skybox
var cubeMap = new THREE.CubeTexture( [] );
cubeMap.format = THREE.RGBFormat;
var loader = new THREE.ImageLoader();
loader.load( 'textures/skyboxsun25degtest.png', function ( image ) {
var getSide = function ( x, y ) {
var size = 1024;
var canvas = document.createElement( 'canvas' );
canvas.width = size;
canvas.height = size;
var context = canvas.getContext( '2d' );
context.drawImage( image, - x * size, - y * size );
return canvas;
};
cubeMap.images[ 0 ] = getSide( 2, 1 ); // px
cubeMap.images[ 1 ] = getSide( 0, 1 ); // nx
cubeMap.images[ 2 ] = getSide( 1, 0 ); // py
cubeMap.images[ 3 ] = getSide( 1, 2 ); // ny
cubeMap.images[ 4 ] = getSide( 1, 1 ); // pz
cubeMap.images[ 5 ] = getSide( 3, 1 ); // nz
cubeMap.needsUpdate = true;
} );
var cubeShader = THREE.ShaderLib[ 'cube' ];
cubeShader.uniforms[ 'tCube' ].value = cubeMap;
var skyBoxMaterial = new THREE.ShaderMaterial( {
fragmentShader: cubeShader.fragmentShader,
vertexShader: cubeShader.vertexShader,
uniforms: cubeShader.uniforms,
depthWrite: false,
side: THREE.BackSide
} );
var skyBox = new THREE.Mesh(
new THREE.BoxGeometry( 1000000, 1000000, 1000000 ),
skyBoxMaterial
);
scene.add( skyBox );
// 3.
// comment out all the sphere mesh code
// var geometry = new THREE.IcosahedronGeometry( 400, 4 );
// for ( var i = 0, j = geometry.faces.length; i < j; i ++ ) {
// geometry.faces[ i ].color.setHex( Math.random() * 0xffffff );
// }
// var material = new THREE.MeshPhongMaterial( {
// vertexColors: THREE.FaceColors,
// shininess: 100,
// envMap: cubeMap
// } );
// sphere = new THREE.Mesh( geometry, material );
// scene.add( sphere );
// 4.
// copy+paste the text mesh code from canvas_geometry_text
var theText = "Hello three.js! :)";
var hash = document.location.hash.substr( 1 );
if ( hash.length !== 0 ) {
theText = hash;
}
var geometry = new THREE.TextGeometry( theText, {
font: font,
size: 80,
height: 20,
curveSegments: 2
});
geometry.computeBoundingBox();
var centerOffset = -0.5 * ( geometry.boundingBox.max.x - geometry.boundingBox.min.x );
var material = new THREE.MultiMaterial( [
new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff, overdraw: 0.5 } ),
new THREE.MeshBasicMaterial( { color: 0x000000, overdraw: 0.5 } )
] );
var mesh = new THREE.Mesh( geometry, material );
mesh.position.x = centerOffset;
mesh.position.y = 100;
mesh.position.z = 0;
mesh.rotation.x = 0;
mesh.rotation.y = Math.PI * 2;
group = new THREE.Group();
group.add( mesh );
scene.add( group );
}
//
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
var time = performance.now() * 0.001;
// 6.
// comment out the sphere animation code
// sphere.position.y = Math.sin( time ) * 500 + 250;
// sphere.rotation.x = time * 0.5;
// sphere.rotation.z = time * 0.51;
// 7.
// copy+paste the sphere animation code above
// but replace 'sphere' with 'group'
group.position.y = Math.sin( time ) * 500 + 250;
group.rotation.x = time * 0.5;
group.rotation.z = time * 0.51;
water.material.uniforms.time.value += 1.0 / 60.0;
controls.update();
water.render();
renderer.render( scene, camera );
}

Modifying curves's arc in a path

I have a simple box following a path created using the CatmullRomCurve3.
I'd like to have all the curves/edges to be more sharp. But I couldn't figure how to achieve this. Also not sure if I'm using the right type of curve for making paths.
<script src="https://ajax.googleapis.com/ajax/libs/threejs/r76/three.min.js"></script>
<header>
<style>
body canvas{
width: 100%,
height: 100%;
margin:0;
padding:0;
}
</style>
</header>
<body>
</body>
<script>
var renderer, camera, scene, controls, box, path, speed = 0,
path_progress = 0,
axis = new THREE.Vector3(),
tangent = new THREE.Vector3(),
up = new THREE.Vector3(1, 0, 0);
function initRenderer(){
renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize( window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
renderer.setClearColor(0x264d73, 1);
}
function initScene(){
scene = new THREE.Scene();
}
function initCamera(){
camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 10000);
camera.position.set(0, 40, 40);
camera.lookAt(scene.position);
scene.add(camera);
//controls = new THREE.OrbitControls( camera , renderer.domElement );
}
function initLights(){
var aLight = new THREE.AmbientLight(0xD0D0D0, 0.5);
scene.add(aLight);
}
////// Initializers ////////////////////////
function add_path(){
path = new THREE.CatmullRomCurve3( [
new THREE.Vector3( 3.4000015258789062, 0, 3.4000015258789062 ),
new THREE.Vector3( 10.600006103515625, 0, 3.4000015258789062 ),
new THREE.Vector3( 10.600006103515625, 0, 10.600006103515625 ),
new THREE.Vector3( 3.4000015258789062, 0, 10.600006103515625 )
]);
path.closed = true;
speed = 0.4 / path.getLength();
var material = new THREE.LineBasicMaterial({
color: 0xff00f0,
});
var geometry = new THREE.Geometry();
var splinePoints = path.getPoints(20);
for (var i = 0; i < splinePoints.length; i++) {
geometry.vertices.push(splinePoints[i]);
}
var line = new THREE.Line(geometry, material);
scene.add(line);
add_box(splinePoints[0]);
}
function add_box( pos ){
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var materials = [
new THREE.MeshBasicMaterial({
color: 0x80bfff,
}),
new THREE.MeshLambertMaterial({
color: 0x80bfff
}),
new THREE.MeshLambertMaterial({
color: 0x001a33
}),
new THREE.MeshLambertMaterial({
color: 0x80bfff
}),
new THREE.MeshLambertMaterial({
color: 0x80bfff
}),
new THREE.MeshLambertMaterial( {
color: 0x80bfff
})
];
var material = new THREE.MeshFaceMaterial( materials );
box = new THREE.Mesh( geometry, material );
box.scale.set( 1, 1, 1 );
box.position.copy( pos ); //// x,y,z ////
box.rotation.set( 0 , 0 , 0 );
scene.add( box );
camera.position.copy( box.position )
camera.position.x += 20;
camera.position.y += 10;
camera.lookAt(box.position);
setInterval( function(){
follow_path();
}, 100);
}
function follow_path(){
if( path !== null ){
if ( path_progress <= 1) {
camera.lookAt(box.position);
var pos = this.path.getPointAt( this.path_progress );
box.position.copy( pos );
tangent = this.path.getTangentAt( this.path_progress ).normalize();
axis.crossVectors( this.up, this.tangent).normalize();
var radians = Math.acos( this.up.dot(this.tangent) );
box.quaternion.setFromAxisAngle( this.axis, radians );
path_progress += speed;
}else{
path_progress = 0;
}
}
}
///// Mouse events ////////
///// Main /////////
function main(){
//console.log(" Initializing: ");
initRenderer(window.innerWidth, window.innerHeight );
initScene();
initCamera(window.innerWidth, window.innerHeight );
initLights();
add_path();
animate();
}
function animate(){
window.requestAnimationFrame( animate );
render_all();
}
function render_all(){
renderer.render(scene, camera);
}
main();
</script>

It seems that setting the path type = 'catmullrom' and setting the tension=0.1 solved the problem.
<script src="https://ajax.googleapis.com/ajax/libs/threejs/r76/three.min.js"></script>
<header>
<style>
body canvas{
width: 100%,
height: 100%;
margin:0;
padding:0;
}
</style>
</header>
<body>
</body>
<script>
var renderer, camera, scene, controls, box, path, speed = 0,
path_progress = 0,
axis = new THREE.Vector3(),
tangent = new THREE.Vector3(),
up = new THREE.Vector3(1, 0, 0);
function initRenderer(){
renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize( window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
renderer.setClearColor(0x264d73, 1);
}
function initScene(){
scene = new THREE.Scene();
}
function initCamera(){
camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 10000);
camera.position.set(0, 40, 40);
camera.lookAt(scene.position);
scene.add(camera);
//controls = new THREE.OrbitControls( camera , renderer.domElement );
}
function initLights(){
var aLight = new THREE.AmbientLight(0xD0D0D0, 0.5);
scene.add(aLight);
}
////// Initializers ////////////////////////
function add_path(){
path = new THREE.CatmullRomCurve3( [
new THREE.Vector3( 3.4000015258789062, 0, 3.4000015258789062 ),
new THREE.Vector3( 10.600006103515625, 0, 3.4000015258789062 ),
new THREE.Vector3( 10.600006103515625, 0, 10.600006103515625 ),
new THREE.Vector3( 3.4000015258789062, 0, 10.600006103515625 )
]);
path.closed = true;
path.type = "catmullrom";
path.tension = 0.1;
speed = 0.4 / path.getLength();
var material = new THREE.LineBasicMaterial({
color: 0xff00f0,
});
var geometry = new THREE.Geometry();
var splinePoints = path.getPoints(20);
for (var i = 0; i < splinePoints.length; i++) {
geometry.vertices.push(splinePoints[i]);
}
var line = new THREE.Line(geometry, material);
scene.add(line);
add_box(splinePoints[0]);
}
function add_box( pos ){
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var materials = [
new THREE.MeshBasicMaterial({
color: 0x80bfff,
}),
new THREE.MeshLambertMaterial({
color: 0x80bfff
}),
new THREE.MeshLambertMaterial({
color: 0x001a33
}),
new THREE.MeshLambertMaterial({
color: 0x80bfff
}),
new THREE.MeshLambertMaterial({
color: 0x80bfff
}),
new THREE.MeshLambertMaterial( {
color: 0x80bfff
})
];
var material = new THREE.MeshFaceMaterial( materials );
box = new THREE.Mesh( geometry, material );
box.scale.set( 1, 1, 1 );
box.position.copy( pos ); //// x,y,z ////
box.rotation.set( 0 , 0 , 0 );
scene.add( box );
camera.position.copy( box.position )
camera.position.x += 20;
camera.position.y += 10;
camera.lookAt(box.position);
setInterval( function(){
follow_path();
}, 100);
}
function follow_path(){
if( path !== null ){
if ( path_progress <= 1) {
camera.lookAt(box.position);
var pos = this.path.getPointAt( this.path_progress );
box.position.copy( pos );
tangent = this.path.getTangentAt( this.path_progress ).normalize();
axis.crossVectors( this.up, this.tangent).normalize();
var radians = Math.acos( this.up.dot(this.tangent) );
box.quaternion.setFromAxisAngle( this.axis, radians );
path_progress += speed;
}else{
path_progress = 0;
}
}
}
///// Mouse events ////////
///// Main /////////
function main(){
//console.log(" Initializing: ");
initRenderer(window.innerWidth, window.innerHeight );
initScene();
initCamera(window.innerWidth, window.innerHeight );
initLights();
add_path();
animate();
}
function animate(){
window.requestAnimationFrame( animate );
render_all();
}
function render_all(){
renderer.render(scene, camera);
}
main();
</script>

how to convert 2d drawings to 3drawing using three.js/webgl

Hi i am trying to draw the 2d objects in the canvas using js.if click the button it will change to 3d object in another canvas which is in same page.
I tried using three.js.if i want draw 3d object,i am giving the points manually in the code.but i dont know how to convert into 3d coordinates. please suggest any ideas
this is my code for drawing geomentry plan
function init()
{
// SCENE
scene = new THREE.Scene();
// CAMERA
var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight;
var VIEW_ANGLE = 45, ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT, NEAR = 0.1, FAR = 20000;
camera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR);
scene.add(camera);
camera.position.set(0,150,400);
camera.lookAt(scene.position);
// RENDERER
if ( Detector.webgl )
renderer = new THREE.WebGLRenderer( {antialias:true} );
else
renderer = new THREE.CanvasRenderer();
renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
container = document.getElementById( 'ThreeJS' );
container.appendChild( renderer.domElement );
// EVENTS
THREEx.WindowResize(renderer, camera);
THREEx.FullScreen.bindKey({ charCode : 'm'.charCodeAt(0) });
// CONTROLS
controls = new THREE.OrbitControls( camera, renderer.domElement );
// STATS
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.bottom = '0px';
stats.domElement.style.zIndex = 100;
container.appendChild( stats.domElement );
// LIGHT
var light = new THREE.PointLight(0xffffff);
light.position.set(0,250,0);
scene.add(light);
// FLOOR
var floorTexture = new THREE.ImageUtils.loadTexture( 'images/checkerboard.jpg' );
floorTexture.wrapS = floorTexture.wrapT = THREE.RepeatWrapping;
floorTexture.repeat.set( 10, 10 );
var floorMaterial = new THREE.MeshBasicMaterial( { map: floorTexture, side: THREE.DoubleSide } );
var floorGeometry = new THREE.PlaneGeometry(1000, 1000, 10, 10);
var floor = new THREE.Mesh(floorGeometry, floorMaterial);
floor.position.y = -0.5;
floor.rotation.x = Math.PI / 2;
scene.add(floor);
// SKYBOX/FOG
var skyBoxGeometry = new THREE.CubeGeometry( 10000, 10000, 10000 );
var skyBoxMaterial = new THREE.MeshBasicMaterial( { color: 0x9999ff, side: THREE.BackSide } );
var skyBox = new THREE.Mesh( skyBoxGeometry, skyBoxMaterial );
scene.fog = new THREE.FogExp2( 0x9999ff, 0.00025 );
var starPoints = [];
starPoints.push( new THREE.Vector2 ( 10, 50 ) );
starPoints.push( new THREE.Vector2 ( 50, 100 ) );
starPoints.push( new THREE.Vector2 ( 100, 150 ) );
starPoints.push( new THREE.Vector2 ( 150, 200 ) );
/*starPoints.push( new THREE.Vector2 ( 30, -50 ) );
starPoints.push( new THREE.Vector2 ( 0, -20 ) );
starPoints.push( new THREE.Vector2 ( -30, -50 ) );
starPoints.push( new THREE.Vector2 ( -20, -10 ) );
starPoints.push( new THREE.Vector2 ( -40, 10 ) );
starPoints.push( new THREE.Vector2 ( -10, 10 ) );*/
var starShape = new THREE.Shape( starPoints );
var extrusionSettings = {
size: 30, height: 4, curveSegments: 3,
bevelThickness: 1, bevelSize: 2, bevelEnabled: false,
material: 0, extrudeMaterial: 1
};
var starGeometry = new THREE.ExtrudeGeometry( starShape, extrusionSettings );
var materialFront = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
var materialSide = new THREE.MeshBasicMaterial( { color: 0xff8800 } );
var materialArray = [ materialFront, materialSide ];
var starMaterial = new THREE.MeshFaceMaterial(materialArray);
var star = new THREE.Mesh( starGeometry, starMaterial );
star.position.set(0,50,0);
scene.add(star);
// add a wireframe to model
var wireframeTexture = new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, transparent: true } );
var star = new THREE.Mesh( starGeometry, wireframeTexture );
star.position.set(0,50,0);
scene.add(star);
}
function animate()
{
requestAnimationFrame( animate );
render();
update();
}
function update()
{
if ( keyboard.pressed("z") )
{
// do something
}
controls.update();
stats.update();
}
function render()
{
renderer.render( scene, camera );
}

I want to help,
You can visit this :
http://stemkoski.github.io/Three.js/Extrusion.html
The method is:
var extrusionSettings = {
size: 30, height: 4, curveSegments: 3,
bevelThickness: 1, bevelSize: 2, bevelEnabled: false,
material: 0, extrudeMaterial: 1
};
var starGeometry = new THREE.ExtrudeGeometry( starShape, extrusionSettings );

Did you mean creating a 3d point from a constructor?
If so, it is just one line in three.js.
new THREE.Vector3( x, y, z );