three.js post processing maskpass with multiple renderpass never works

three.js post processing maskpass with multiple renderpass never works - three.js

I am working towards this:
Here is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
background-color: #000;
margin: 0px;
overflow: hidden;
}
</style>
</head>
<body>
<div id="container"></div>
<script src="../build/three.js"></script>
<script src="js/shaders/CopyShader.js"></script>
<script src="js/postprocessing/EffectComposer.js"></script>
<script src="js/postprocessing/ClearPass.js"></script>
<script src="js/postprocessing/ShaderPass.js"></script>
<script src="js/postprocessing/MaskPass.js"></script>
<script src="js/postprocessing/RenderPass.js"></script>
<script src="js/Detector.js"></script>
<script>
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var composer, renderer;
var box_mask, box_1, box_2;
init();
animate();
function init() {
var camera_mask = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
camera_mask.position.z = 6;
var camera_1 = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
camera_1.position.z = 6;
var camera_2 = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
camera_2.position.z = 6;
var scene_mask = new THREE.Scene();
var scene_1 = new THREE.Scene();
var scene_2 = new THREE.Scene();
scene_mask.background = new THREE.Color( 0x000000 );
scene_1.background = new THREE.Color( 0xffffff );
scene_2.background = new THREE.Color( 0x000000 );
var box_mask_1 = new THREE.CircleGeometry( 2, 4 );
var box_mask_2 = new THREE.CircleGeometry( 2, 4 );
var singleGeometry_mask = new THREE.Geometry();
var boxMesh_mask_1 = new THREE.Mesh(box_mask_1);
boxMesh_mask_1.position.z = 1;
var boxMesh_mask_2 = new THREE.Mesh(box_mask_2);
boxMesh_mask_2.rotation.y = Math.PI;
boxMesh_mask_2.position.z = -1;
boxMesh_mask_1.updateMatrix(); // as needed
singleGeometry_mask.merge(boxMesh_mask_1.geometry, boxMesh_mask_1.matrix);
boxMesh_mask_2.updateMatrix(); // as needed
singleGeometry_mask.merge(boxMesh_mask_2.geometry, boxMesh_mask_2.matrix);
var material_mask = new THREE.MeshBasicMaterial({color: 0xffffff});
box_mask = new THREE.Mesh(singleGeometry_mask, material_mask);
scene_mask.add( box_mask );
var box_1_1 = new THREE.CircleGeometry( 2, 4 );
var box_1_2 = new THREE.CircleGeometry( 2, 4 );
var singleGeometry_1 = new THREE.Geometry();
var boxMesh_1_1 = new THREE.Mesh(box_1_1);
boxMesh_1_1.position.z = -1;
var boxMesh_1_2 = new THREE.Mesh(box_1_2);
boxMesh_1_2.rotation.y = Math.PI;
boxMesh_1_2.position.z = 1;
boxMesh_1_1.updateMatrix();
singleGeometry_1.merge(boxMesh_1_1.geometry, boxMesh_1_1.matrix);
boxMesh_1_2.updateMatrix();
singleGeometry_1.merge(boxMesh_1_2.geometry, boxMesh_1_2.matrix);
var material_1 = new THREE.MeshBasicMaterial({color: 0x000000});
box_1 = new THREE.Mesh(singleGeometry_1, material_1);
scene_1.add( box_1 );
var box_2_1 = new THREE.CircleGeometry( 2, 4 );
var box_2_2 = new THREE.CircleGeometry( 2, 4 );
var singleGeometry_2 = new THREE.Geometry();
var boxMesh_2_1 = new THREE.Mesh(box_2_1);
boxMesh_2_1.position.z = -1;
var boxMesh_2_2 = new THREE.Mesh(box_2_2);
boxMesh_2_2.rotation.y = Math.PI;
boxMesh_2_2.position.z = 1;
boxMesh_2_1.updateMatrix();
singleGeometry_2.merge(boxMesh_2_1.geometry, boxMesh_2_1.matrix);
boxMesh_2_2.updateMatrix();
singleGeometry_2.merge(boxMesh_2_2.geometry, boxMesh_2_2.matrix);
var material_2 = new THREE.MeshBasicMaterial({color: 0xffffff});
box_2 = new THREE.Mesh(singleGeometry_2, material_2);
scene_2.add( box_2 );
renderer = new THREE.WebGLRenderer();
renderer.setClearColor( 0xffffff );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.autoClear = false;
document.body.appendChild( renderer.domElement );
var clearPass = new THREE.ClearPass();
var clearMaskPass = new THREE.ClearMaskPass();
var maskPass = new THREE.MaskPass( scene_mask, camera_mask );
var renderPass_1 = new THREE.RenderPass( scene_1, camera_1 );
var renderPass_2 = new THREE.RenderPass( scene_2, camera_2 );
var outputPass = new THREE.ShaderPass( THREE.CopyShader );
outputPass.renderToScreen = true;
var parameters = {
minFilter: THREE.LinearFilter,
magFilter: THREE.LinearFilter,
format: THREE.RGBFormat,
stencilBuffer: true
};
var renderTarget = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, parameters );
composer = new THREE.EffectComposer( renderer , renderTarget );
composer.addPass( clearPass );
composer.addPass( renderPass_1 );
composer.addPass( maskPass );
composer.addPass( renderPass_2 );
composer.addPass( clearMaskPass );
composer.addPass( outputPass );
}
function animate() {
requestAnimationFrame( animate );
var time = performance.now() * 0.001 * 2;
box_mask.rotation.y = time;
box_1.rotation.y = time;
box_2.rotation.y = time;
renderer.clear();
composer.render( time );
}
</script>
</body>
</html>
this never works:
composer.addPass( clearPass );
composer.addPass( renderPass_1 );
composer.addPass( maskPass );
composer.addPass( renderPass_2 );
composer.addPass( clearMaskPass );
composer.addPass( outputPass );
if i switch out "renderPass_2" with a THREE.TexturePass it works, but it's not what I want.
Here is the codepen:
https://codepen.io/oxbits/pen/yEQLGK?editors=0010
Anyone able to combine two renderPasses with a mask?
Should I be using a different approach?

I finally got it to work! Though I'm not sure how...
Take a look:
https://codepen.io/anon/pen/PyJObz
One trick was not using a scene background in the 2nd render. Instead I had to create a background mesh.
Code below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
html, body, canvas {
margin: 0px;
overflow: hidden;
}
#fps {
position: absolute;
top: 0px;
left: 0px;
color: #fff;
z-index: 50;
}
</style>
</head>
<body>
<div id="container"></div>
<script src="../build/three.js"></script>
<script src="js/shaders/CopyShader.js"></script>
<script src="js/postprocessing/EffectComposer.js"></script>
<script src="js/postprocessing/ClearPass.js"></script>
<script src="js/postprocessing/ShaderPass.js"></script>
<script src="js/postprocessing/MaskPass.js"></script>
<script src="js/postprocessing/RenderPass.js"></script>
<script src="js/Detector.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
// if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
let scene = null;
let normal = null;
let outline = null;
let outScene = null;
let maskScene = null;
let light = null;
let renderer = null;
let composer = null;
let camera1 = null;
let camera2 = null;
let camera3 = null;
let mesh1 = null;
let mesh2 = null;
let mesh3 = null;
let bg_mesh = null;
let renderTarget = null;
let screenWidth = window.innerWidth;
let screenHeight = window.innerHeight;
const clock = new THREE.Clock;
let elapsedTime = 0;
let frameCount = 0;
const init = function() {
// SCENE
scene = new THREE.Scene;
maskScene = new THREE.Scene;
outScene = new THREE.Scene;
setModel();
// SCENE CAMERA
camera1 = new THREE.PerspectiveCamera(40, screenWidth/screenHeight, 1, 1000);
camera1.position.set(0, 0, 10);
scene.add(camera1);
camera2 = new THREE.PerspectiveCamera(40, screenWidth/screenHeight, 1, 1000);
camera2.position.set(0, 0, 10);
outScene.add(camera2);
camera3 = new THREE.PerspectiveCamera(40, screenWidth/screenHeight, 1, 1000);
camera3.position.set(0, 0, 10);
maskScene.add(camera3);
scene.background = new THREE.Color( 0xffffff );
// RENDERER
renderer = new THREE.WebGLRenderer({
width: screenWidth,
height: screenHeight,
antialias: true
});
renderer.setSize(screenWidth, screenHeight);
renderer.setClearColor(0x000000);
renderer.autoClear = false;
renderer.gammaInput = true;
renderer.gammaOutput = true;
document.body.appendChild(renderer.domElement);
// POSTPROCESSING
const renderTargetParameters = {
minFilter: THREE.LinearFilter,
magFilter: THREE.LinearFilter,
format: THREE.RGBAFormat,
stencilBuffer: true
};
renderTarget = new THREE.WebGLRenderTarget(window.innerWidth, window.innerHeight, renderTargetParameters);
composer = new THREE.EffectComposer(renderer);
composer.renderTarget1.stencilBuffer = true;
composer.renderTarget2.stencilBuffer = true;
normal = new THREE.RenderPass(scene, camera1);
outline = new THREE.RenderPass(outScene, camera2);
outline.clear = false;
const mask = new THREE.MaskPass(maskScene, camera3);
mask.inverse = false;
const clearMask = new THREE.ClearMaskPass;
const copyPass = new THREE.ShaderPass(THREE.CopyShader);
copyPass.renderToScreen = true;
composer.addPass(normal);
composer.addPass(mask);
composer.addPass(outline);
composer.addPass(clearMask);
composer.addPass(copyPass);
// EVENTS
return window.addEventListener('resize', onWindowResize, false);
};
var setModel = function() {
var box_mask_1 = new THREE.CircleGeometry( 2, 4 );
var box_mask_2 = new THREE.CircleGeometry( 2, 4 );
var singleGeometry_mask = new THREE.Geometry();
var boxMesh_mask_1 = new THREE.Mesh(box_mask_1);
boxMesh_mask_1.position.z = 1;
var boxMesh_mask_2 = new THREE.Mesh(box_mask_2);
boxMesh_mask_2.rotation.y = Math.PI;
boxMesh_mask_2.position.z = -1;
boxMesh_mask_1.updateMatrix(); // as needed
singleGeometry_mask.merge(boxMesh_mask_1.geometry, boxMesh_mask_1.matrix);
boxMesh_mask_2.updateMatrix(); // as needed
singleGeometry_mask.merge(boxMesh_mask_2.geometry, boxMesh_mask_2.matrix);
var box_1_1 = new THREE.CircleGeometry( 2, 4 );
var box_1_2 = new THREE.CircleGeometry( 2, 4 );
var singleGeometry_1 = new THREE.Geometry();
var boxMesh_1_1 = new THREE.Mesh(box_1_1);
boxMesh_1_1.position.z = -1;
var boxMesh_1_2 = new THREE.Mesh(box_1_2);
boxMesh_1_2.rotation.y = Math.PI;
boxMesh_1_2.position.z = 1;
boxMesh_1_1.updateMatrix();
singleGeometry_1.merge(boxMesh_1_1.geometry, boxMesh_1_1.matrix);
boxMesh_1_2.updateMatrix();
singleGeometry_1.merge(boxMesh_1_2.geometry, boxMesh_1_2.matrix);
var box_2_1 = new THREE.CircleGeometry( 2, 4 );
var box_2_2 = new THREE.CircleGeometry( 2, 4 );
var singleGeometry_2 = new THREE.Geometry();
var boxMesh_2_1 = new THREE.Mesh(box_2_1);
boxMesh_2_1.position.z = -1;
var boxMesh_2_2 = new THREE.Mesh(box_2_2);
boxMesh_2_2.rotation.y = Math.PI;
boxMesh_2_2.position.z = 1;
boxMesh_2_1.updateMatrix();
singleGeometry_2.merge(boxMesh_2_1.geometry, boxMesh_2_1.matrix);
boxMesh_2_2.updateMatrix();
singleGeometry_2.merge(boxMesh_2_2.geometry, boxMesh_2_2.matrix);
const matColor = new THREE.MeshBasicMaterial({
color: 0x000000});
mesh1 = new THREE.Mesh(singleGeometry_1, matColor); // geometry, matColor);
scene.add(mesh1);
// flat mask
const matFlat = new THREE.MeshBasicMaterial({
color: 0x000000});
mesh2 = new THREE.Mesh(singleGeometry_mask, matFlat);
maskScene.add(mesh2);
const matColor2 = new THREE.MeshBasicMaterial({
color: 0xffffff});
mesh3 = new THREE.Mesh(singleGeometry_2, matColor2);
outScene.add(mesh3);
const matColor3 = new THREE.MeshBasicMaterial({
color: 0x000000});
bg_mesh = new THREE.Mesh(new THREE.CircleGeometry( 100, 4 ), matColor3);
outScene.add(bg_mesh);
bg_mesh.position.set(0, 0, -10);
};
var onWindowResize = function() {
screenWidth = window.innerWidth;
screenHeight = window.innerHeight;
camera1.aspect = screenWidth / screenHeight;
camera2.aspect = camera1.aspect;
camera3.aspect = camera1.aspect;
camera1.updateProjectionMatrix();
camera2.updateProjectionMatrix();
camera3.updateProjectionMatrix();
return renderer.setSize(screenWidth, screenHeight);
};
var animate = function() {
updateFps();
requestAnimationFrame(animate);
return render();
};
var render = function() {
const now = Date.now();
const delta = clock.getDelta();
if (mesh1) {
mesh1.rotation.y += 0.015;
mesh2.rotation.y = mesh1.rotation.y;
mesh3.rotation.y = mesh1.rotation.y;
}
return composer.render();
};
var updateFps = function() {
elapsedTime += clock.getDelta();
frameCount++;
if (elapsedTime >= 1) {
$('#fps').html(frameCount);
frameCount = 0;
return elapsedTime = 0;
}
};
init();
animate();
</script>
</body>
</html>

Just chiming in because I don't know the specifics of your situation but I have used the composer before...
What if you just add the texturePass after the maskPass and leave the renderPass1 as the next one after that?
The composer works by applying operations through a succession of buffers, so in between operations you sometimes have to do a texturePass to copy the current output back to the input for the next pass...
But this is just a guess, in case nobody else answers....

Related

why can't I cast or receive shadows in Three.js

I'm pretty new to this and I'm trying to create lightning and shadows on the objects I just made. As you can see on the picture of the result bellow none of them actually cast or recieve shadows.
I've already enable shadow mapping for the renderer, and also enabled shadow casting and receiving for all of my objects. What am I doing wrong?
<head>
<meta charset=utf-8>
<title>Three.js Object Tester</title>
<style>
body { margin: 0; overflow: hidden; }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<script type="module">
import * as THREE from './js-r119/build/three.module.js';
import { TrackballControls } from './js-r119/examples/jsm/controls/TrackballControls.js';
var WIDTH, HEIGHT, aspectRatio;
var renderer;
var scene, camera;
var controls;
var mesh;
init();
animate();
function init() {
HEIGHT = window.innerHeight;
WIDTH = window.innerWidth;
aspectRatio = WIDTH / HEIGHT;
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( WIDTH, HEIGHT );
renderer.setClearColor( 0x000000 );
renderer.shadowMap.enabled = true;
document.body.appendChild( renderer.domElement );
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 75, aspectRatio, 0.1, 1000 );
camera.position.set( 0, 40, 80 );
camera.lookAt( scene.position );
var light = new THREE.AmbientLight( 0xF5F5F3 ); //ambiens fény
scene.add( light );
var floorgeometry = new THREE.PlaneGeometry( 150, 150, 1, 1 );
var floormaterial = new THREE.MeshLambertMaterial( { color: 0xFFFFFF, wireframe: false } );
var floor = new THREE.Mesh( floorgeometry, floormaterial );
floor.material.side = THREE.DoubleSide;
floor.rotation.x = 1.57;
floor.position.z = 0;
floor.position.x = 0;
floor.position.y = -42.5;
floor.receiveShadow = true;
floor.castShadow = true;
scene.add( floor );
var vertgeometry = new THREE.BoxGeometry( 20, 45, 20);
var vertmaterial = new THREE.MeshLambertMaterial( { color: 0xD5D8DC, wireframe: false } );
var vert = new THREE.Mesh( vertgeometry, vertmaterial );
vert.castShadow = true;
vert.receiveShadow = true;
vert.rotation.z = 0;
vert.rotation.x = 0;
vert.rotation.y = 0;
vert.position.z = 0;
vert.position.x = 0;
vert.position.y = -20;
var horgeometry = new THREE.BoxGeometry( 20, 40, 20);
var hormaterial = new THREE.MeshLambertMaterial( { color: 0xD5D8DC, wireframe: false } );
var hor = new THREE.Mesh( horgeometry, hormaterial );
hor.castShadow = true;
hor.position.z = 0;
hor.position.y = -32.5;
hor.position.x = 30;
hor.rotation.z = 1.57;
hor.rotation.x = 0;
hor.rotation.y = 0;
scene.add( hor );
var roofgeometry = new THREE.ConeGeometry( 14.142, 40, 4);
var roofmaterial = new THREE.MeshLambertMaterial( { color: 0xF98E76, wireframe: false } );
var roof = new THREE.Mesh( roofgeometry, roofmaterial );
roof.castShadow = true;
roof.position.z = 0;
roof.position.y = 22.5;
roof.position.x = 0;
roof.rotation.z = 0;
roof.rotation.x = 0;
roof.rotation.y = 0.775;
scene.add( roof );
scene.add( vert );
var lampgeometry = new THREE.BoxGeometry( 2, 25, 2);
var lampmaterial = new THREE.MeshLambertMaterial( { color: 0x566573, wireframe: false } );
var lamp = new THREE.Mesh( lampgeometry, lampmaterial );
lamp.castShadow = true;
lamp.rotation.z = 0;
lamp.rotation.y = 0;
lamp.position.z = 0;
lamp.position.x = -60;
lamp.position.y = -30;
var spotgeometry = new THREE.BoxGeometry( 3, 3, 3);
var spotmaterial = new THREE.MeshLambertMaterial( { color: 0xF6F50B, wireframe: false } );
var spot = new THREE.Mesh( spotgeometry, spotmaterial );
spot.position.z = 0;
spot.position.y = -17.5;
spot.position.x = -60;
scene.add( lamp );
scene.add( spot );
var geometry = new THREE.SphereGeometry( 200, 20, 20);
var appearence = new THREE.MeshLambertMaterial ({
color: 0xa2a7a9,
wireframe: false
});
var objgeometry = new THREE.BoxGeometry(8,12,8);
var objmaterial = new THREE.MeshLambertMaterial({color: 0x1C1C03, wireframe: false});
var obj = new THREE.Mesh(objgeometry, objmaterial);
obj.castShadow = true;
obj.receiveShadow = true;
obj.position.z = 0;
obj.position.x = -40;
obj.position.y = -36.5;
scene.add(obj);
var sLight = new THREE.SpotLight( 0xF6F50B, 3 ); // spotfény segédgeometriával
sLight.position.set( -60, -17.5, 0 );
sLight.castShadow = true;
sLight.distance = 100;
sLight.target = obj;
sLight.castShadow = true;
sLight.shadow.mapSize.width = 2048;
sLight.shadow.mapSize.height = 2048;
scene.add( sLight );
var spotLightHelper = new THREE.SpotLightHelper( sLight );
scene.add( spotLightHelper );
window.addEventListener( 'resize', handleWindowResize, false );
controls = new TrackballControls( camera, renderer.domElement );
controls.rotateSpeed = 5.0;
controls.panSpeed = 1.0;
}
function handleWindowResize() {
HEIGHT = window.innerHeight;
WIDTH = window.innerWidth;
console.log( 'WIDTH=' + WIDTH + '; HEIGHT=' + HEIGHT );
renderer.setSize( WIDTH, HEIGHT );
aspectRatio = WIDTH / HEIGHT;
camera.aspect = aspectRatio;
camera.updateProjectionMatrix();
render();
}
function animate() {
requestAnimationFrame( animate );
controls.update();
render();
}
function render() {
renderer.render( scene, camera );
}
</script>
</body>
</html>

If you place a spot light in your scene, you have to ensure that no shadow casting meshes block the emissions of the lights. This happens in your app since the light is place "inside" the lamp mesh. Update code:
var WIDTH, HEIGHT, aspectRatio;
var renderer;
var scene, camera;
var controls;
var mesh, spotLightHelper;
init();
animate();
function init() {
HEIGHT = window.innerHeight;
WIDTH = window.innerWidth;
aspectRatio = WIDTH / HEIGHT;
renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setSize(WIDTH, HEIGHT);
renderer.setClearColor(0x000000);
renderer.shadowMap.enabled = true;
document.body.appendChild(renderer.domElement);
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(75, aspectRatio, 0.1, 1000);
camera.position.set(0, 40, 80);
camera.lookAt(scene.position);
var light = new THREE.AmbientLight(0xF5F5F3, 0.4); //ambiens fény
scene.add(light);
var floorgeometry = new THREE.PlaneGeometry(150, 150, 1, 1);
var floormaterial = new THREE.MeshPhongMaterial({
color: 0xFFFFFF,
wireframe: false
});
var floor = new THREE.Mesh(floorgeometry, floormaterial);
//floor.material.side = THREE.DoubleSide;
floor.rotation.x = -Math.PI * 0.5;
floor.position.z = 0;
floor.position.x = 0;
floor.position.y = -42.5;
floor.receiveShadow = true;
scene.add(floor);
var vertgeometry = new THREE.BoxGeometry(20, 45, 20);
var vertmaterial = new THREE.MeshPhongMaterial({
color: 0xD5D8DC,
wireframe: false
});
var vert = new THREE.Mesh(vertgeometry, vertmaterial);
vert.castShadow = true;
vert.receiveShadow = true;
vert.rotation.z = 0;
vert.rotation.x = 0;
vert.rotation.y = 0;
vert.position.z = 0;
vert.position.x = 0;
vert.position.y = -20;
var horgeometry = new THREE.BoxGeometry(20, 40, 20);
var hormaterial = new THREE.MeshPhongMaterial({
color: 0xD5D8DC,
wireframe: false
});
var hor = new THREE.Mesh(horgeometry, hormaterial);
hor.castShadow = true;
hor.position.z = 0;
hor.position.y = -32.5;
hor.position.x = 30;
hor.rotation.z = 1.57;
hor.rotation.x = 0;
hor.rotation.y = 0;
scene.add(hor);
var roofgeometry = new THREE.ConeGeometry(14.142, 40, 4);
var roofmaterial = new THREE.MeshPhongMaterial({
color: 0xF98E76,
wireframe: false
});
var roof = new THREE.Mesh(roofgeometry, roofmaterial);
roof.castShadow = true;
roof.position.z = 0;
roof.position.y = 22.5;
roof.position.x = 0;
roof.rotation.z = 0;
roof.rotation.x = 0;
roof.rotation.y = 0.775;
scene.add(roof);
scene.add(vert);
var lampgeometry = new THREE.BoxGeometry(2, 25, 2);
var lampmaterial = new THREE.MeshPhongMaterial({
color: 0x566573,
wireframe: false
});
var lamp = new THREE.Mesh(lampgeometry, lampmaterial);
lamp.rotation.z = 0;
lamp.rotation.y = 0;
lamp.position.z = 0;
lamp.position.x = -60;
lamp.position.y = -30;
var spotgeometry = new THREE.BoxGeometry(3, 3, 3);
var spotmaterial = new THREE.MeshPhongMaterial({
color: 0xF6F50B,
wireframe: false
});
var spot = new THREE.Mesh(spotgeometry, spotmaterial);
spot.position.z = 0;
spot.position.y = -17.5;
spot.position.x = -60;
scene.add(lamp);
scene.add(spot);
var geometry = new THREE.SphereGeometry(200, 20, 20);
var appearence = new THREE.MeshPhongMaterial({
color: 0xa2a7a9,
wireframe: false
});
var objgeometry = new THREE.BoxGeometry(8, 12, 8);
var objmaterial = new THREE.MeshPhongMaterial({
color: 0x1C1C03,
wireframe: false
});
var obj = new THREE.Mesh(objgeometry, objmaterial);
obj.castShadow = true;
obj.receiveShadow = true;
obj.position.z = 0;
obj.position.x = -40;
obj.position.y = -36.5;
scene.add(obj);
var sLight = new THREE.SpotLight(0xF6F50B, 1); // spotfény segédgeometriával
sLight.position.set(-60, -17.5, 0);
sLight.castShadow = true;
sLight.distance = 100;
sLight.target = obj;
sLight.angle = Math.PI * 0.2;
sLight.shadow.camera.near = 0.1;
sLight.shadow.camera.far = 100;
sLight.shadow.mapSize.width = 2048;
sLight.shadow.mapSize.height = 2048;
scene.add(sLight);
spotLightHelper = new THREE.SpotLightHelper(sLight);
scene.add(spotLightHelper);
var cameraHelper = new THREE.CameraHelper(sLight.shadow.camera);
scene.add(cameraHelper)
window.addEventListener('resize', handleWindowResize, false);
}
function handleWindowResize() {
HEIGHT = window.innerHeight;
WIDTH = window.innerWidth;
renderer.setSize(WIDTH, HEIGHT);
aspectRatio = WIDTH / HEIGHT;
camera.aspect = aspectRatio;
camera.updateProjectionMatrix();
render();
}
function animate() {
requestAnimationFrame(animate);
spotLightHelper.update();
render();
}
function render() {
renderer.render(scene, camera);
}
body {
margin: 0;
}
canvas {
display: block;
}
<script src="https://cdn.jsdelivr.net/npm/three#0.121.1/build/three.js"></script>
BTW: When using SpotLightHelper, makes sure to update this helper in the animation loop. Besides, CameraHelper is useful for debugging the shadow frustum.

Using THREE.Raycaster - I get always the id 8?

I would like to create a dashboard on which a certain number of "THREE.Meshes" appear. When I click on one of them with the mouse, I want to call a function that recognizes what I clicked on.
My problem:
I always get the ID:8 back from the "callFromTitleWithId" function. It doesn´t matter which one I selected with the mouseclick.
Maybe someone can help, I could not find the error :(
Here is the complete Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TEST</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<style>
body { margin: 0;
background: black; }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<!-- Bibs -->
<script src="../extlib/webthree/build/three.js"></script>
<script>
document.addEventListener('mousedown', onDocumentMouseDown, false);
var arrayTiles = [];
//[SCREEN]
var SCREEN_WIDTH = window.innerWidth - 5;
var SCREEN_HEIGHT = window.innerHeight - 5;
screenOrientationValue=0;
//RayCaster für Objekte
var raycaster2 = new THREE.Raycaster(new THREE.Vector3(0,0,35),new THREE.Vector3(0,0,1));
var mouse2 = new THREE.Vector2();
var renderer = new THREE.WebGLRenderer();
renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
document.body.appendChild( renderer.domElement );
var sceneWorld = new THREE.Scene();
sceneWorld.add( new THREE.AxesHelper(50) );
createTiles(sceneWorld);
var camera= new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
camera.position.set(0,0,35);
var light2 = new THREE.AmbientLight( 0x20202A, 20, 100 );
light2.position.set( 30, -10, 30 );
sceneWorld.add( light2 );
var animate = function () {
requestAnimationFrame( animate );
renderer.render( sceneWorld, camera);
sceneUpdate();
};
animate();
function sceneUpdate()
{
//Update
}
function callFromTitleWithId(titleId)
{
console.log("ID:"+titleId);
}
function onDocumentMouseDown(event)
{
event.preventDefault();
mouse2.x = (event.clientX / renderer.domElement.clientWidth) * 2 - 1;
mouse2.y = - (event.clientY / renderer.domElement.clientHeight) * 2 + 1;
raycaster2.setFromCamera(mouse2, camera);
var intersects2 = raycaster2.intersectObjects(arrayTiles,true);
if (intersects2.length > 0) {
console.log('Maus: X:'+mouse2.x+' Y:'+mouse2.y);
console.log("intersects:" + intersects2[0].object);
console.log("distance:" + intersects2[0].distance);
console.log("face:" + intersects2[0].face);
console.log("faceIndex:" + intersects2[0].faceIndex);
console.log("faceIndex y:" + intersects2[0].point.y);
console.log("faceIndex x:" + intersects2[0].point.x);
intersects2[0].object.callback();
}
}
function createTiles(sceneWorld)
{
var material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );
var materialSide = new THREE.MeshBasicMaterial( {color: 0xffff00} );
var materialsTiles = [materialSide, // Left side
materialSide, // Right side
materialSide, // Top side ---> THIS IS THE FRONT
materialSide, // Bottom side --> THIS IS THE BACK
material, // Front side
materialSide // Back side
];
var maxTileSizeWidth=11;
var maxTileSizeHeight=8;
var distanceBetween=2;
var distanceBorderLeft=-1;
var countInColumns=2;
var countInRow = 4;
var startCoordinatesX = ((((countInColumns * maxTileSizeWidth)+(countInColumns-6.5)*distanceBetween)/2))*-1;
var startCoordinatesY = 20;
var actualCoordinatesX = startCoordinatesX;
var actualCoordinatesY = startCoordinatesY;
//id for test
var idNumberForTest=0;
let r;
for(r=1; r<=countInRow; r++ )
{
let i;
for(i=1; i<=countInColumns; i++ )
{
var geometry = new THREE.BoxGeometry(maxTileSizeWidth, maxTileSizeHeight, 1 );
var tileX = new THREE.Mesh( geometry, materialsTiles );
tileX.position.set(actualCoordinatesX,actualCoordinatesY,0);
//Change actualCoordinates X
actualCoordinatesX = actualCoordinatesX + maxTileSizeWidth + distanceBetween;
idNumberForTest=idNumberForTest + 1;
tileX.callback = function(){callFromTitleWithId(idNumberForTest+'')};
arrayTiles.push(tileX);
sceneWorld.add( tileX );
}
actualCoordinatesY = actualCoordinatesY - (maxTileSizeHeight+1);
actualCoordinatesX = startCoordinatesX;
}
}
</script>
</body>
</html>
`

The problem is that idNumberForTest is equal for all objects. The callback functions always refer to the same variable. Instead of using a callback function, you can store the ID for the clicked mesh like so:
tileX.userData.id = idNumberForTest;
In this way, the correct ID is assigned to the respective object. Check out the following live example to see this approach in action.
document.addEventListener('mousedown', onDocumentMouseDown, false);
var arrayTiles = [];
//[SCREEN]
var SCREEN_WIDTH = window.innerWidth - 5;
var SCREEN_HEIGHT = window.innerHeight - 5;
screenOrientationValue=0;
//RayCaster für Objekte
var raycaster2 = new THREE.Raycaster(new THREE.Vector3(0,0,35),new THREE.Vector3(0,0,1));
var mouse2 = new THREE.Vector2();
var renderer = new THREE.WebGLRenderer();
renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
document.body.appendChild( renderer.domElement );
var sceneWorld = new THREE.Scene();
sceneWorld.add( new THREE.AxesHelper(50) );
createTiles(sceneWorld);
var camera= new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
camera.position.set(0,0,35);
var light2 = new THREE.AmbientLight( 0x20202A, 20, 100 );
light2.position.set( 30, -10, 30 );
sceneWorld.add( light2 );
var animate = function () {
requestAnimationFrame( animate );
renderer.render( sceneWorld, camera);
sceneUpdate();
};
animate();
function sceneUpdate()
{
//Update
}
function callFromTitleWithId(titleId)
{
console.log("ID:"+titleId);
}
function onDocumentMouseDown(event)
{
event.preventDefault();
mouse2.x = (event.clientX / renderer.domElement.clientWidth) * 2 - 1;
mouse2.y = - (event.clientY / renderer.domElement.clientHeight) * 2 + 1;
raycaster2.setFromCamera(mouse2, camera);
console.log( arrayTiles );
var intersects2 = raycaster2.intersectObjects(arrayTiles,true);
if (intersects2.length > 0) {
console.log('Maus: X:'+mouse2.x+' Y:'+mouse2.y);
console.log("intersects:" + intersects2[0].object);
console.log("distance:" + intersects2[0].distance);
console.log("face:" + intersects2[0].face);
console.log("faceIndex:" + intersects2[0].faceIndex);
console.log("faceIndex y:" + intersects2[0].point.y);
console.log("faceIndex x:" + intersects2[0].point.x);
console.log("ID:", intersects2[0].object.userData.id);
}
}
function createTiles(sceneWorld)
{
var material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );
var materialSide = new THREE.MeshBasicMaterial( {color: 0xffff00} );
var materialsTiles = [materialSide, // Left side
materialSide, // Right side
materialSide, // Top side ---> THIS IS THE FRONT
materialSide, // Bottom side --> THIS IS THE BACK
material, // Front side
materialSide // Back side
];
var maxTileSizeWidth=11;
var maxTileSizeHeight=8;
var distanceBetween=2;
var distanceBorderLeft=-1;
var countInColumns=2;
var countInRow = 4;
var startCoordinatesX = ((((countInColumns * maxTileSizeWidth)+(countInColumns-6.5)*distanceBetween)/2))*-1;
var startCoordinatesY = 20;
var actualCoordinatesX = startCoordinatesX;
var actualCoordinatesY = startCoordinatesY;
//id for test
var idNumberForTest=0;
let r;
for(r=1; r<=countInRow; r++ )
{
let i;
for(i=1; i<=countInColumns; i++ )
{
var geometry = new THREE.BoxGeometry(maxTileSizeWidth, maxTileSizeHeight, 1 );
var tileX = new THREE.Mesh( geometry, materialsTiles );
tileX.position.set(actualCoordinatesX,actualCoordinatesY,0);
//Change actualCoordinates X
actualCoordinatesX = actualCoordinatesX + maxTileSizeWidth + distanceBetween;
idNumberForTest=idNumberForTest + 1;
arrayTiles.push(tileX);
tileX.userData.id = idNumberForTest;
sceneWorld.add( tileX );
}
actualCoordinatesY = actualCoordinatesY - (maxTileSizeHeight+1);
actualCoordinatesX = startCoordinatesX;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>

Regarding electric field lines in three js

I would like to illustrate coulomb's law.I want to do 2 things.
1.I would like to show the force between any charge and resultant force.
2.And I want to show the electric field due to one charge on other.
I am done with the first one.So,how can I do the second one using three js?
<html>
<head>
<title>My first three.js app</title>
<meta charset="UTF-8">
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="three.js"></script>
<script src="OrbitControls.js"></script>
<script src="DragControls.js"></script>
<script src="TrackballControls.js"></script>
<script src= "ThreeCSG.js"></script>
<script src="ObjectControls.js"></script>
<script src="stats.min.js"></script>
<script src="dat.gui.min.js"></script>
<script src = "object.js"></script>
<script>
objects=[]
var gui;
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 45, window.innerWidth/window.innerHeight, 0.1, 1000 );
var IsDragRunning=false;
var objectDragging;
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
// var controls = new THREE.OrbitControls(camera,renderer.domElement);
camera.position.z = 60;
var dragElements = [];
var dragControls = new THREE.DragControls( dragElements, camera, renderer.domElement );
dragControls.addEventListener( 'dragstart', function ( event ) { /*controls.enabled = false;*/
IsDragRunning=true;} );
dragControls.addEventListener( 'dragend', function ( event ) {
IsDragRunning=false;
/*controls.enabled = true;*/ } );
scene.background = new THREE.Color("#FDF6D5");
var groundMaterial = new THREE.MeshBasicMaterial( );
//text geometry
var myfont;
function text(object,text1){
if(!myfont){
var loader = new THREE.FontLoader();
loader.load( 'optimer_regular.typeface.json', function ( font ) {
var count = 0;
myfont = font;
});
}
if(myfont){
var textGeometry = new THREE.TextGeometry( text1, {
font: myfont,
size: 1,
height:0,
curveSegments: 12,
bevelThickness: 0.1,
bevelSize: 0.1,
bevelEnabled: false
});
var textMaterial = new THREE.MeshPhongMaterial(
{ color: "black",transparent:true,opacity:1.0,specular:"#B6C015"}
);
numberText = new THREE.Mesh( textGeometry, textMaterial );
numberText.position.set(2,1,1);
object.add(numberText);
}
}
var ambientLight;
var spotLight;
ambientLight = new THREE.AmbientLight(16777215, 0.5);
ambientLight.position.set(-100,0,0);
scene.add(ambientLight);
spotLight = new THREE.PointLight(16777215);
spotLight.position.set(60,10,40);
spotLight.castShadow = true;
scene.add(spotLight);
ambientLight = new THREE.AmbientLight(16777215, 0.5);
ambientLight.position.set(-100,100,100);
scene.add(ambientLight);
//dat gui
gui = new dat.GUI();
parameters =
{
//x: 0, y: 30, z: 0,
Charge:0,
Er:1,
//color: "#ff0000", // color (change "#" to "0x")
//opacity: 1,
visible: true,
material: "Phong",
charge: function() { charge_create(mag) ;
findForce();}
};
var cubeX = gui.add( parameters, 'Charge' ).min(-10).max(10).step(1).listen();
//var epsilon = gui.add( parameters, 'Er' ).min(0).max(2).step(0.01).listen();
var mag=0;
var e=1;
cubeX.onChange(function(value)
{ mag = value; });
//epsilon.onChange(function(value)
//{ e = value;
//findForce(test.position);
//});
gui.add( parameters, 'charge' ).name("Add Charge");
gui.open();
//columns law code
charge=[];
function charge_create(magnitude){
var t;
var geometry = new THREE.SphereGeometry( 0.5, 32, 32 );
if(magnitude>=0){
var material = new THREE.MeshPhongMaterial( {color: 0xff0000} );
t="+";
}
else{
var material = new THREE.MeshPhongMaterial( {color: 0x000000} );
t="-";
}
var sphere = new THREE.Mesh( geometry, material );
text(sphere,t);
scene.add( sphere );
sphere.position.set(Math.random()*40-20,0,0);
sphere.magnitude=magnitude;
charge.push(sphere);
dragElements.push(sphere);
return sphere;
}
var geometry = new THREE.SphereGeometry( 0.5, 32, 32 );
var material = new THREE.MeshPhongMaterial( {color: 0x0000ff} );
var test = new THREE.Mesh( geometry, material );
scene.add( test );
test.forceX=0;
test.forceY=0;
dragElements.push(test);
test.position.set(0,0,0);
text(test,"Test Charge");
/*charge_create(+1);
console.log(charge[0].magnitude);
charge_create(-1);
console.log(charge[1].magnitude);*/
//negative_charge=[];
var arr=new Array(20);
var resultant=null;
findForce(test.position);
function findForce(){
var fx=0;
var fy=0;
for(var i=0;i<charge.length;i++){
//console.log(position.x);
var r_square=Math.pow(Math.abs(test.position.x-charge[i].position.x),2)+Math.pow(Math.abs(test.position.y-charge[i].position.y),2);
var k=9*Math.pow(10,9)/e;
var force=k*charge[i].magnitude/(r_square);
force=force/1000000;
var y=test.position.y-charge[i].position.y;
var x=test.position.x-charge[i].position.x;
var angle =Math.atan(Math.abs(y/x));
if(y<0 && x>0)angle=-angle;
if(x<0 && y>0)angle=Math.PI-angle;
if(x<0 && y<0)angle=Math.PI+angle;
var force_x=force*(Math.cos(angle));
var force_y=force*(Math.sin(angle));
//arrowHelper
var dir = new THREE.Vector3( force_x, force_y, 0 );
//normalize the direction vector (convert to vector of length 1)
dir.normalize();
var origin = new THREE.Vector3( test.position.x, test.position.y, 0 );
var length = Math.abs(force);
if(charge[i].magnitude>=0)
var hex = 0xff0000;
else{
var hex=0x000000;
}
var arrowHelper = new THREE.ArrowHelper( dir, origin, length, hex );
//text(arrowHelper.line,force);
//scene.add( arrowHelper );
//arr.push(arrowHelper);
if(arr[i]){
//console.log("asdas");
scene.remove(arr[i]);
arr[i]=arrowHelper;
scene.add( arrowHelper );
}
else{
//console.log("a");
arr[i]=arrowHelper;
scene.add( arrowHelper );
}
fx=fx+force_x;
fy=fy+force_y;
//console.log("force x"+fx+" "+"force_y"+fy);
}
var net_force=Math.sqrt(Math.pow(force_x,2)+Math.pow(force_y,2))
var dir = new THREE.Vector3( fx, fy, 0 );
//normalize the direction vector (convert to vector of length 1)
dir.normalize();
var origin = new THREE.Vector3( test.position.x, test.position.y, 0 );
var length = Math.abs(net_force);
var hex = 0x0000ff;
var arrowHelper = new THREE.ArrowHelper( dir, origin, length, hex );
//text(arrowHelper.line,force);
if(resultant==null){
resultant=arrowHelper;
scene.add(resultant);
}
else{
//console.log()
scene.remove(resultant);
resultant=arrowHelper;
scene.add(resultant);
}
}
document.addEventListener("mousedown",onDocumentMouseDown);
var raycaster;
function onDocumentMouseDown(event) {
// event.preventDefault();
var mouse;
mouse = new THREE.Vector2();
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
raycaster = new THREE.Raycaster();
raycaster.setFromCamera(mouse, camera);
var intersects = raycaster.intersectObjects(objects, true);
if (intersects.length > 0) {
if(IsDragRunning == true){
objectDragging = intersects[0].object;
}
}
console.log(IsDragRunning );
if(objectDragging)
console.log(objectDragging.name);
}
document.addEventListener("mousemove",onDocumentMouseMove);
var raycaster;
function onDocumentMouseMove(event) {
// event.preventDefault();
if(IsDragRunning){
console.log("asd");
findForce(test.position);
//render();
}
}
//findForce();
var count=false;
var render = function () {
requestAnimationFrame(render);
if(myfont && !count){
text(test,"Test Charge");
console.log("hello");
count=true;
}
//findForce(test.position);
renderer.render(scene,camera);
};
render();
</script>
</body>

This is not the ultimate solution, this is just the point where you can start from.
So, you can use a grid of THREE.ArrowHelper()
and then, when you add a charge in this field:
function setCharge(val) {
var chargeGeom = new THREE.SphereGeometry(0.25, 16, 12);
var chargeMat = new THREE.MeshBasicMaterial({
color: val == 1 ? 0xff0000 : 0x0000ff
});
var charge = new THREE.Mesh(chargeGeom, chargeMat);
charge.position.set(THREE.Math.randFloatSpread(cubeDim), THREE.Math.randFloatSpread(cubeDim), THREE.Math.randFloatSpread(cubeDim));
charge.userData.charge = val;
charges.push(charge);
scene.add(charge);
arrangeArrows();
}
and its usage is like:
chargePositive.addEventListener("click", function() {
setCharge(1)
});
chargeNegative.addEventListener("click", function() {
setCharge(-1)
});
So, when you add a charge, you arrange your grid arrows, using the superposition principle for each arrow, counting forces from all charges in the field:
var direction = new THREE.Vector3();
var normal = new THREE.Vector3();
var forceVector = new THREE.Vector3();
var directions = [];
var result = new THREE.Vector3();
function arrangeArrows() {
arrows.forEach((arrow) => {
directions = [];
charges.forEach((charge, index) => {
direction.subVectors(arrow.position, charge.position)
normal.copy(direction).normalize();
directions.push({
dir: (charge.userData.charge == -1 ? normal.negate() : normal).clone(),
force: 1 / Math.pow(forceVector.subVectors(arrow.position, charge.position).length(), 2)
});
});
result.set(0, 0, 0);
directions.forEach((dir) => {
result.addScaledVector(dir.dir, dir.force);
})
arrow.setDirection(result.normalize());
});
};
jsfiddle example.
Also, you can use THREE.LineSegments() with THREE.BufferGeometry() andTHREE.ShaderMaterial(), and do the same calculation on a GPU (with cooler visual effects):

webGL readPixels and FireFox 35

I have updated to FireFox35 and the following code is not working anymore:
var ctx = renderer2.getContext("experimental-webgl",{preserveDrawingBuffer: true}) || renderer2.getContext("webgl",{preserveDrawingBuffer: true});
renderer2.render(scene2, camera2, renderTarget);
var arr = new Uint8Array( 4 * 1024 * 1024);
ctx.readPixels(0, 0, 1024, 1024, ctx.RGBA, ctx.UNSIGNED_BYTE, arr);
Thre returned array is completely black. It work until FireFox 34 to return the webGL canvas snapshot and it is still working in IE and Chrome.
Is there a workaround, or another way to get the pixel data from a webGL canvas?

A bug has been opened #Bugzilla. It seems to be a regression.
Example:
http://codepen.io/anon/pen/XJMQwV
<!DOCTYPE html>
<html lang="en">
<head>
<title> </title>
<style>
body {
background-color: #000;
color: #000;
margin: 0px;
overflow: hidden;
}
</style>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/threejs/r69/three.min.js"></script>
<script>
var renderer, camera, renderTarget;
var scene, element;
var ambient;
function createPIP(){
}
function init(){
pip = document.createElement('div');
pip.id = "divPIP";
pip.style.width = 512;
pip.style.height = 512;
pip.style.position = 'absolute';
pip.style.backgroundColor = 'black';
pip.style.borderRadius = "5px";
pip.style.border = '2px solid white';
pip.style.padding = "0px 20px";
pip.style.left = "50px";
pip.style.top = "25px";
document.body.appendChild(pip);
pip2 = document.createElement('div');
pip2.id = "divpip2";
pip2.style.width = 512;
pip2.style.height = 512;
pip2.style.position = 'absolute';
pip2.style.backgroundColor = 'black';
pip2.style.borderRadius = "5px";
pip2.style.border = '2px solid white';
pip2.style.padding = "0px 20px";
pip2.style.left = "650px";
pip2.style.top = "25px";
document.body.appendChild(pip2);
canvaspip2 = document.createElement('canvas');
canvaspip2.width = 512;
canvaspip2.height = 512;
canvaspip2.id = "canvaspip2";
pip2.appendChild(canvaspip2);
scene = new THREE.Scene();
renderer = new THREE.WebGLRenderer();
renderer.setSize(512, 512);
pip.appendChild(renderer.domElement);
renderTarget = new THREE.WebGLRenderTarget( 512, 512 );
var ambient = new THREE.AmbientLight( 0xffffff );
scene.add( ambient );
camera = new THREE.OrthographicCamera( -256, 256, 256, -256, 1, 1e6 );
scene.add(camera);
camera.position.set(0, 0, 500);
cube = new THREE.Mesh( new THREE.CubeGeometry( 200, 200, 200 ), new THREE.MeshNormalMaterial() );
scene.add(cube);
}
function animate() {
requestAnimationFrame(animate);
render();
}
function render() {
var ctx = renderer.getContext("experimental-webgl",{preserveDrawingBuffer: true}) || renderer.getContext("webgl",{preserveDrawingBuffer: true});
renderer.render(scene, camera, renderTarget);
var arr = new Uint8Array( 4 * 512 * 512);
ctx.readPixels(0, 0, 512, 512, ctx.RGBA, ctx.UNSIGNED_BYTE, arr);
var c=document.getElementById("canvaspip2");
var ctx=c.getContext("2d");
var ImgData = ctx.createImageData(512, 512);
ImgData.data.set( arr, 0, arr.length );
var c=document.getElementById("canvaspip2");
var ctx=c.getContext("2d");
ctx.putImageData(ImgData,0,0);
renderer.autoClear = false;
renderer.clear();
renderer.render(scene, camera);
}
window.onload = function() {
init();
animate();
}
</script>
</body>
</html>

Pan is the only working thing for OrbitControls

I am trying to program a solar system that you can orbit around and pan so I added an OrbitControls to my project and pan is working fine but for some reason rotate and zoom aren't working. I have tried copying other people's examples and I cannot figure out what is wrong with mine. I don't know if it could just be my computer, but I have no reason to believe that it would be.
<!DOCTYPE html>
<html>
<head>
<title>Example 01.02 - First Scene</title>
<script type="text/javascript" src="../libs/three.js"></script>
<script type="text/javascript" src="../libs/jquery-1.9.0.js"></script>
<script type="text/javascript" src="../libs/stats.js"></script>
<script type="text/javascript" src="../libs/dat.gui.js"></script>
<script type="text/javascript" src="../libs/OrbitControls.js"></script>
<script type="text/javascript" src="../libs/chroma.js"></script>
<script type="text/javascript" src="../libs/dat.gui.js"></script>
<style>
body{
/* set margin to 0 and overflow to hidden, to go fullscreen */
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div id="Stats-output">
</div>
<!-- Div which will hold the Output -->
<div id="WebGL-output">
</div>
<!-- Javascript code that runs our Three.js examples -->
<script type="text/javascript">
// once everything is loaded, we run our Three.js stuff.
$(function () {
var stats = initStats();
var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight;
var clock = new THREE.Clock();
// create a scene, that will hold all our elements such as objects, cameras and lights.
var scene = new THREE.Scene();
// create a camera, which defines where we're looking at.
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 5000);
// position and point the camera to the center of the scene
camera.position.x = -150;
camera.position.y = 200;
camera.position.z = 150;
camera.lookAt(scene.position);
// create a render and set the size
renderer = new THREE.WebGLRenderer( {antialias:true} );
renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
ccontrols = new THREE.OrbitControls( camera, renderer.domElement );
ccontrols.damping = 0.2;
ccontrols.addEventListener( 'change', render );
var ambiLight = new THREE.AmbientLight(0x747474)
scene.add(ambiLight);
var pointLight = new THREE.PointLight(0xffffff);
pointLight.position.set(0, 0, 0);
pointLight.distance = 100;
scene.add(pointLight);
//create the light box
var lightboxgeom = new THREE.SphereGeometry(3000,50,50);
var lightboxmat = new THREE.MeshPhongMaterial({map: THREE.ImageUtils.loadTexture("./TexturesAndModels/lightbox.png"), side: THREE.BackSide});
var lightbox = new THREE.Mesh(lightboxgeom, lightboxmat);
//sun and glow
var sun = createMesh(new THREE.SphereGeometry(20, 20, 20), "texture_sun.jpg", "texture_sun_DISP.jpg", "texture_sun_SPEC.jpg");
sun.shading = THREE.NoShading;
var spriteMaterial = new THREE.SpriteMaterial(
{
map: new THREE.ImageUtils.loadTexture( "TexturesAndModels/GLOW.png" ),
useScreenCoordinates: false, alignment: THREE.SpriteAlignment.center,
color: 0xffcc00, transparent: false, blending: THREE.AdditiveBlending
});
var sprite = new THREE.Sprite( spriteMaterial );
sprite.scale.set(100, 100, 1.0);
sun.add(sprite);
//mercury
var mercury = createMesh(new THREE.SphereGeometry(1.50, 20, 20), "texture_mercury.jpg", "texture_mercury_DISP.jpg", "texture_mercury_SPEC.jpg", "texture_mercury_NRM.jpg");
//venus
var venus = createMesh(new THREE.SphereGeometry(3.80, 20, 20), "texture_venus_surface.jpg", "texture_venus_surface_DISP.jpg", "texture_venus_surface_SPEC.jpg", "texture_venus_surface_NRM.jpg");
//earth and clouds
var earth = createMesh(new THREE.SphereGeometry(4.00, 20, 20), "ColorMap.jpg", "Bump2.jpg", "SpecMask2.png", "ColorMap_NRM.jpg");
//mars
var mars = createMesh(new THREE.SphereGeometry(2.10, 20, 20), "texture_mars.jpg", "texture_mars_DISP.jpg", "texture_mars_SPEC.jpg", "texture_mars_NRM.jpg");
//Jupiter
var jupiter = createMesh(new THREE.SphereGeometry(18.7, 20, 20), "texture_jupiter.jpg", "texture_jupiter_DISP.jpg", "texture_jupiter_SPEC.jpg", "texture_jupiter_NRM.jpg");
//saturn
var saturn = createMesh(new THREE.SphereGeometry(18, 20, 20), "texture_saturn.jpg", "texture_saturn_DISP.jpg", "texture_saturn_SPEC.jpg", "texture_saturn_NRM.jpg");
//uranus
var uranus = createMesh(new THREE.SphereGeometry(15, 20, 20), "texture_uranus.jpg", "texture_uranus_DISP.jpg", "texture_uranus_SPEC.jpg", "texture_uranus_NRM.jpg");
//neptune
var neptune = createMesh(new THREE.SphereGeometry(14, 20, 20), "texture_neptune.jpg", "texture_neptune_DISP.jpg", "texture_neptune_SPEC.jpg", "texture_neptune_NRM.jpg");
// position the planets
sun.position.x=0;
sun.position.y=0;
sun.position.z=0;
earth.position.y=0;
mars.position.y=0;
venus.position.y=0;
mercury.position.y=0;
saturn.position.y=0;
jupiter.position.y=0;
uranus.position.y=0;
neptune.position.y=0;
// add the planets to the scene
scene.add(lightbox);
scene.add(earth);
scene.add(sun);
scene.add(mercury);
scene.add(venus);
scene.add(mars);
scene.add(jupiter);
scene.add(saturn);
scene.add(uranus);
scene.add(saturn);
// add the output of the renderer to the html element
$("#WebGL-output").append(renderer.domElement);
var r = 0;
var step = 0;
var controls = new function() {
this.timeScale = 1;
}
var gui = new dat.GUI();
gui.add(controls, 'timeScale', 0, 10);
// render the scene
render();
function createMesh(geom, imageFile, bump, spec, normal) {
var texture = THREE.ImageUtils.loadTexture("./TexturesAndModels/" + imageFile)
var mat = new THREE.MeshPhongMaterial();
mat.map = texture;
if (bump) {
var bump = THREE.ImageUtils.loadTexture("./TexturesAndModels/" + bump)
mat.bumpMap = bump;
mat.bumpScale = 0.2;
}
if(spec) {
var spec = THREE.ImageUtils.loadTexture("./TexturesandModels/" + spec)
mat.specularMap = spec;
}
if(normal) {
var norm = THREE.ImageUtils.loadTexture("./TexturesAndModels/" + normal)
mat.normalMap = norm;
}
var mesh = new THREE.Mesh(geom, mat);
return mesh;
}
function render() {
stats.update();
earth.position.x = Math.sin(r*0.1)*150;
earth.position.z = Math.cos(r*0.1)*150;
earth.rotation.y = step += controls.timeScale * 0.02;
mercury.position.x = Math.sin(r*0.4)*58;
mercury.position.z = Math.cos(r*0.4)*58;
mercury.rotation.y = step/58.7;
venus.position.x = Math.sin(r*0.1625)*108;
venus.position.z = Math.cos(r*0.1625)*108;
venus.rotation.y = step/243;
mars.position.x = Math.sin(r*0.05)*228;
mars.position.z = Math.cos(r*0.05)*228;
mars.rotation.y = step*1.026;
jupiter.position.x = Math.sin(r*.008)*483;
jupiter.position.z = Math.cos(r*.008)*483;
jupiter.rotation.y = step*2.44;
saturn.position.x = Math.sin(r*.003)*886;
saturn.position.z = Math.cos(r*.003)*886;
saturn.rotation.y = step*2.35;
uranus.position.x = Math.sin(r*.001)*1784;
uranus.position.z = Math.cos(r*.001)*1784;
uranus.rotation.y = step*1.34;
neptune.position.x = Math.sin(r*.0006)*2794;
neptune.position.z = Math.cos(r*.0006)*2794;
neptune.rotation.y = step*1.26;
r+=controls.timeScale * (Math.PI/180*2);
renderer.render(scene, camera);
requestAnimationFrame(render);
}
function initStats() {
var stats = new Stats();
stats.setMode(0); // 0: fps, 1: ms
// Align top-left
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px';
$("#Stats-output").append(stats.domElement);
return stats;
}
});
</script>
</body>
</html>

Develop Reference

ruby bash windows laravel spring algorithm oracle macos go visual-studio

three.js post processing maskpass with multiple renderpass never works - three.js

Related

why can't I cast or receive shadows in Three.js

Using THREE.Raycaster - I get always the id 8?

Regarding electric field lines in three js

webGL readPixels and FireFox 35

Pan is the only working thing for OrbitControls

Categories

Resources