I am trying to display multiple images on the outside (not the top or bottom) of a rotating cylinder using three.js. I am able to display 1 image, but my goal is to display several side by side. I have added 3 textures to my materials array, but only the first is displayed. Any help is appreciated.
<html>
<head>
<title>My first three.js app</title>
<span>Test</span>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<script src="js/three.js"></script>
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 100, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.y = 24;
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var diameter = 20;
var geometry = new THREE.CylinderGeometry( diameter, diameter, 15, 32 );
var texture1 = new THREE.TextureLoader().load( 'images/image1.jpg' );
var texture2 = new THREE.TextureLoader().load( 'images/image2.jpg' );
var texture3 = new THREE.TextureLoader().load( 'images/image3.png' );
texture1.wrapS = THREE.RepeatWrapping;
//texture.wrapT = THREE.RepeatWrapping;
//texture.repeat.set( 1, 4 );
var materials = [];
materials.push(new THREE.MeshBasicMaterial({ map: texture1 }));
materials.push(new THREE.MeshBasicMaterial({ map: texture2 }));
materials.push(new THREE.MeshBasicMaterial({ map: texture3 }));
var cylinder = new THREE.Mesh( geometry, materials );
cylinder.position.y = 25;
scene.add( cylinder);
camera.position.z = 40;
function render() {
requestAnimationFrame(render);
//cylinder.rotation.z += 0.05;
cylinder.rotation.y += 0.005;
renderer.render(scene, camera);
}
render();
</script>
</body>
You want to apply three textures to your cylinder.
If you don't want to merge your textures into a single texture, one easy solution is to render three cylinder wedges, each with its own texture. Use a pattern like the following:
var group = new THREE.Group();
scene.add( group );
var geometry = new THREE.CylinderBufferGeometry( 5, 5, 10, 16, 1, false, 0, 2 * Math.PI / 3 ); // 1/3 cylinder wedge
var endCapMaterial = new THREE.MeshBasicMaterial();
// mesh
mesh = new THREE.Mesh( geometry, [ new THREE.MeshBasicMaterial( { map: texture1 } ), endCapMaterial, endCapMaterial ] );
mesh.rotation.set( 0, 0, 0 );
group.add( mesh );
mesh = new THREE.Mesh( geometry, [ new THREE.MeshBasicMaterial( { map: texture2 } ), endCapMaterial, endCapMaterial ] );
mesh.rotation.set( 0, 2 * Math.PI / 3, 0 );
group.add( mesh );
mesh = new THREE.Mesh( geometry, [ new THREE.MeshBasicMaterial( { map: texture3 } ), endCapMaterial, endCapMaterial ] );
mesh.rotation.set( 0, 4 * Math.PI / 3, 0 );
group.add( mesh );
three.js r.89
Another way is to assign textures to each face of your geometry using geometry.faces[i].materialIndex property. In this case you should use the number of radial segments that is a multiple of three (if you have 3 textures).
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/89/three.min.js"></script>
<html>
<head>
<title>My first three.js app</title>
<style>
body { margin: 0; overflow:hidden;}
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 100, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.y = 24;
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var diameter = 20;
var radialSegments = 33;
var geometry = new THREE.CylinderGeometry( diameter, diameter, 15, radialSegments );
var img1 = "http://d2gg9evh47fn9z.cloudfront.net/800px_COLOURBOX9108127.jpg";
var img2 = "http://d2gg9evh47fn9z.cloudfront.net/thumb_COLOURBOX8923432.jpg";
var img3 = "http://d2gg9evh47fn9z.cloudfront.net/800px_COLOURBOX19377428.jpg";
var texture1 = new THREE.TextureLoader().load( img1 );
var texture2 = new THREE.TextureLoader().load( img2 );
var texture3 = new THREE.TextureLoader().load( img3 );
THREE.DefaultLoadingManager.onLoad = function () {
var materials = [];
materials.push(new THREE.MeshBasicMaterial({ map: texture1 }));
materials.push(new THREE.MeshBasicMaterial({ map: texture2 }));
materials.push(new THREE.MeshBasicMaterial({ map: texture3 }));
var l = geometry.faces.length;
for (var i = 0; i < l; i++) {
if (geometry.faces[i].normal.y !== 0) {
// these are caps
geometry.faces[i].materialIndex = 0;
} else {
// each segment has 2 faces
geometry.faces[i].materialIndex = Math.floor(i * 3 / (radialSegments * 2));
}
}
var cylinder = new THREE.Mesh( geometry, materials);
cylinder.position.y = 25;
scene.add( cylinder);
camera.position.z = 40;
function render() {
requestAnimationFrame(render);
cylinder.rotation.y += 0.005;
renderer.render(scene, camera);
}
render();
}
</script>
</body>
Related
I am trying to generate a 3d graph using three.js
Code:
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/three#0.119.0/build/three.min.js"></script>
<style>
body { margin: 0; }
canvas { display: block; }
</style>
</head>
<body>
<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 node1_geometry = new THREE.BoxGeometry( 1, 1, 1 );
var node1_material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var node1 = new THREE.Mesh( node1_geometry, node1_material );
node1.position.set(-2, 4, 1);
var node2_geometry = new THREE.BoxGeometry( 1, 1, 1 );
var node2_material = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
var node2 = new THREE.Mesh( node2_geometry, node2_material );
node2.position.set(2, 4, 1);
var edge_geometry = new THREE.Geometry();
edge_geometry.vertices.push( node1.position, node2.position );
var edge_material = new THREE.LineBasicMaterial( { color: 0xffffff, linewidth: 2 } );
var edge = new THREE.Line( edge_geometry, edge_material );
scene.add( node1 );
scene.add( node2 );
scene.add( edge );
camera.position.z = 5;
var animate = function () {
requestAnimationFrame( animate );
renderer.render( scene, camera );
};
animate();
</script>
</body>
</html>
But this only gives a black window and the graph is not displayed.
Suggestions on how to fix this will be really helpful.
To get the snippet to run you have a small problem with you line
var edge_material = new THREE.LineBasicMaterial( { color: 0xffffff, linewidth: 2 } );
You can change this to:
var edge_material = new THREE.LineDashedMaterial({
color: 0xffffff,
dashSize: 2,
gapSize: 2
});
It should now render, but a black background still shows up. The problem now is that your camera is not angled at the content you have created, so add a line with a camera position below.
camera.position.y = 5;
Now you should be able to see your two boxes, and the line.
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
scene.background = new THREE.Color(0x333333);
var node1_geometry = new THREE.BoxGeometry(1, 1, 1);
var node1_material = new THREE.MeshBasicMaterial({
color: 0x00ff00
});
var node1 = new THREE.Mesh(node1_geometry, node1_material);
node1.position.set(-2, 4, 1);
var node2_geometry = new THREE.BoxGeometry(1, 1, 1);
var node2_material = new THREE.MeshBasicMaterial({
color: 0xff00ff
});
var node2 = new THREE.Mesh(node2_geometry, node2_material);
node2.position.set(2, 4, 1);
var edge_geometry = new THREE.Geometry();
edge_geometry.vertices.push(node1.position, node2.position);
var edge_material = new THREE.LineDashedMaterial({
color: 0xffffff,
dashSize: 2,
gapSize: 2
});
var edge = new THREE.Line(edge_geometry, edge_material);
scene.add(node1);
scene.add(node2);
scene.add(edge);
camera.position.z = 5;
camera.position.y = 5;
var animate = function() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
};
animate();
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/three#0.119.0/build/three.min.js"></script>
<style>
body {
margin: 0;
}
</style>
</head>
<body>
</body>
</html>
I'm new with three.js and I need to create a "room" with doors and windows. This is a simple task but I have found only not up to date answers.
Similar questions are here:
- subtracting-geometry-in-three-js
- is-it-possible-to-cut-parts-of-the-shape-geometry-away-in-three-js
In my case, I have a big box and I want to subtract a smaller one JSFIDDLE example:
var material = new THREE.MeshBasicMaterial({color: 0xffff00});
var faceMaterial_Y = new THREE.MeshLambertMaterial( { color: 0x0087E6 } );
var faceMaterial = new THREE.MeshLambertMaterial( { color: 0x0087E6 } );
var geometry_Y = new THREE.BoxBufferGeometry( 1.5, 1.5, 0.99 );
var faceMaterial_Y = new THREE.MeshLambertMaterial( { color: 0xffff00 } );
var cube_Y = new THREE.Mesh( geometry_Y, faceMaterial_Y);
scene.add(cube_Y);
var geometry_A = new THREE.BoxBufferGeometry( 0.7, 0.7, 0.7 );
material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );
var faceMaterial_A = new THREE.MeshLambertMaterial( { color: 0x00ff00 } );
var cubeA = new THREE.Mesh( geometry_A, material );
cubeA.position.set( 0.5, 0.5, 0 );
// HOW TO SUBTRACT cube_Y - cubeA?
//create a group and add the three cubes
var group = new THREE.Group();
group.add( cubeA );
group.add( cube_Y );
scene.add( group );
Thanks for helping me!
An option is to use ThreeCSG / ThreeBSP to subtract geometries.
Create ThreeBSP objects form the cube geometries:
var geometry_Y = new THREE.BoxBufferGeometry( 1.5, 1.5, 0.99 );
var geometry_A = new THREE.BoxBufferGeometry( 0.7, 0.7, 0.7 );
geometry_A.translate( 0.5, 0.5, 0 );
var bsp_A = new ThreeBSP(geometry_A);
var bsp_Y = new ThreeBSP(geometry_Y);
Subtract the geometry and create a Mesh:
var bsp_YsubA = bsp_Y.subtract(bsp_A);
var bsp_mesh = bsp_YsubA.toMesh();
bsp_mesh.material = new THREE.MeshLambertMaterial( { color: 0x00ff00 } );
scene.add( bsp_mesh );
See the example:
(function onLoad() {
var container, camera, scene, renderer, controls;
init();
animate();
function init() {
container = document.getElementById('container');
renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
container.appendChild(renderer.domElement);
scene = new THREE.Scene();
scene.background = new THREE.Color(0xffffff);
camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.set(3, 1, -1);
scene.add(camera);
window.onresize = function() {
renderer.setSize(window.innerWidth, window.innerHeight);
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
}
var ambientLight = new THREE.AmbientLight(0x404040);
scene.add(ambientLight);
var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
directionalLight.position.x = 4;
directionalLight.position.y = 1;
directionalLight.position.z = -2;
scene.add( directionalLight );
controls = new THREE.OrbitControls(camera, renderer.domElement);
addGridHelper();
createModel();
}
function createModel() {
var geometry_Y = new THREE.BoxBufferGeometry( 1.5, 1.5, 0.99 );
var geometry_A = new THREE.BoxBufferGeometry( 0.7, 0.7, 0.7 );
geometry_A.translate( 0.5, 0.5, 0 );
var bsp_A = new ThreeBSP(geometry_A);
var bsp_Y = new ThreeBSP(geometry_Y);
var bsp_YsubA = bsp_Y.subtract(bsp_A);
var bsp_mesh = bsp_YsubA.toMesh();
bsp_mesh.material = new THREE.MeshLambertMaterial( { color: 0x00ff00 } );
scene.add( bsp_mesh );
}
function addGridHelper() {
var helper = new THREE.GridHelper(10, 10);
helper.material.opacity = 0.25;
helper.material.transparent = true;
scene.add(helper);
var axis = new THREE.AxesHelper(100);
scene.add(axis);
}
function animate() {
requestAnimationFrame(animate);
render();
}
function render() {
renderer.render(scene, camera);
}
})();
<!--script src="https://threejs.org/build/three.js"></!--script-->
<script src="https://rawcdn.githack.com/mrdoob/three.js/r124/build/three.js"></script>
<script src="https://rawcdn.githack.com/mrdoob/three.js/r124/examples/js/controls/OrbitControls.js"></script>
<script src="https://rawgit.com/Wilt/ThreeCSG/develop/ThreeCSG.js"></script>
<div id="container"></div>
See also
Unexpected result using ThreeCSG
After using the threeBSP method, the created spheres are not smooth
https://github.com/manthrax/THREE-CSGMesh
You could try my CSG library. It is more robust than the other threejs csg solutions.
I want to rotate this cube around the light blue axis. I works If I change the rotation around THREE.Vector3(0,0,0) instead of THREE.Vector3(0.4,0,0.9)
I don't know why the cubes shape changes and why it gets smaller with more iterations
An fiddle showing this problem (please ignore the crappy implementation. I just changed a old one)
So this is how I do the rotation:
function rotate(deg) {
_initTranslation = new THREE.Vector3();
_initRotation = new THREE.Quaternion();
_initScale = new THREE.Vector3();
rotateMatrix = new THREE.Matrix4();
cube.matrix.decompose(_initTranslation, _initRotation, _initScale);
cube.matrix = rotateMatrix.compose(_initTranslation, new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(0.4,1,0.9), THREE.Math.degToRad(deg)), _initScale);
cube.matrixAutoUpdate = false;
cube.matrixWorldNeedsUpdate = true;
}
Maybe someone knows what I did wrong.
var renderer, scene, camera, controls;
var geometry, material, line, vertices, last, _initTranslation, _initRotation, initScale, rotateMatrix;
var deg = 0;
init();
animate();
function init() {
document.body.style.cssText = 'margin: 0; overflow: hidden;' ;
renderer = new THREE.WebGLRenderer( { alpha: 1, antialias: true, clearColor: 0xffffff } );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.set( 5, 5, 5 );
controls = new THREE.OrbitControls( camera, renderer.domElement );
geometry2 = new THREE.BoxGeometry( .5, .5, .5 );
material2 = new THREE.MeshNormalMaterial();
cube = new THREE.Mesh( geometry2, material2 );
scene.add( cube );
material = new THREE.LineBasicMaterial({ color: 0x0077ff });
geometry = new THREE.Geometry();
geometry.vertices.push( new THREE.Vector3( 0, 0, 0) );
line = new THREE.Line( geometry, material )
scene.add( line );
var sphereAxis = new THREE.AxesHelper(20);
scene.add(sphereAxis);
addStep();
cube.lookAt(new THREE.Vector3(0.4,0,0.9));
}
function addStep() {
vertices = geometry.vertices;
last = vertices[ vertices.length - 1 ];
vertices.push(
new THREE.Vector3(0.4,0,0.9)
);
geometry = new THREE.Geometry();
geometry.vertices = vertices;
scene.remove( line );
line = new THREE.Line( geometry, material )
scene.add( line );
}
function animate() {
rotate(deg)
deg += 5
requestAnimationFrame( animate );
renderer.render(scene, camera);
controls.update();
}
function rotate(deg) {
_initTranslation = new THREE.Vector3();
_initRotation = new THREE.Quaternion();
_initScale = new THREE.Vector3();
rotateMatrix = new THREE.Matrix4();
cube.matrix.decompose(_initTranslation, _initRotation, _initScale);
cube.matrix = rotateMatrix.compose(_initTranslation, new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(0.4,0,0.9), THREE.Math.degToRad(deg)), _initScale);
cube.matrixAutoUpdate = false;
cube.matrixWorldNeedsUpdate = true;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/102/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
The vector component of the Quaternion has to be (normalize.). The length of a normalized vector (Unit vector) is 1.0.
In your case the length of the vector component (THREE.Vector3(0.4, 0, 0.9)) is less than 1.0:
sqrt(0.9*0.9 + 0.0*0.0 + 0.4*0.4) = sqrt(0.81 + 0.16) = sqrt(0.97) = 0.9409
This causes that the cube scales sown by time. This can be verified by logging the scaling component (console.log(_initScale)).
If you would use a vector component with a length greater than 1.0 (e.g. THREE.Vector3(0.5, 0, 0.9), then the cube will scale up.
Normalize the axis of the Quaternion, to solve the issue:
let axis = new THREE.Vector3(0.4, 0, 0.9);
let q = new THREE.Quaternion().setFromAxisAngle(axis.normalize(), THREE.Math.degToRad(deg));
cube.matrix = rotateMatrix.compose(_initTranslation, q, _initScale);
If you want that one side of the cube is aligned to the axis, in that way, that the axis is normal to the side, then this is something completely different.
You've to do 2 rotations. First rotate the cube (e.g.) continuously around the x-axis, then turn the x-axis to the target axis (0.4, 0, 0.9). Use .setFromAxisAngle` to initialize a quaternion which rotates the x-axis to the target axis:
let x_axis = new THREE.Vector3(1, 0, 0);
let axis = new THREE.Vector3(0.4, 0, 0.9);
let q_align = new THREE.Quaternion().setFromUnitVectors(x_axis, axis.normalize());
let q_rotate = new THREE.Quaternion().setFromAxisAngle(x_axis, THREE.Math.degToRad(deg));
let q_final = q_align.clone().multiply(q_rotate);
cube.matrix = rotateMatrix.compose(_initTranslation, q, _initScale);
See the example, which compares the 2 different behavior:
var renderer, scene, camera, controls;
var geometry, material, line, vertices, last, _initTranslation, _initRotation, initScale, rotateMatrix;
var deg = 0;
init();
animate();
function init() {
document.body.style.cssText = 'margin: 0; overflow: hidden;' ;
renderer = new THREE.WebGLRenderer( { alpha: 1, antialias: true, clearColor: 0xffffff } );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.set( 1, 3, 3 );
controls = new THREE.OrbitControls( camera, renderer.domElement );
geometry2 = new THREE.BoxGeometry( .5, .5, .5 );
material2 = new THREE.MeshNormalMaterial();
let shift = 0.5
cube = new THREE.Mesh( geometry2, material2 );
cube.matrix.makeTranslation(shift, 0, 0);
scene.add( cube );
cube2 = new THREE.Mesh( geometry2, material2 );
cube2.matrix.makeTranslation(-shift, 0, 0);
scene.add( cube2 );
material = new THREE.LineBasicMaterial({ color: 0x0077ff });
geometry = new THREE.Geometry();
geometry.vertices.push( new THREE.Vector3(-0.4, 0, -0.9), new THREE.Vector3(0.4, 0, 0.9) );
line = new THREE.Line( geometry, material )
line.position.set(shift, 0, 0);
scene.add( line );
line2 = new THREE.Line( geometry, material )
line2.position.set(-shift, 0, 0);
scene.add( line2 );
var sphereAxis = new THREE.AxesHelper(20);
scene.add(sphereAxis);
window.onresize = function() {
renderer.setSize(window.innerWidth, window.innerHeight);
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
}
}
function animate() {
rotate(deg)
deg += 5
requestAnimationFrame( animate );
renderer.render(scene, camera);
controls.update();
}
function rotate(deg) {
_initTranslation = new THREE.Vector3();
_initRotation = new THREE.Quaternion();
_initScale = new THREE.Vector3();
let x_axis = new THREE.Vector3(1, 0, 0);
let axis = new THREE.Vector3(0.4, 0, 0.9);
// cube
cube.matrix.decompose(_initTranslation, _initRotation, _initScale);
let q_align = new THREE.Quaternion().setFromUnitVectors(x_axis, axis.normalize());
let q_rotate = new THREE.Quaternion().setFromAxisAngle(x_axis, THREE.Math.degToRad(deg));
let q_final = q_align.clone().multiply(q_rotate);
cube.matrix.compose(_initTranslation, q_final, _initScale);
cube.matrixAutoUpdate = false;
cube.matrixWorldNeedsUpdate = true;
// cube2
cube2.matrix.decompose(_initTranslation, _initRotation, _initScale);
q = new THREE.Quaternion().setFromAxisAngle(axis.normalize(), THREE.Math.degToRad(deg));
cube2.matrix.compose(_initTranslation, q, _initScale);
cube2.matrixAutoUpdate = false;
cube2.matrixWorldNeedsUpdate = true;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/102/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
Here is a sample code of my page. I want to get name of object, when user clicks it. And it works well with cube or sphere, but fails with polygon.
You may watch console logs to see clicks responds.
What should I do to get polygon name on click?
<html>
<head>
<title>Моё 3</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<div id="ThreeJS" style="position: absolute; left:0px; top:0px"></div>
<script src="http://stemkoski.github.io/Three.js/js/Three.js"></script>
<script src="http://stemkoski.github.io/Three.js/js/Detector.js"></script>
<script src="http://stemkoski.github.io/Three.js/js/Stats.js"></script>
<script src="http://stemkoski.github.io/Three.js/js/OrbitControls.js"></script>
<script src="http://stemkoski.github.io/Three.js/js/THREEx.KeyboardState.js"></script>
<script src="http://stemkoski.github.io/Three.js/js/THREEx.FullScreen.js"></script>
<script src="http://stemkoski.github.io/Three.js/js/THREEx.WindowResize.js"></script>
<script>
/*
Three.js "tutorials by example"
Author: Lee Stemkoski
Date: July 2013 (three.js v59dev)
*/
// MAIN
var polyhedronShape, polyhedronPts = [], cube, mesh;
// standard global variables
var container, scene, camera, renderer, controls, stats;
var keyboard = new THREEx.KeyboardState();
var clock = new THREE.Clock();
// custom global variables
var targetList = [];
var projector, mouse = { x: 0, y: 0 };
init();
animate();
// FUNCTIONS
function init()
{
// SCENE
scene = new THREE.Scene();
// CAMERA
var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight;
var VIEW_ANGLE = 45, ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT, NEAR = 0.1, FAR = 20000;
camera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR);
scene.add(camera);
camera.position.set(0,150,400);
camera.lookAt(scene.position);
// RENDERER
if ( Detector.webgl )
renderer = new THREE.WebGLRenderer( {antialias:true} );
else
renderer = new THREE.CanvasRenderer();
renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
container = document.getElementById( 'ThreeJS' );
container.appendChild( renderer.domElement );
// EVENTS
THREEx.WindowResize(renderer, camera);
THREEx.FullScreen.bindKey({ charCode : 'm'.charCodeAt(0) });
// CONTROLS
controls = new THREE.OrbitControls( camera, renderer.domElement );
// STATS
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.bottom = '0px';
stats.domElement.style.zIndex = 100;
container.appendChild( stats.domElement );
// LIGHT
var light = new THREE.PointLight(0xffffff);
light.position.set(0,250,0);
scene.add(light);
// FLOOR
var floorTexture = new THREE.ImageUtils.loadTexture( 'images/checkerboard.jpg' );
floorTexture.wrapS = floorTexture.wrapT = THREE.RepeatWrapping;
floorTexture.repeat.set( 10, 10 );
var floorMaterial = new THREE.MeshBasicMaterial( { map: floorTexture, side: THREE.DoubleSide } );
var floorGeometry = new THREE.PlaneGeometry(1000, 1000, 10, 10);
var floor = new THREE.Mesh(floorGeometry, floorMaterial);
floor.position.y = -0.5;
floor.rotation.x = Math.PI / 2;
scene.add(floor);
// SKYBOX/FOG
var skyBoxGeometry = new THREE.CubeGeometry( 10000, 10000, 10000 );
var skyBoxMaterial = new THREE.MeshBasicMaterial( { color: 0x9999ff, side: THREE.BackSide } );
var skyBox = new THREE.Mesh( skyBoxGeometry, skyBoxMaterial );
scene.add(skyBox);
////////////
// CUSTOM //
////////////
//////////////////////////////////////////////////////////////////////
// this material causes a mesh to use colors assigned to faces
var faceColorMaterial = new THREE.MeshBasicMaterial(
{ color: 0xffffff, vertexColors: THREE.FaceColors } );
var sphereGeometry = new THREE.SphereGeometry( 80, 32, 16 );
for ( var i = 0; i < sphereGeometry.faces.length; i++ )
{
face = sphereGeometry.faces[ i ];
face.color.setRGB( 0, 0, 0.8 * Math.random() + 0.2 );
}
var sphere = new THREE.Mesh( sphereGeometry, faceColorMaterial );
sphere.name = "Sphere";
sphere.title = "Magic sphere";
sphere.position.set(0, 50, 0);
scene.add(sphere);
targetList.push(sphere);
// Create an array of materials to be used in a cube, one for each side
var cubeMaterialArray = [];
// order to add materials: x+,x-,y+,y-,z+,z-
cubeMaterialArray.push( new THREE.MeshBasicMaterial( { color: 0xff3333 } ) );
cubeMaterialArray.push( new THREE.MeshBasicMaterial( { color: 0xff8800 } ) );
cubeMaterialArray.push( new THREE.MeshBasicMaterial( { color: 0xffff33 } ) );
cubeMaterialArray.push( new THREE.MeshBasicMaterial( { color: 0x33ff33 } ) );
cubeMaterialArray.push( new THREE.MeshBasicMaterial( { color: 0x3333ff } ) );
cubeMaterialArray.push( new THREE.MeshBasicMaterial( { color: 0x8833ff } ) );
var cubeMaterials = new THREE.MeshFaceMaterial( cubeMaterialArray );
// Cube parameters: width (x), height (y), depth (z),
// (optional) segments along x, segments along y, segments along z
var cubeGeometry = new THREE.CubeGeometry( 100, 100, 100, 1, 1, 1 );
// using THREE.MeshFaceMaterial() in the constructor below
// causes the mesh to use the materials stored in the geometry
cube = new THREE.Mesh( cubeGeometry, cubeMaterials );
cube.name = "Cube";
cube.title = "Cube to do";
cube.position.set(-100, 50, -50);
scene.add( cube );
targetList.push(cube);
// polyhedron
polyhedronPts.push( new THREE.Vector2 ( -100, 600 ) );
polyhedronPts.push( new THREE.Vector2 ( 300, 600 ) );
polyhedronPts.push( new THREE.Vector2 ( 600, -100 ) );
polyhedronShape = new THREE.Shape( polyhedronPts );
var extrudeSettings = {amount: 20}; // bevelSegments: 2, steps: 2 , bevelSegments: 5, bevelSize: 8, bevelThickness:5
var geometry = new THREE.ExtrudeGeometry( polyhedronShape, extrudeSettings );
polyhedron = THREE.SceneUtils.createMultiMaterialObject( geometry, [ new THREE.MeshBasicMaterial( { color: 0x00cc00 } ), new THREE.MeshBasicMaterial( { color: 0xff3333, wireframe: true, transparent: true } ) ] );
//geometry.computeVertexNormals();
polyhedron.name = "Polyhedron";
polyhedron.title = "Polyhedron is nice";
polyhedron.position.set( 0, -333, 0 );
//polyhedron.rotation.set( 0, 0, 100 );
//polyhedron.scale.set( 1, 1, 1 );
scene.add(polyhedron);
targetList.push(polyhedron);
//////////////////////////////////////////////////////////////////////
// initialize object to perform world/screen calculations
projector = new THREE.Projector();
// when the mouse moves, call the given function
document.addEventListener( 'mousedown', onDocumentMouseDown, false );
}
function onDocumentMouseDown( event )
{
// the following line would stop any other event handler from firing
// (such as the mouse's TrackballControls)
// event.preventDefault();
//console.log("Click.");
// update the mouse variable
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
// find intersections
// create a Ray with origin at the mouse position
// and direction into the scene (camera direction)
var vector = new THREE.Vector3( mouse.x, mouse.y, 1 );
projector.unprojectVector( vector, camera );
var ray = new THREE.Raycaster( camera.position, vector.sub( camera.position ).normalize() );
// create an array containing all objects in the scene with which the ray intersects
var intersects = ray.intersectObjects( targetList, true );
// if there is one (or more) intersections
if ( intersects.length > 0 )
{
console.log(intersects[0]);
//console.log("Hit # " + toString( intersects[0].point ) );
console.log("Hit # " + intersects[0].object.name);
// change the color of the closest face.
intersects[ 0 ].face.color.setRGB( 0.8 * Math.random() + 0.2, 0, 0 );
intersects[ 0 ].object.geometry.colorsNeedUpdate = true;
}
}
function toString(v) { return "[ " + v.x + ", " + v.y + ", " + v.z + " ]"; }
function animate()
{
requestAnimationFrame( animate );
render();
update();
}
function update()
{
if ( keyboard.pressed("z") )
{
// do something
}
controls.update();
stats.update();
}
function render()
{
renderer.render( scene, camera );
}
</script>
</body>
</html>
The call to THREE.SceneUtils.createMultiMaterialObject() (to create your polyhedron) returns a THREE.Object3D where the call to THREE.Mesh() (to create your sphere and cube) returns a THREE.Mesh. So they are different entities but you treat them the same. If instead you call:
polyhedron = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: 0x00cc00 } ) );
then you can get the name of your polyhedron, since now polyhedron is of type THREE.Mesh()
Otherwise you would have to parse the children of the polyhedron (since it is a THREE.Object3D())
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 );