Related
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>
I made a TubeGeometry by passing in a SplineCurve3 / CatmullRomCurve3 path as a parameter.
I am trying to update the position of each of the path's points with geometry.parameters.path.points[1].y += 0.01; under requestAnimationFrame.
The values itself updates on console.log but the points dont move. How can i do this?
By the way, i'm not looking to move 'vertices' but rather the points of the path that shape how the tube is rendered.
var camera, scene, light, renderer, geometry, material, mesh;
init();
animate();
function init() {
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
// default bg canvas color //
renderer.setClearColor(0x00ff00);
// use device aspect ratio //
// renderer.setPixelRatio(window.devicePixelRatio);
// set size of canvas within window //
renderer.setSize(window.innerWidth, window.innerHeight);
// create camera //
// params = field of view, aspect ratio, clipping of near objects, clipping of far objs
camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 0.1, 3000);
camera.position.z = 100;
// create scene
scene = new THREE.Scene();
// create ambient lighting, params -> color, intensity
light = new THREE.AmbientLight(0xffffff, 0.5)
// add light to scene
scene.add(light)
// create line, with params as x,y,z
var curve = new THREE.CatmullRomCurve3([
new THREE.Vector3( -60, 0, 0 ),
new THREE.Vector3( -50, 10, 0 ),
new THREE.Vector3( -40, 0, 0 ),
new THREE.Vector3( -30, -10, 0 ),
new THREE.Vector3( -20, 0, 0 ),
new THREE.Vector3( -10, 10, 0 ),
new THREE.Vector3( 0, 0, 0 ),
new THREE.Vector3( 10, -10, 0 ),
new THREE.Vector3( 20, 0, 0 ),
new THREE.Vector3( 30, 10, 0 ),
new THREE.Vector3( 40, 0, 0 ),
new THREE.Vector3( 50, -10, 0 ),
new THREE.Vector3( 60, 0, 0 )
]);
curve.verticesNeedUpdate = true;
for (i = 0; i < curve.points.length; i++) {
// this will get a number between 1 and 10;
var num = Math.floor(Math.random()*10) + 1;
num *= Math.floor(Math.random()*2) == 1 ? 1 : -1;
curve.points[i].y = num;
// console.log(curve.points[i].y);
}
geometry = new THREE.TubeGeometry(curve, 1000, 0.2, 8, false);
geometry.dynamic = true;
/* standard material */
material = new THREE.MeshBasicMaterial({
color: 0xff0000
});
// create mesh
mesh = new THREE.Mesh(geometry, material);
// set positon of line
mesh.position.set(0,0,-10);
// add to scene
scene.add(mesh);
document.body.appendChild(renderer.domElement);
} /* end init */
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
//console.log(geometry.parameters.path.points);
function animate() {
requestAnimationFrame(animate);
render();
}
function render() {
// mesh.rotation.x += 0.01;
// mesh.rotation.y += 0.01;
geometry.parameters.path.points[1].y += 0.01;
geometry.verticesNeedUpdate = true;
//console.log(geometry.parameters.path.points[1].y)
/* render scene and camera */
renderer.render(scene,camera);
}
body {
margin:0;
overflow: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/87/three.min.js"></script>
I wasn't able to get it working using TubeGeometry, but I did with TubeBufferGeometry. Luckily, there isn't much to change, because both use the curve path to define the mesh vertices. You're free to try to replicate this with TubeGeometry instead.
The main problem you're seeing though is that Tube(Buffer)Geometry BUILDS geometry, rather than IS geometry, and that's where the convenience ends. Updating the path does not trigger the geometry to rebuild. Instead, if you update your path, you must recreate the Tube(Buffer)Geometry.
In the code below, all I did was swap TubeBufferGeometry in place of TubeGeometry, changed geometry.verticesNeedUpdated to geometry.needsUpdate (this is how BufferGeometry handles updates), and added the line which re-builds the tube:
geometry.copy(new THREE.TubeBufferGeometry(geometry.parameters.path, 1000, 0.2, 8, false));
var camera, scene, light, renderer, geometry, material, mesh;
init();
animate();
function init() {
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
// default bg canvas color //
renderer.setClearColor(0x00ff00);
// use device aspect ratio //
// renderer.setPixelRatio(window.devicePixelRatio);
// set size of canvas within window //
renderer.setSize(window.innerWidth, window.innerHeight);
// create camera //
// params = field of view, aspect ratio, clipping of near objects, clipping of far objs
camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 0.1, 3000);
camera.position.z = 100;
// create scene
scene = new THREE.Scene();
// create ambient lighting, params -> color, intensity
light = new THREE.AmbientLight(0xffffff, 0.5)
// add light to scene
scene.add(light)
// create line, with params as x,y,z
var curve = new THREE.CatmullRomCurve3([
new THREE.Vector3( -60, 0, 0 ),
new THREE.Vector3( -50, 10, 0 ),
new THREE.Vector3( -40, 0, 0 ),
new THREE.Vector3( -30, -10, 0 ),
new THREE.Vector3( -20, 0, 0 ),
new THREE.Vector3( -10, 10, 0 ),
new THREE.Vector3( 0, 0, 0 ),
new THREE.Vector3( 10, -10, 0 ),
new THREE.Vector3( 20, 0, 0 ),
new THREE.Vector3( 30, 10, 0 ),
new THREE.Vector3( 40, 0, 0 ),
new THREE.Vector3( 50, -10, 0 ),
new THREE.Vector3( 60, 0, 0 )
]);
curve.verticesNeedUpdate = true;
for (i = 0; i < curve.points.length; i++) {
// this will get a number between 1 and 10;
var num = Math.floor(Math.random()*10) + 1;
num *= Math.floor(Math.random()*2) == 1 ? 1 : -1;
curve.points[i].y = num;
// console.log(curve.points[i].y);
}
geometry = new THREE.TubeBufferGeometry(curve, 1000, 0.2, 8, false);
geometry.dynamic = true;
/* standard material */
material = new THREE.MeshBasicMaterial({
color: 0xff0000
});
// create mesh
mesh = new THREE.Mesh(geometry, material);
// set positon of line
mesh.position.set(0,0,-10);
// add to scene
scene.add(mesh);
document.body.appendChild(renderer.domElement);
} /* end init */
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
//console.log(geometry.parameters.path.points);
function animate() {
requestAnimationFrame(animate);
render();
}
function render() {
// mesh.rotation.x += 0.01;
// mesh.rotation.y += 0.01;
geometry.parameters.path.points[3].y += 0.01;
geometry.copy(new THREE.TubeBufferGeometry(geometry.parameters.path, 1000, 0.2, 8, false));
geometry.needsUpdate = true;
//console.log(geometry.parameters.path.points[1].y)
/* render scene and camera */
renderer.render(scene,camera);
}
body {
margin:0;
overflow: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/87/three.min.js"></script>
I need to create perfect ring geometry in three.js. I am looking for something like this:
I spend more than a day to find how to do this, and I am stuck with code like this:
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();
var controls = new THREE.OrbitControls( camera, renderer.domElement );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
ring = '';
var loader = new THREE.TextureLoader();
loader.load('img/water.jpg', function ( texture ) {
var geometry = new THREE.TorusGeometry( 5, 1, 8, 1900 );
ring = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({map: texture, wireframe: true}));
scene.add(ring);
});
camera.position.z = 20;
var render = function () {
requestAnimationFrame( render );
ring.rotation.y = 0.4;
renderer.render(scene,camera);
};
render();
EDIT:
My code has changed, and now it looks like this:
var container, stats;
var camera, scene, renderer;
var group;
var targetRotation = 0;
var targetRotationOnMouseDown = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.set( 100, 350, 00 );
scene.add( camera );
var light = new THREE.PointLight( 0xffffff, 0.9 );
camera.add( light );
group = new THREE.Group();
group.position.y = 0;
scene.add( group );
var loader = new THREE.TextureLoader();
var texture = loader.load( "img/metal.png" );
texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set( 0.008, 0.008 );
function addShape( shape, extrudeSettings, color, x, y, z, rx, ry, rz, s ) {
// flat shape with texture
// note: default UVs generated by ShapeGemoetry are simply the x- and y-coordinates of the vertices
var geometry = new THREE.ExtrudeGeometry( shape, extrudeSettings );
var mesh = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial( { color: color } ) );
mesh.position.set( x, y, z );
mesh.rotation.set( rx, ry, rz );
mesh.scale.set( s, s, s );
group.add( mesh );
}
// Arc circle 1
var x = 0, y = 0;
var arcShape1 = new THREE.Shape();
arcShape1.moveTo( 0, 0 );
arcShape1.absarc( 10, 10, 11, 0, Math.PI*2, false );
var holePath1 = new THREE.Path();
holePath1.moveTo( 20, 10 );
holePath1.absarc( 10, 10, 10, 0, Math.PI*2, true );
arcShape1.holes.push( holePath1 );
//
// Arc circle 2
var x = 0, y = 0;
var arcShape2 = new THREE.Shape();
arcShape2.moveTo( 0, 0 );
arcShape2.absarc( 10, 10, 13, 0, Math.PI*2, false );
var holePath2 = new THREE.Path();
holePath2.moveTo( 25, 10 );
holePath2.absarc( 10, 10, 12, 0, Math.PI*2, true );
arcShape2.holes.push( holePath2 );
//
var extrudeSettings = { amount: 1.6, bevelEnabled: true, bevelSegments: 30, steps: 30, bevelSize: 0.3, bevelThickness: 1.5, curveSegments: 100 };
// addShape( shape, color, x, y, z, rx, ry,rz, s );
//addShape( heartShape, extrudeSettings, 0xf00000, 60, 100, 0, 0, 0, Math.PI, 1 );
addShape( arcShape1, extrudeSettings, 0xffc107, -35, -30, -20, 0, 0, 0, 4 );
addShape( arcShape2, extrudeSettings, 0xffc107, -40, -22, -50, 0, 0.6, 0, 4 );
//
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setClearColor( 0xf0f0f0 );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.shadowMapEnabled = true;
renderer.shadowMapType = THREE.PCFSoftShadowMap;
group.castShadow = true;
group.receiveShadow = false;
container.appendChild( renderer.domElement );
var controls = new THREE.OrbitControls( camera, renderer.domElement );
renderer.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
renderer.render( scene, camera );
}
The result looks like this:
And now the questions: how to make this line on the ring dissapear, how to make my ring more shiny, how to make my ring more 'circular' on the left and right side?
Should works fine. It was the bevel at junction at PI*2 causing the 'line' thing. You can solve the problem by overlapping the two edges of the curve.
arcShape1.absarc( 10, 10, 11, 0, Math.PI*1.99, false );
holePath1.absarc( 10, 10, 10, 0, Math.PI*2.01, true );
arcShape2.absarc( 10, 10, 13, 0, Math.PI*1.99, false );
holePath2.absarc( 10, 10, 12, 0, Math.PI*2.01, true );
! Please click to see the screenshot. I do not have enough reputation to post the picture here.
I found that by adding more light sources in various locations and color, I could increase perceived reflectivity and shine, but this is assuming it is the only object in the scene.
Is it just me or does this WebGL animation: http://samnorris.co.nz/work/portfoliowip/ result in particularly poor performance? It's mostly fine when testing it on my computer at home in Firefox and Chrome and runs reasonably smoothly, but on my computer at work (in Chrome, only browser I can test here) the animation is very laggy and seems to be causing generally poor browser performance..
Work PC is Intel i5 3470, with 12gb ram installed - which I would have thought should handle this animation without too much difficulty? Graphics card appears to be some kind of crappy integrated Intel one though... could that be the problem?
Here is the entire WebGL code if anyone might be able to spot anything that is unoptimized/could be leading to poor performance?
var container, stats;
var camera, scene, renderer, composer;
var mesh, group1, group2, group3, light, sphere, lightMesh, quaternion, ring, ring2;
var mouseX = 0, mouseY = 0;
var SCREEN_WIDTH = window.innerWidth;
var SCREEN_HEIGHT = window.innerHeight;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
function init(){
gl.colorMask(true, true, true, true);
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.colorMask(true, true, true, false);
scene = new THREE.Scene();
//camera
camera = new THREE.PerspectiveCamera( 20, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 8000 );
camera.position.z = 2000;
//light
light = new THREE.DirectionalLight( 0xffffff );
light.position.set( .5, .5, .5 );
scene.add( light );
scene.fog = new THREE.Fog( 0x000000, 100, 1 );
sphere = new THREE.SphereGeometry( 10, 16, 8, 1 );
lightMesh = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { transparent: true, color: 0x000000, opacity: 0.8 } ) );
scene.add( lightMesh );
var faceIndices = [ 'a', 'b', 'c', 'd' ];
var color, f, p, n, vertexIndex,
radius = 100,
geometry = new THREE.IcosahedronGeometry( radius, 3 );
var materials = [
new THREE.MeshLambertMaterial( { color: 0xffffff, shading: THREE.FlatShading, vertexColors: THREE.VertexColors } )
];
group1 = THREE.SceneUtils.createMultiMaterialObject( geometry, materials );
group1.position.x = 0;
scene.add( group1 );
ring = new THREE.TorusGeometry( 210, 1, 100, 50 );
var ringMaterial = new THREE.MeshLambertMaterial( {transparent: true, color: 0xffffff, shading: THREE.SmoothShading, vertexColors: THREE.VertexColors, side: THREE.DoubleSide, opacity: 1.0 } );
group2 = new THREE.Mesh( ring, ringMaterial );
scene.add( group2 );
ring2 = new THREE.TorusGeometry( 210, 1, 100, 50 );
var ringMaterial = new THREE.MeshLambertMaterial( {transparent: true, color: 0xffffff, shading: THREE.SmoothShading, vertexColors: THREE.VertexColors, side: THREE.DoubleSide, opacity: 1.0 } );
group3 = new THREE.Mesh( ring, ringMaterial );
scene.add( group3 );
/* ring3 = new THREE.TorusGeometry( 210, 1, 100, 50 );
var ringMaterial = new THREE.MeshLambertMaterial( {transparent: true, color: 0xffffff, shading: THREE.SmoothShading, vertexColors: THREE.VertexColors, side: THREE.DoubleSide, opacity: 1.0} );
group4 = new THREE.Mesh( ring, ringMaterial );
scene.add( group4 );*/
renderer = new THREE.WebGLRenderer( { antialias: true, alpha: false } );
renderer.setClearColor( 0x000000, 0);
var r = 1;
var g = 0;
var b = 0;
var a = 0;
gl.clearColor(r * a, g * a, b * a, a);
gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ZERO, gl.ONE);
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setPixelRatio( window.devicePixelRatio / 2);
$('.glitch').append( renderer.domElement );
// postprocessing
composer = new THREE.EffectComposer( renderer );
composer.addPass( new THREE.RenderPass( scene, camera ) );
var effect = new THREE.ShaderPass( THREE.DotScreenShader );
effect.uniforms[ 'scale' ].value = 150;
composer.addPass( effect );
var effect = new THREE.ShaderPass( THREE.RGBShiftShader );
effect.uniforms[ 'amount' ].value = 0.05;
effect.renderToScreen = true;
composer.addPass( effect );
composer.addPass( effect );
var glitch = new THREE.GlitchPass(5000);
glitch.renderToScreen = true;
composer.addPass(glitch);
//
window.addEventListener( 'resize', onWindowResize, false );
//
}
function render() {
var timer = Date.now() * 0.0010;
camera.lookAt( scene.position );
/*group1.rotation.x = timer;*/
/*group1.rotation.y = timer / 2;*/
group1.rotation.z = (timer / 2) + 45;
group2.rotation.x = timer;
group2.rotation.y = 25;
group3.rotation.y = timer;
group3.rotation.x = 45;
/* group4.rotation.y = timer;
group4.rotation.x = 175;*/
/*
group3.rotation.x = timer;
group3.rotation.y = 25;
*/
composer.render();
;
/* renderer.render( scene, camera );*/
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
requestAnimationFrame( animate );
render();
}
init();
animate();
gl.colorMask(true, true, true, true);
The script below isn't working properly. (It just needs jquery and three.js to run). The troublesome lines are these two:
// change the view so looking at the top of the airplane
views[1].camera.position.set( 0,5,0 );
views[1].camera.lookAt(objectManager.airplane.position);
Strangely, if those two lines are commented out, it can be seen that the two similar preceeding lines below do run as expected:
views[1].camera.lookAt(objectManager.airplane.position);
and
view.camera.position.set( 5,0,0 );
For some reason it seems that the call to camera.lookAt only works the first time. After that, the camera no longer follows the airplane object. I'd be extremely grateful if someone can figure out what I'm doing wrong!
The full script is below.
Thanks
$(function(){
var scene, renderer, viewPort, objectManager, views;
init();
animate();
function init() {
viewPort = $('body');
scene = new THREE.Scene();
// construct the two cameras
initialiseViews();
// construct airplane, lights and floor grid
objectManager = new ObjectManager();
objectManager.construct();
objectManager.addToScene(scene);
// make the second camera's position
// stay fixed relative to the airplane
objectManager.airplane.add(views[1].camera);
// make the second camera stay looking
// at the airplane
views[1].camera.lookAt(objectManager.airplane.position);
renderer = new THREE.WebGLRenderer();
renderer.setClearColorHex(0x000000, 1);
renderer.setSize( viewPort.innerWidth(), viewPort.innerHeight() );
viewPort.get(0).appendChild(renderer.domElement);
}
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
objectManager.tick();
for (var i in views){
views[i].render(scene, renderer);
}
}
function initialiseViews(){
views = [];
// ----------------------------------------------------
// Create the first view, static with respect to ground
// ----------------------------------------------------
views[0] = new View(viewPort, objectManager, scene);
var view = views[0];
view.fov = 40;
view.proportions.height = 0.5;
view.proportions.bottom = 0.5;
view.init();
view.camera.position.y = 1;
view.camera.position.z = 4;
// ----------------------------------------------------
// Create the second view, which follows the airplane
// ----------------------------------------------------
views[1] = new View(viewPort, objectManager, scene);
var view = views[1];
view.fov = 20;
view.proportions.height = 0.5;
view.init();
// set the initial position of the camera
// with respect to the airplane. Views from behind
view.camera.position.set( 5,0,0 );
view.updateCamera = function(){
// change the view so looking at the top of the airplane
views[1].camera.position.set( 0,5,0 );
views[1].camera.lookAt(objectManager.airplane.position);
views[1].camera.updateProjectionMatrix();
};
}
});
function View(viewport, om, scene){
this.scene = scene;
this.camera;
this.objectManager = om;
this.viewPort = viewport;
this.fov = 30;
// default: full width and height
this.proportions = { left: 0, bottom: 0, height: 1, width: 1 };
this.pixels = { left: 0, bottom: 0, height: 0, width: 0, aspect: 0 };
this.aspect;
this.init = function(){
this.pixels.left = Math.floor(this.proportions.left * this.viewPort.innerWidth());
this.pixels.width = Math.floor(this.proportions.width * this.viewPort.innerWidth());
this.pixels.bottom = Math.floor(this.proportions.bottom * this.viewPort.innerHeight());
this.pixels.height = Math.floor(this.proportions.height * this.viewPort.innerHeight());
this.pixels.aspect = this.pixels.width / this.pixels.height;
this.makeCamera();
};
this.makeCamera = function(){
this.camera = new THREE.PerspectiveCamera(
this.fov,
this.pixels.aspect,
0.1, 10000
);
this.camera.updateProjectionMatrix();
this.scene.add(this.camera);
};
this.render = function(scene, renderer){
this.updateCamera();
pixels = this.pixels;
renderer.setViewport(pixels.left, pixels.bottom, pixels.width, pixels.height);
renderer.setScissor(pixels.left, pixels.bottom, pixels.width, pixels.height);
renderer.enableScissorTest(true);
renderer.render( scene, this.camera );
};
this.updateCamera = function(){};
}
function ObjectManager(){
// manages all visible 3d objects (including lights)
this.airplane;
var grid;
var ambientLight;
var pointLight;
this.construct = function(){
this.constructAirplane();
this.constructLights();
this.constructFloorGrid();
};
this.constructAirplane = function(){
this.airplane = new THREE.Object3D();
var fuselage = newCube(
{x: 1, y: 0.1, z: 0.1},
{x: 0, y: 0, z: 0},
[0xffff00, 0x808000, 0x0000ff, 0xff00000, 0xffffff, 0x808080],
[0, 1, 2, 3, 4, 5]
);
this.airplane.add(fuselage);
var tail = newCube(
{x: 0.15, y: 0.2, z: 0.03},
{x: 0.5, y: 0.199, z: 0},
[0xffff00, 0x808000, 0x0000ff, 0xff00000, 0xffffff, 0x808080],
[0, 1, 2, 3, 4, 5]
);
this.airplane.add(tail);
var wings = newCube(
{x: 0.3, y: 0.05, z: 1},
{x: -0.05, y: 0, z: 0},
[0xffff00, 0x808000, 0x0000ff, 0xff00000, 0xffffff, 0x808080],
[0, 1, 2, 3, 4, 5]
);
this.airplane.add(wings);
};
this.constructLights = function(){
ambientLight = new THREE.AmbientLight(0x808080);
pointLight = new THREE.PointLight(0x808080);
pointLight.position = {x: 100, y: 100, z: 100};
};
this.constructFloorGrid = function(){
grid = new THREE.Object3D();
var geometry = new THREE.Geometry();
geometry.vertices.push(new THREE.Vector3( - 200, 0, 0 ) );
geometry.vertices.push(new THREE.Vector3( 200, 0, 0 ) );
linesMaterial = new THREE.LineBasicMaterial( { color: 0x00ff00, opacity: 1, linewidth: .1 } );
for ( var i = 0; i <= 200; i ++ ) {
var line = new THREE.Line( geometry, linesMaterial );
line.position.z = ( i * 2 ) - 200;
grid.add( line );
var line = new THREE.Line( geometry, linesMaterial );
line.position.x = ( i * 2 ) - 200;
line.rotation.y = 90 * Math.PI / 180;
grid.add( line );
}
};
this.addToScene = function(scene){
scene.add( this.airplane );
scene.add( grid );
scene.add( ambientLight );
scene.add( pointLight );
};
this.tick = function(){
this.airplane.rotation.x += 0.005;
this.airplane.rotation.y += 0.01;
this.airplane.position.x -= 0.05;
};
};
function newCube(dims, pos, cols, colAss){
var mesh;
var geometry;
var materials = [];
geometry = new THREE.CubeGeometry( dims.x, dims.y, dims.z );
for (var i in cols){
materials[i] = new THREE.MeshLambertMaterial( { color: cols[i], ambient: cols[i], overdraw: true } );
}
geometry.materials = materials;
for (var i in colAss){
geometry.faces[i].materialIndex = colAss[i];
}
mesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial( materials ) );
mesh.position = pos;
return mesh;
}
You need to do this:
views[1].camera.position.set( 0, 5, 0 );
views[1].camera.lookAt( new THREE.Vector3() );
and not this:
views[1].camera.position.set( 0, 5, 0 );
views[1].camera.lookAt( objectManager.airplane.position );
Your camera is a child of the airplane. It needs to lookAt ( 0, 0, 0 ) in it's local coordinate system -- not the airplane's position in world space.
Your calls to updateProjectionMatrix() are not necessary. Copy the three.js examples.