The default axis of the cylinder is y-axis, forms a verticle cylinder. I need to draw a horizontal cylinder.
You can use .rotateZ() method of your cylinder geometry:
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 5, 10);
camera.lookAt(scene.position);
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);
scene.add(new THREE.GridHelper(10, 10));
var geom = new THREE.CylinderGeometry(1, 1, 7, 16, 1);
geom.rotateZ(-Math.PI * 0.5); // rotate 90 degrees clockwise around z-axis
var cylinder = new THREE.Mesh(geom, new THREE.MeshBasicMaterial({
color: "aqua",
wireframe: true
}));
scene.add(cylinder);
render();
function render() {
requestAnimationFrame(render);
renderer.render(scene, camera);
}
body {
overflow: hidden;
margin: 0;
}
<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
Related
I am trying to generate a shape like this, 3d rectangle with a transparent face or just 3 panels in a 3d way.
I am new to three.js and I wanted to know if this is possible and if you could guide me.
Thanks a lot!
You can find an image of what I want to generate here:
https://i.stack.imgur.com/h0ja7.png
As an option, you can do it this way:
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(2, 2, 3);
camera.lookAt(scene.position);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x404040);
document.body.appendChild(renderer.domElement);
var contorls = new THREE.OrbitControls(camera, renderer.domElement);
var boxGeom = new THREE.BoxGeometry(2, 1, 1);
var mat1 = new THREE.MeshBasicMaterial({
color: "red",
side: THREE.DoubleSide
});
var mat2 = new THREE.MeshBasicMaterial({
color: "aqua",
side: THREE.DoubleSide,
transparent: true,
opacity: 0.5
});
var boxMat = [mat1, mat1, null, null, mat2, null];
var box = new THREE.Mesh(boxGeom, boxMat);
scene.add(box);
render();
function render() {
requestAnimationFrame(render);
renderer.render(scene, camera);
}
body {
overflow: hidden;
margin: 0;
}
<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
In my program, I have done as:
var object = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial( 0xff0000 ) );
object.rotation.x = Math.PI / 2;
var box = new THREE.BoxHelper( object, 0xffff00 );
scene.add(box);
Here,I first try to create a wireframe box and then rotate it by 90 degrees about x axis(line 2). But I don't see any change in box's orientation.
What is correct way of doing it?
Just set rotation of the cube at 90 degrees (here it's 45) and you'll have the same cube:
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(2, 5, 10);
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);
scene.add(new THREE.GridHelper(10, 10));
var cube = new THREE.Mesh(new THREE.BoxGeometry(2, 2, 2), new THREE.MeshBasicMaterial({
color: "aqua",
wireframe: true
}));
cube.position.set(0, 1, 0);
cube.rotation.x = Math.PI * 0.25;
scene.add(cube);
var box = new THREE.BoxHelper(cube, 0xff9900);
scene.add(box);
render();
function render() {
requestAnimationFrame(render);
renderer.render(scene, camera);
}
body {
overflow: hidden;
margin: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/92/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
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>
Trying to get raycasting working with threejs but I'm getting this error in the console.
Uncaught TypeError: a.raycast is not a function
Le Fiddle
http://jsfiddle.net/hw9rcLL8/147/
Any ideas?
// Simple three.js example
var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
var mesh, renderer, scene, camera, controls;
window.addEventListener('click', mouseClick);
init();
animate();
function init() {
// renderer
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// scene
scene = new THREE.Scene();
// camera
camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.set(20, 20, 20);
// controls
controls = new THREE.OrbitControls(camera);
// ambient
scene.add(new THREE.AmbientLight(0x222222));
// light
var light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(20, 20, 0);
scene.add(light);
// axes
scene.add(new THREE.AxisHelper(20));
// geometry
var geometry = new THREE.SphereGeometry(5, 12, 8);
// material
var material = new THREE.MeshPhongMaterial({
color: 0x00ffff,
shading: THREE.FlatShading,
transparent: true,
opacity: 0.7,
});
// mesh
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
}
function animate() {
requestAnimationFrame(animate);
//controls.update();
renderer.render(scene, camera);
}
function mouseClick(e) {
console.log("click detected");
mouse.x = (e.clientX / renderer.domElement.width) * 2 - 1;
mouse.y = -(e.clientY / renderer.domElement.height) * 2 + 1;
raycaster.setFromCamera(mouse, camera);
var intersects = raycaster.intersectObject(scene.children);
}
body {
background-color: #000;
margin: 0px;
overflow: hidden;
}
<script src="https://rawgit.com/mrdoob/three.js/dev/build/three.min.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/controls/OrbitControls.js"></script>
You are missing an s there :D – It should be
raycaster.intersectObjects(scene.children);
Where you wrote intersectObject. That is for a single object instead of an array:
raycaster.intersectObject(mesh);
Using threejs I created a simple cylinder object and rotating it in z-axis. The object rotates around the center axis, both the ends of the cylinder rotate around the axis which is at the center of the cylinder.
How can I make it rotate in a different axis? I would like the cylinder to rotate by having one end in a fixed point while the other end goes around in circles. My code is below.
init();
function init() {
renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('myCanvas'), antialias: true });
renderer.setClearColor(0xeaebed);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
camera = new THREE.PerspectiveCamera(5, window.innerWidth / window.innerHeight, 0.1, 4000);
scene = new THREE.Scene();
//LIGHTS
var light = new THREE.AmbientLight(0xffffff, 1);
scene.add(light);
var light1 = new THREE.PointLight(0xffffff, 0.3);
scene.add(light1);
//Gun holder
var gunHolder = new THREE.Object3D();
var gunHolderColour = 0x0f4207;
var gunHolderBaseCylinderGeometry = new THREE.CylinderGeometry(10, 10, 50, 32);
var gunHolderBaseCylinderMaterial = new THREE.MeshStandardMaterial({
color: gunHolderColour,
metalness: 0.5,
roughness: 0.5
});
var gunHolderBaseCylinderMesh = new THREE.Mesh(gunHolderBaseCylinderGeometry, gunHolderBaseCylinderMaterial);
gunHolderBaseCylinderMesh.position.set(0, -8, -3000);
scene.add(gunHolderBaseCylinderMesh);
requestAnimationFrame(render);
function render() {
gunHolderBaseCylinderMesh.rotation.z += 0.01;
renderer.render(scene, camera);
requestAnimationFrame(render);
}
}
You can use .translate() method of your geometry:
var gunHolderBaseCylinderGeometry = new THREE.CylinderGeometry(10, 10, 50, 32); // height is 50
gunHolderBaseCylinderGeometry.translate(0, 25, 0); // move upwards at half of height, 25
renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setClearColor(0xeaebed);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
camera = new THREE.PerspectiveCamera(5, window.innerWidth / window.innerHeight, 0.1, 4000);
scene = new THREE.Scene();
//LIGHTS
var light = new THREE.AmbientLight(0xffffff, 1);
scene.add(light);
var light1 = new THREE.PointLight(0xffffff, 0.3);
scene.add(light1);
//Gun holder
var gunHolder = new THREE.Object3D();
var gunHolderColour = 0x0f4207;
var gunHolderBaseCylinderGeometry = new THREE.CylinderGeometry(10, 10, 50, 32);
gunHolderBaseCylinderGeometry.translate(0, 25, 0);
var gunHolderBaseCylinderMaterial = new THREE.MeshStandardMaterial({
color: gunHolderColour,
metalness: 0.5,
roughness: 0.5
});
var gunHolderBaseCylinderMesh = new THREE.Mesh(gunHolderBaseCylinderGeometry, gunHolderBaseCylinderMaterial);
gunHolderBaseCylinderMesh.position.set(0, -8, -3000);
scene.add(gunHolderBaseCylinderMesh);
requestAnimationFrame(render);
function render() {
requestAnimationFrame(render);
gunHolderBaseCylinderMesh.rotation.z += 0.01;
renderer.render(scene, camera);
}
body {
overflow: hidden;
margin: 0;
}
<script src="https://threejs.org/build/three.js"></script>