I'm working on a little side project and I'm not understanding how to properly render the LatheGeometry shape in three.js. I've tried with the other shapes and I'm able to manipulate those without much trouble. Here is my code (pretty much the starter example from the docs):
var scene = new THREE.Scene();
var points = [];
for ( var i = 0; i < 10; i ++ ) {
points.push( new THREE.Vector2( Math.sin( i * 0.2 ) * 10 + 5, ( i - 5 ) * 2 ) );
}
var geometry = new THREE.LatheBufferGeometry( points );
var material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
var lathe = new THREE.Mesh( geometry, material );
var camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
scene.add( lathe );
camera.position.z = 5;
Related
i would like to load a image in my 360 degree Scene but it dosen't work.
My Code:
<script>
var controls, camera, scene, renderer, element;
var container;
var sceneCube;
init();
animate();
function init() {
// CAMERAS
camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 100000 );
camera.position.set( 0, 0, 1000 );
cameraCube = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 100000 );
//
renderer = new THREE.WebGLRenderer();
renderer.autoClear = false;
renderer.setSize( window.innerWidth, window.innerHeight );
element = renderer.domElement;
container = document.getElementById('webglviewer');
container.appendChild(element);
//
controls = new THREE.OrbitControls( camera, element );
controls.noPan = true;
controls.noZoom = true;
// SCENE
scene = new THREE.Scene();
sceneCube = new THREE.Scene();
// Textures
var r = "textures/cube/Bridge2/";
var urls = [ r + "face_4_2048.jpg", r + "face_2_2048.jpg",
r + "face_6_2048.jpg", r + "face_5_2048.jpg",
r + "face_1_2048.jpg", r + "face_3_2048.jpg" ];
textureCube = THREE.ImageUtils.loadTextureCube( urls );
textureCube.format = THREE.RGBFormat;
textureCube.mapping = THREE.CubeReflectionMapping;
// Materials
var cubeShader = THREE.ShaderLib[ "cube" ];
var cubeMaterial = new THREE.ShaderMaterial( {
fragmentShader: cubeShader.fragmentShader,
vertexShader: cubeShader.vertexShader,
uniforms: cubeShader.uniforms,
depthWrite: true,
side: THREE.BackSide
} );
cubeMaterial.uniforms[ "tCube" ].value = textureCube;
// Skybox
cubeMesh = new THREE.Mesh( new THREE.BoxGeometry( 100, 100, 100 ), cubeMaterial );
sceneCube.add( cubeMesh );
var materials = THREE.ImageUtils.loadTexture('badge.png');
myImg = new THREE.Mesh(
new THREE.BoxGeometry( 562, 562, 562, 1, 1, 1 ),
new THREE.MeshFaceMaterial( materials ) );
sceneCube.add( myImg );
//INIT END
}
function onWindowResize() {
var width = container.offsetWidth;
var height = container.offsetHeight;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
cameraCube.aspect = window.innerWidth / window.innerHeight;
cameraCube.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
//
function animate() {
requestAnimationFrame( animate );
render();
controls.update();
}
function render() {
var timer = -0.0002 * Date.now();
camera.lookAt( scene.position );
cameraCube.rotation.copy( camera.rotation );
renderer.render( sceneCube, cameraCube );
renderer.render( scene, camera );
}
At this position:
var materials = THREE.ImageUtils.loadTexture('badge.png');
myImg = new THREE.Mesh(
new THREE.BoxGeometry( 562, 562, 562, 1, 1, 1 ),
new THREE.MeshFaceMaterial( materials ) );
sceneCube.add( myImg );
Got this error message:
three.min.js:538 Uncaught TypeError: Cannot read property 'visible' of undefined
Many thanks for help!
Your code and the version of three.js that you are using are not the same. Your code looks like it could be compatible with three.js version r72.
I have created a javascript script to do something, and mostly it worked. There are two issues I had with the script, so I planned to put a working example here on SO. However, during the 'reduction' of the code to something less complex a third error occurred, which completely made the script stop working. Here is the javascript part of the script:
var container, stats;
var camera, scene, renderer;
var group1, group2;
var mouseX = 0, mouseY = 0;
var map_width = 512;
var map_height = 512;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
init();
animate();
function createMesh(filename) {
var geometry = new THREE.SphereGeometry( 70, 40, 40 );
var texture = new THREE.TextureLoader(filename);
texture.needsUpdate = true;
var material = new THREE.MeshBasicMaterial( { map: texture, overdraw: 0.5 } );
var mesh = new THREE.Mesh( geometry, material );
return mesh;
}
function init() {
container = document.getElementById( 'container' );
camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 2000 );
camera.position.z = 500;
scene = new THREE.Scene();
group1 = new THREE.Group();
var mesh = createMesh("textures/tree1.jpg");
group1.add( mesh );
group1.position.x = 00;
scene.add( group1 );
group2 = new THREE.Group();
var mesh = createMesh("textures/tree2.jpg");
group2.add( mesh );
group2.position.x = 250;
scene.add( group2 );
renderer = new THREE.WebGLRenderer({ alpha: true });
renderer.setClearColor( 0xffffff, 0 );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
}
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
camera.position.x += ( mouseX - camera.position.x ) * 0.05;
camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
camera.lookAt( scene.position );
group1.rotation.y -= 0.005;
group2.rotation.y -= 0.015;
renderer.render( scene, camera );
}
The idea is to have several spheres with some texture on it; to try just use any image. However, when I call this code within a html I get the error
TypeError: n is undefined
all over again. The error seems to originate in THREE.js. How can I fix this error, so I see two spheres with a 'tree' texture on it...?
The body of the html code is as follows:
<body>
<div id="container"></div>
<script src="js/build/three.min.js"></script>
<script>
>> the code from above <<
</script>
</body>
This problem is caused by the following line:
var texture = new THREE.TextureLoader(filename);
The solution is to use a loader instead:
var loader = new THREE.TextureLoader();
var texture = loader.load( filename );
I know that the question has already been asked. I want to be able to change the color of an object if selected with the mouse. I tried writing the code myself but it seems not to work, so I guess that I am missing something. That's basically the script:
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth/2, window.innerHeight/2 );
renderer.setClearColor( 0xcccccc, 1 );
document.body.appendChild( renderer.domElement );
scene.add(camera);
var geometry = new THREE.Geometry();
geometry.vertices.push(
new THREE.Vector3( -5, 5, 0 ),
new THREE.Vector3( -5, -5, 0 ),
new THREE.Vector3( 5, -5, 0 )
);
var face = new THREE.Face3(0, 1, 2);
geometry.faces.push(face);
var material = new THREE.MeshBasicMaterial({color: 0x3300ff});
var triangle = new THREE.Mesh(geometry, material);
scene.add(triangle);
camera.position.z = 10;
document.addEventListener( 'mousedown', onDocumentMouseDown );
function onDocumentMouseDown( event ) {
event.preventDefault();
var mouse3D = new THREE.Vector3( ( event.clientX / window.innerWidth ) * 2 - 1,
-( event.clientY / window.innerHeight ) * 2 + 1,
0.5 );
var projector = new THREE.Projector();
var raycaster = projector.pickingRay( mouse3D.clone(), camera );
var intersects = raycaster.intersectObjects( objects );
if ( intersects.length > 0 ) {
intersects[ 0 ].object.material.color.setHex( Math.random() * 0xffffff );
}
}
var render = function () {
requestAnimationFrame( render );
camera.lookAt( scene.position );
renderer.render( scene, camera );
};
render();
</script>
If someone could help me I would appreciate it.
Updated your code and made jsfiddle
In onDocumentMouseDown added
var raycaster = new THREE.Raycaster();
raycaster.setFromCamera( mouse3D, camera );
instead of
var projector = new THREE.Projector();
var raycaster = projector.pickingRay( mouse3D.clone(), camera );
To objects array added triangle mesh and updated size of the renderer.
I suggest you to start using Console and do some debugging. You can easily find these errors yourself.
I'm trying to create a bead like object in Three.js, essentially a sphere with a cylinder through it. I can create the two independently, but I'm wondering how to match the height of the sphere and the cylinder and how to merge / intersect them, so that the result will be one geometry.
Any ideas?
Thanks!
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
//material
var material = new THREE.MeshNormalMaterial( {
wireframe: true
} );
//sphere
var sphere = new THREE.SphereGeometry(2,20,20);
var sphereMesh = new THREE.Mesh( sphere, material );
scene.add( sphereMesh );
//cyl
var cylinder = new THREE.CylinderGeometry(0.5, 0.5, 2, 32 );
var cylinderMesh = new THREE.Mesh( cylinder, material );
scene.add( cylinderMesh );
camera.position.x = 0;
camera.position.y = 0;
camera.position.z = 5;
function render() {
requestAnimationFrame(render);
renderer.render(scene, camera);
}
render();
http://jsfiddle.net/RqU2v/
#gaitat, totally awesome, thanks.
here's the solution with ThreeCSG:
//sphere
var sphere = new THREE.SphereGeometry(2,20,20);
var sphereMesh = new THREE.Mesh( sphere, material );
var sphereBSP = new ThreeBSP( sphereMesh );
//cyl
var cylinder = new THREE.CylinderGeometry(0.5, 0.5, 5, 32 );
var cylinderMesh = new THREE.Mesh( cylinder, material );
var cylinderBSP = new ThreeBSP( cylinderMesh );
//result
var subtract_bsp = sphereBSP.subtract( cylinderBSP );
var result = subtract_bsp.toMesh( material );
result.geometry.computeVertexNormals();
scene.add( result );
Just wondering how i would go about centering the camera around the model loaded through the stl loader.
I've been playing with variables for ages, I've tried setting the mesh position manually to (0,0,0), and also the camera to (0,0,0) even then, the camera is not centered on the design!
Here's the relevant code:
function init() {
camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.set( 0,60 , 100 );
controls = new THREE.OrbitControls( camera );
controls.addEventListener( 'change', render );
scene = new THREE.Scene();
scene.fog = new THREE.FogExp2( 0xcccccc, 0.002 );
var callbackProgress = function( progress, result ) {
var bar = 250,
total = progress.totalModels + progress.totalTextures,
loaded = progress.loadedModels + progress.loadedTextures;
if ( total )
bar = Math.floor( bar * loaded / total );
$( \"bar\" ).style.width = bar + \"px\";
count = 0;
for ( var m in result.materials ) count++;
handle_update( result, Math.floor( count/total ) );
}
var callbackFinished = function ( result ) {
loaded = result;
document.getElementById(\"message\").style.display = \"none\";
handle_update( result, 1 );
}
document.getElementById(\"progress\").style.display = \"block\";
// world
var loader = new THREE.STLLoader();
loader.addEventListener( 'load', function ( event ) {
var geometry = event.content;
var material = new THREE.MeshPhongMaterial( { ambient: 0xff5533, color: 0xff5533, specular: 0x111111, shininess: 200 } );
var mesh = new THREE.Mesh( geometry, material );
mesh.position.set( 0, 0, 0 );
mesh.rotation.set( 0, 0, 0 );
mesh.scale.set( 2,2,2 );
mesh.castShadow = true;
mesh.receiveShadow = true;
camera.position.set( geometry.x,geometry.y , 100 );
scene.add( mesh );
} );
loader.callbackProgress = callbackProgress;
loader.load('somefile.stl',callbackFinished);
// lights
light = new THREE.DirectionalLight( 0xffffff );
light.position.set( 1, 1, 1 );
scene.add( light );
light = new THREE.DirectionalLight( 0xffffff );
light.position.set( -1, -1, -1 );
scene.add( light );
light = new THREE.AmbientLight( 0x222222 );
scene.add( light );
// renderer
renderer = new THREE.WebGLRenderer( { antialias: false } );
renderer.setClearColor( scene.fog.color, 1 );
renderer.setSize( window.innerWidth, window.innerHeight );
container = document.getElementById( 'container' );
container.appendChild( renderer.domElement );
/*
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
stats.domElement.style.zIndex = 100;
container.appendChild( stats.domElement );*/
//
window.addEventListener( 'resize', onWindowResize, false );
}
I think you have confused the position of the camera with it's target.
To get the camera to focus on the model, try camera.lookAt(mesh.position);, and make sure that the camera isn't inside of the model, e.g. camera.position.set(0, 60, 100);, your original camera position, or geometry.x, geometry.y, 100, to look at the model from the side , directly down the Z axis.