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>
Related
Trying to figure out how to create something that looks like the image below... Tried searching around but couldn't really figure it out...
Try it with CylinderGeometry. This class allows to define different radii for the top and bottom.
let mesh;
let camera, scene, renderer;
init();
function init() {
camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 10);
camera.position.z = 2;
scene = new THREE.Scene();
const geometry = new THREE.CylinderGeometry(0.2, 0.5, 1, 16);
const material = new THREE.MeshNormalMaterial();
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setAnimationLoop(animation);
document.body.appendChild(renderer.domElement);
}
function animation(time) {
mesh.rotation.x = time / 2000;
mesh.rotation.y = time / 1000;
renderer.render(scene, camera);
}
body {
margin: 0;
}
<script src="https://cdn.jsdelivr.net/npm/three#0.133.1/build/three.min.js"></script>
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>
So I've been trying to get my mesh into my scene but cannot get it working at all. I've been looking for tutorials on how to do it, trying all kinds of things for the last hour and a half but cannot get it to show up at all.
Here's my code so far:
$(function() {
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
var loader = new THREE.JSONLoader();
loader.load( "stand2.js", modelLoadedCallback);
var meshmaterial = new THREE.MeshBasicMaterial({
wireframe: true,
color: 0xdddddd
});
function modelLoadedCallback(geometry) {
var standmesh = new THREE.Mesh( geometry, meshmaterial);
standmesh.position.x = 0;
standmesh.position.y = 0;
standmesh.position.z = 0;
standmesh.scale.set(0.5, 0.5, 0.5);
scene.add(standmesh);
}
renderer.setClearColor(0x000000);
renderer.setSize(window.innerWidth, window.innerHeight);
var axis = new THREE.AxisHelper(10);
scene.add(axis);
var cubeGeometry = new THREE.BoxGeometry(20, 20, 20);
var cubeMaterial = new THREE.MeshBasicMaterial({
color: 0xdddddd,
wireframe: true
});
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.position.x = 0;
cube.position.y = 0;
cube.position.z = 0;
scene.add(cube);
camera.position.x = 300;
camera.position.y = 300;
camera.position.z = 300;
camera.lookAt(scene.position);
function render() {
requestAnimationFrame( render );
renderer.render( scene, camera );
cube.rotation.x += 0.01;
cube.rotation.y += 0.02;
cube.rotation.z +=0.01
}
render();
$("#webGL-container").append(renderer.domElement);
});
I've got a simple rotating cube that shows up perfectly fine, but cannot get my mesh to show up. I've tried messing with it's scale incase it was too big or too small but nothing has worked. Exported it twice using the 3DSMax exporter but it changes nothing. There's no light source, but I'm just focused on seeing a wireframe of it for the time being.
The exported model is also in the same directory of this js file, so the directory isn't wrong either.
Sorry for asking such a basic question but I've honestly been at this for a solid 1h30m+ and cannot get anything to show up.
Thanks for your time.
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>