Apologies - as this may be quite an easy solve. I have the following code, however can't seem to see the BoxGeometry in the scene. The red scene shows up fine
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(0, window.innerWidth / window.innerHeight, 0.1, 1000);
var color = new THREE.Color(0xff0000);
scene.background = color;
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var geometry = new THREE.BoxGeometry(1,1,1);
var material = new THREE.MeshBasicMaterial(
{
color: 0x00ff00
}
)
var cube = new THREE.Mesh( geometry, material);
scene.add( cube );
camera.position.z = 5;
function animate(){
requestAnimationFrame( animate );
renderer.render( scene, camera );
}
The only errors in my console are "THREE.WebGLRenderer 79" and "DevTools failed to parse SourceMap"
So turns out the PerspectiveCamera first variable needs to be e.g. 75 and not 0.
Related
I want to add a texture to my plane that repeats horizontal and vertical. The thing is, when I try to apply the texture, it is always black. I don't get any errors, and i already tried to add some lights, but the problem is still there; I don't know how to solve it... Here is what I did:
window.onload = function init()
{
scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.x = -30;
camera.position.y = 40;
camera.position.z = 30;
camera.lookAt(scene.position);
var light = new THREE.AmbientLight( 0x404040 ); // soft white light
scene.add( light );
var spotlight = new THREE.SpotLight( 0xffffff);
spotlight.position.set( -50, 40, 0 );
scene.add( spotlight );
var axes = new THREE.AxisHelper( 20 ); scene.add(axes);
var renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0xEEEEEE);
renderer.setSize(window.innerWidth, window.innerHeight);
desenhaMapa();
document.body.appendChild( renderer.domElement );
renderer.render(scene, camera);
}
function desenhaMapa()
{
labirinto = new THREE.Object3D();
var texturaPlano = new THREE.TextureLoader().load("texturaPac.jpg");
geometryPlano = new THREE.PlaneGeometry(50,50);
materialPlano = new THREE.MeshPhongMaterial( {map: texturaPlano} );
var planoPacMan = new THREE.Mesh(geometryPlano,materialPlano);
planoPacMan.rotation.x = -0.5 * Math.PI;
scene.add(planoPacMan);
}
Any suggestions?
TextureLoader.load() is an asynchronous method. That is why it has an onload argument.
You are calling render() before the texture loads. One solution is to call render() in the loader callback.
var loader = new THREE.TextureLoader();
var texture = loader.load( 'myTexture.jpg', function ( texture ) {
renderer.render( scene, camera );
} );
Another solution is to have an animation loop. But that is not required for static scenes.
three.js r.78
I tried to make the wireframe rotate in the scene.
The animation works when I removed the BoxHelper, but I want to animate the cube wireframe without diagonal line instead of a solid object.
Codepen demo :
Demo
Code :
var w = window.innerWidth, h = window.innerHeight,
scene = new THREE.Scene(),
camera = new THREE.PerspectiveCamera(75, w/h, 0.1, 1000),
renderer = new THREE.WebGLRenderer(),
geometry = new THREE.BoxGeometry( 1, 1, 1 ),
material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } ),
mesh = new THREE.Mesh( geometry, material ),
cube = new THREE.BoxHelper(mesh);
cube.material.color.setRGB(25,25,25);
scene.add(cube);
camera.position.z = 2;
renderer.setSize(w,h);
document.body.appendChild(renderer.domElement);
function render(){
requestAnimationFrame( render );
cube.rotation.x += 1;
renderer.render(scene, camera );
}
render();
The position of your THREE.BoxHelper instance is tied to the position of the THREE.Mesh. For your code to work you will have to add the mesh to the scene and rotate the mesh. Your box helper will follow.
If you don't want to show the mesh you can simply set mesh.visible = false;
This code works:
var w = window.innerWidth, h = window.innerHeight,
scene = new THREE.Scene(),
camera = new THREE.PerspectiveCamera(75, w/h, 0.1, 1000),
renderer = new THREE.WebGLRenderer(),
geometry = new THREE.BoxGeometry( 1, 1, 1 ),
mesh = new THREE.Mesh( geometry );
camera.position.z = 2;
renderer.setSize(w,h);
document.body.appendChild(renderer.domElement);
mesh.visible = false; //<-- hide mesh
scene.add(mesh); //<-- add mesh to scene
cube = new THREE.BoxHelper(mesh);
cube.material.color.setRGB(25,25,25);
scene.add(cube);
function render(){
mesh.rotation.y += 0.01; //<-- rotate the mesh
requestAnimationFrame( render );
renderer.render( scene, camera );
}
render();
I am trying to create a very realistic scene using Three.js. So far I have implemented mouse controls, loading model from Maya and I came to applying textures. The code works however, as it can be seen on the images below the textures don't fill the box as one would expect. I assume the problem is because each face of the model is filled separately, which occurred to me when I displayed my model as in wireframe mode.
My UV values look like this :
[[0.375,0,0.625,0,0.375,0.25,0.625,0.25,0.375,0.5,0.625,0.5,0.375,0.75,0.625,0.75,0.375,1,0.625,1,0.875,0,0.875,0.25,0.125,0,0.125,0.25]]
function init() {
// renderer
renderer = new THREE.WebGLRenderer({antialias: true, alpha: true});
renderer.setSize(window.innerWidth, window.innerHeight);
container = document.getElementById('container');
container.appendChild(renderer.domElement);
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 10000 );
camera.position.z = 5;
cameraControls = new THREE.TrackballControls(camera, renderer.domElement);
cameraControls.target.set(0, 0, 0);
scene = new THREE.Scene();
light = new THREE.AmbientLight( 0xffffff );
scene.add( light );
material = new THREE.MeshPhongMaterial( {
map: THREE.ImageUtils.loadTexture('images/box_texture.jpg')
} );
group = new THREE.Object3D();
var loader = new THREE.JSONLoader();
loader.load('models/cube_1.js', modelLoadedCallback);
window.addEventListener( 'resize', onWindowResize, false );
}
function modelLoadedCallback(geometry) {
mesh = new THREE.Mesh( geometry, material );
group.add(mesh);
// scene.add (new THREE.Mesh (geometry,
// new THREE.MeshBasicMaterial ({ color: 0x000000, wireframe: true })));
scene.add (new THREE.Mesh (geometry, material));
scene.add( group );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
render();
}
function animate() {
var delta = clock.getDelta();
requestAnimationFrame(animate);
cameraControls.update(delta);
renderer.render(scene, camera);
}
It can be helpful
var texture = THREE.ImageUtils.loadTexture('images/box_texture.jpg') ;
and add:
texture.flipY = false;
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 );
This is the code, and it's running in my browser. It seems that the object with the texture is rendered properly, but JavaScript console writes that mycylinder is not defined. Why? How can I resolve this problem?
var texture,material,mycylinder;
var WIDTH = 400, HEIGHT = 300;
var VIEW_ANGLE = 45, ASPECT =WIDTH/HEIGHT, NEAR=0.1, FAR =10000;
var renderer= new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
var camera= new THREE.PerspectiveCamera(VIEW_ANGLE, window.innerWidth / window.innerHeight, NEAR, FAR);
var scene= new THREE.Scene();
scene.add(camera);
camera.position.set(0,150,400);
camera.lookAt(scene.position);
document.body.appendChild( renderer.domElement );
var light = new THREE.PointLight(0xffffff);
light.position.set(0,250,0);
scene.add(light);
var ambientLight = new THREE.AmbientLight(0x444444);
scene.add(ambientLight);
var cylinderLoader = new THREE.JSONLoader();
cylinderLoader.load( "models/probahenger.js", addModel );
function addModel( geometry, materials ) {
texture= new THREE.ImageUtils.loadTexture("images/Henger_anyag3.png");
material= new THREE.MeshLambertMaterial({map: texture});
mycylinder = new THREE.Mesh( geometry,material);
mycylinder.scale.set(30,30,30);
mycylinder.position.y=0;
scene.add( mycylinder );
};
function render() {
requestAnimationFrame(render);
mycylinder.rotation.x += 0.01;
mycylinder.rotation.y += 0.01;
renderer.render(scene, camera);
}
render();
Most likely the object hasn't been loaded by the time you're trying to rotate it. This should do the trick:
if ( mycylinder !== undefined ) {
mycylinder.rotation.x += 0.01;
mycylinder.rotation.y += 0.01;
}