I'm just beginning to experiment with THREE.js. I'm trying different combinations of renderers and cameras.
I can render a simple animation using the WebGLRenderer and the OrthographicCamera or the CanvasRenderer and the PerspectiveCamera. But if I use the CanvasRenderer with the OrthographicCamera I don't see any image rendered.
Should the CanvasRenderer work with the OrthographicCamera? Fiddles that work are here:
http://jsfiddle.net/PXxLq/ - WebGL/Orthographic - OK
http://jsfiddle.net/fXsKq/ - Canvas/Perspective - OK
This is the code that fails:
<html>
<head>
<script src="https://raw.github.com/mrdoob/three.js/master/build/three.js"></script>
</head>
<body>
<script>
SCREEN_WIDTH = 200;
SCREEN_HEIGHT = 200;
var ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT, NEAR = 1, FAR = 1000;
var scene = new THREE.Scene();
// PerspectiveCamera good with CanvasRenderer
//var camera = new THREE.PerspectiveCamera(75, ASPECT, NEAR, FAR);
var camera = new THREE.OrthographicCamera( -SCREEN_WIDTH / 2, SCREEN_WIDTH / 2, SCREEN_HEIGHT / 2, -SCREEN_HEIGHT / 2, NEAR, FAR );
var renderer = new THREE.CanvasRenderer();
// WebGLRenderer good with OrthographicCamera
//var renderer = new THREE.WebGLRenderer();
renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
document.body.appendChild(renderer.domElement);
var geometry = new THREE.CubeGeometry(50,50,50);
var material = new THREE.MeshBasicMaterial({color: 0x000000, wireframe: true });
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 100;
function render() {
requestAnimationFrame(render);
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
render();
</script>
</body>
</html>
For CanvasRenderer, when using OrthographicCamera, the near plane must be negative.
This appears to be a bug.
EDIT: This bug has been fixed. The near plane should always be positive now.
three.js r.55
Reference : WebGLRenderer() & PerspectiveCamera()
List item
<script src="build/three.min.js"></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, 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;
var render = function () {
requestAnimationFrame( render );
cube.rotation.x += 0.1;
cube.rotation.y += 0.1;
renderer.render(scene, camera);
};
render();
</script>
Related
Three.js does not render a plane and only outputs a black screen.
Here is my code:
<canvas id="myCanvas"></canvas>
<script src="three.js"></script>
<script>
var renderer = new THREE.WebGLRenderer({canvas: document.getElementById('myCanvas'), antialias: true});
renderer.setClearColor(0x00ff00);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
var planeGeometry = new THREE.PlaneGeometry(60,40,1,1);
var planeMaterial = new THREE.MeshLambertMaterial({color: 0xffffff});
var plane = new THREE.Mesh(planeGeometry,planeMaterial);
scene.add(plane);
var ambientLight = new THREE.AmbientLight(0x0c0c0c);
scene.add(ambientLight);
var spotLight = new THREE.SpotLight( 0xffffff );
scene.add( spotLight );
requestAnimationFrame(render);
function render() {
mesh.rotation.x += 0.01;
mesh.rotation.y += 0.01;
renderer.render(scene, camera);
requestAnimationFrame(render);
}
</script>
Please could anybody help.Why is the plane not being displayed. Am I using a wrong three.js library or is the code wrong?
Move the camera along the Z axis by 5.
So:
camera.postion.z += 1;
I'm not able to render a planeBufferGeometry. Not sure what Im doing wrong. This is my first attempt with BufferGeometry. This works fine if I replace the code with a Geometry.Sphere or any other Geometry object.
var geometry = new THREE.PlaneBufferGeometry( 5, 20, 32 );
var material = new THREE.MeshBasicMaterial( {color: 0xCC0000, side: THREE.DoubleSide} );
var plane = new THREE.Mesh( geometry, material );
scene.add(plane);
function update () {
// Draw!
renderer.render(scene, camera);
// Schedule the next frame.
requestAnimationFrame(update);
}
// Schedule the first frame.
requestAnimationFrame(update);
CAmera Position
const WIDTH = window.innerWidth;
const HEIGHT = window.innerHeight;
// Set some camera attributes.
const VIEW_ANGLE = 45;
const ASPECT = WIDTH / HEIGHT;
const NEAR = 0.1;
const FAR = 10000;
// Get the DOM element to attach to
const container =
document.querySelector('#container');
// Create a WebGL renderer, camera
// and a scene
const renderer = new THREE.WebGLRenderer();
const camera =
new THREE.PerspectiveCamera(
VIEW_ANGLE,
ASPECT,
NEAR,
FAR
);
const scene = new THREE.Scene();
Thanks
Just an example with your code of instancing the buffer plane:
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 0, 10); // set the position of the camera
var renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var controls = new THREE.OrbitControls(camera, renderer.domElement);
var geometry = new THREE.PlaneBufferGeometry(5, 20, 32, 32);
var material = new THREE.MeshBasicMaterial({
color: 0xCC0000,
side: THREE.DoubleSide
});
var plane = new THREE.Mesh(geometry, material);
scene.add(plane);
render();
function render() {
requestAnimationFrame(render);
renderer.render(scene, camera);
}
body {
overflow: hidden;
margin: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/91/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
I'm new to three.js and need to make a project for school. For this project I need a texture on my cube. But the screen stays black.. and there are no console errors! I did everything I can so this is kinda my last change haha.
My code:
<script src="js/three.min.js"></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, window.innerHeight );
document.body.appendChild( renderer.domElement );
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
// +
var material = new THREE.MeshLambertMaterial({
map: THREE.ImageUtils.loadTexture('images/crate2.jpg')
})
// =
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;
var render = function () {
requestAnimationFrame( render );
cube.rotation.x += 0.1;
cube.rotation.y += 0.05;
renderer.render(scene, camera);
};
render();
</script>
You do not have a light in your scene.
Adding one like below should work
// Create ambient light and add to scene.
var light = new THREE.AmbientLight(0xffffff); // white light
scene.add(light);
I would add a link to a js fiddle but it seems they have changed and I can not longer find where to get the link.
Anyway, just ad some sort of light.
Perhaps adding a light would help? That or try using THREE.MeshBasicMaterial
I'm just learning how to do this three.js magic. I'm able to draw and animate a cube. But when I change the geometry to an Icosahedron nothing appears.
Inside my js src forlder I only have the three.min.js file. Do I need another .js file in there?
Here is a sample of my code. I'm just a beginner, and have been spending hours trying to figure this out. Please help.
<body>
<script src="js/three.min.js"></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, window.innerHeight);
document.body.appendChild(renderer.domElement);
/*var geometry = new THREE.BoxGeometry(1,1,1);
var material = new THREE.MeshLambertMaterial({color: 0x00ff00});
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);*/
var geometry = new THREE.IcosahedronGeometry( 200,1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00, wireframe: false, wireframeLinewidth: 2 } );
var mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
var pointlight = new THREE.PointLight(0xffffff);
pointlight.position.x = 10;
pointlight.position.y = 50;
pointlight.position.z = 1000;
scene.add(pointlight)
camera.position.z = 5;
var render = function () {
requestAnimationFrame(render);
cube.rotation.x += .01;
cube.rotation.y += .01;
renderer.render(scene, camera);
};
render();
</script>
</body>
I know this is an old post but for future visitors, here's the question answered with live code.
I also went ahead and cleaned it up a bit and annotated some comments to help point out how I solved your problem.
<body>
<script src="https://threejs.org/build/three.min.js"></script>
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
);
camera.position.z = 5;
var pointlight = new THREE.PointLight(0xffffff);
pointlight.position.x = 10;
pointlight.position.y = 50;
pointlight.position.z = 1000;
scene.add(pointlight)
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var mesh = new THREE.Mesh(
// Notice radius decreased to 2 because it has to be smaller
// than camera.position. If camera is placed inside the mess,
// then we won't see it.
new THREE.IcosahedronGeometry(2, 0),
// I went ahead and added Phong shading in order to make result clearer
new THREE.MeshPhongMaterial({
color: 0x156289,
emissive: 0x072534,
side: THREE.DoubleSide,
flatShading: true,
}),
);
scene.add(mesh);
var render = function() {
requestAnimationFrame(render);
// fixed the rotation to reference your mesh
mesh.rotation.x += .01;
mesh.rotation.y += .01;
renderer.render(scene, camera);
};
render();
</script>
</body>
I'm struggleing with texture load issues.
All I see is a black sphere. :(
Any help would be awesome! Do i make something wrong?
Browser downloads the image, no issues on the console.
Checked in every browser with the same result.
OS: Mac 10.8.2
Here is my code:
<html>
<head>
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/three.min.js"></script>
</head>
<body>
<div id="container">
</div>
<script>
function addSpaceSphere( ){
// set up the sphere vars
var radius = 125,
segments = 16,
rings = 16;
var material = new THREE.MeshPhongMaterial({
color:0xFFFFFF,
map: THREE.ImageUtils.loadTexture( 'textures/SPACE014S.png' ) ,
});
var sphere = new THREE.Mesh(
new THREE.SphereGeometry(
radius,
segments,
rings
),
material
);
// add the sphere to the scene
scene.add(sphere);
}
function addLights(){
// create a point light
var ambient = new THREE.AmbientLight( 0xFFFFFF );
scene.add( ambient );
// create a point light
var pointLight = new THREE.PointLight(0xFFFFFF);
// set its position
pointLight.position.x = 10;
pointLight.position.y = 50;
pointLight.position.z = 130;
// add to the scene
scene.add(pointLight);
}
function createScene(){
// add the camera to the scene
scene.add(camera);
// the camera starts at 0,0,0
// so pull it back
camera.position.x = 0;
camera.position.y = 0;
camera.position.z = 300;
// start the renderer
renderer.setSize(WIDTH, HEIGHT);
$container.append(renderer.domElement);
addSpaceSphere( );
addLights();
renderer.render(scene, camera);
}
function onWindowResize( event ) {
var newEarthContainerWidth = earthContainer.offsetWidth;
var newWindowHeight = window.innerHeight;
var newScale = newEarthContainerWidth / earthContainerWidth;
sphere.geometry.__dirtyVertices = true;
sphere.scale.x = sphere.scale.y = sphere.scale.z = newScale;
renderer.setSize( newEarthContainerWidth, newWindowHeight );
camera.aspect = newEarthContainerWidth / newWindowHeight;
camera.updateProjectionMatrix();
camera.radius = ( newEarthContainerWidth + newWindowHeight ) / 4;
}
var WIDTH = window.innerWidth;
var HEIGHT = window.innerHeight;
var VIEW_ANGLE = 45,
ASPECT = WIDTH / HEIGHT,
NEAR = 0.1,
FAR = 10000;
var $container = $('#container');
// create a WebGL renderer, camera
// and a scene
//var renderer = new THREE.CanvasRenderer();
var renderer = new THREE.WebGLRenderer();
var camera = new THREE.PerspectiveCamera(
VIEW_ANGLE, ASPECT, NEAR, FAR
);
var scene = new THREE.Scene();
createScene();
window.addEventListener( 'resize', onWindowResize, false );
</script>
</body>
You are calling
renderer.render( scene, camera );
only once, and probably before the texture completes loading.
Add an animation loop.
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
}
animate();