i have a canvas(webgl/3d Model ) like below
i want to make the model to the center of the canvas
like below
my code is like below
var SCREEN_WIDTH = window.innerWidth;
var SCREEN_HEIGHT = window.innerHeight;
var container;
var camera, scene;
var canvasRenderer, webglRenderer;
var mesh, zmesh, geometry, materials;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
var meshes = [];
function init() {
container = document.createElement('div');
document.body.appendChild(container);
camera = new THREE.PerspectiveCamera(75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 100000);
//camera.position.x = 2000;
//camera.position.y = 1400;
//camera.position.z = 1500;
camera.position.x = 2200;
camera.position.y = 1600;
camera.position.z = 1000;
scene = new THREE.Scene();
// LIGHTS
var ambient = new THREE.AmbientLight(0x666666);
scene.add(ambient);
var directionalLight = new THREE.DirectionalLight(0xffeedd);
directionalLight.position.set(0, 70, 100).normalize();
scene.add(directionalLight);
// RENDERER
webglRenderer = new THREE.WebGLRenderer();
webglRenderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
webglRenderer.domElement.style.position = "relative";
container.appendChild(webglRenderer.domElement);
var loader = new THREE.JSONLoader(),
callbackKey = function (geometry, materials) {
createScene(geometry, materials, 50, 50, 10, 2)
};
loader.load("ghghjghj.js", callbackKey);
window.addEventListener('resize', onWindowResize, false);
}
so what should be my camera position.
Try to increase camera.position.y until it looks better. Also, try playing around with camera.lookAt(). It takes vector3 as argument.
Related
Here I tried to load a .ctm file in three JS using CTM Loader. But the CTM file is not getting loaded and the object is not visible in the screen, whereas when I load the js file with geometry properties it gets loaded and the object is visible on the screen. So, when I tried to load a ctm file the object is not visible and when I load a js file with geometry properties the object gets loaded.
I have attached the code below
var SCREEN_WIDTH = window.innerWidth;
var SCREEN_HEIGHT = window.innerHeight;
var FLOOR = -250;
var container;
var camera, scene, controls;
var renderer;
var mesh;
var textureCube;
var mouseX = 0, mouseY = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
init();
animate();
function init() {
container = document.createElement('div');
document.body.appendChild(container);
camera = new THREE.PerspectiveCamera(30, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000);
camera.position.set(185, 40, 170);
controls = new THREE.OrbitControls(camera);
controls.maxPolarAngle = Math.PI / 2;
controls.minDistance = 150;
controls.maxDistance = 500;
scene = new THREE.Scene();
scene.background = textureCube;
var light = new THREE.PointLight(0xffffff, 1);
light.position.set(2, 5, 1);
light.position.multiplyScalar(30);
scene.add(light);
var light = new THREE.PointLight(0xffffff, 0.75);
light.position.set(-12, 4.6, 2.4);
light.position.multiplyScalar(30);
scene.add(light);
scene.add(new THREE.AmbientLight(0x050505));
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
renderer.domElement.style.position = "relative";
container.appendChild(renderer.domElement);
renderer.gammaInput = true;
renderer.gammaOutput = true;
window.addEventListener('resize', onWindowResize, false);
window.addEventListener('mousemove', onDocumentMouseMove, false);
var start = Date.now();
var position = new THREE.Vector3(-105, -78, -30);
var scale = new THREE.Vector3(30, 30, 30);
var loader = new THREE.CTMLoader(true);
// loader.loadParts("models/ctm/camaro/camaro.js", function (geometries, materials) {
loader.load("models/ctm/camaro/camaro.ctm", function (geometries, materials) {
for (var i = 0; i < geometries.length; i++) {
var mesh = new THREE.Mesh(geometries[i], materials[i]);
mesh.name = "camaro car"
mesh.position.copy(position);
mesh.scale.copy(scale);
scene.add(mesh);
}
var end = Date.now();
console.log("load time:", end - start, "ms");
}, { useWorker: true });
}
function onWindowResize(event) {
SCREEN_WIDTH = window.innerWidth;
SCREEN_HEIGHT = window.innerHeight;
renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
camera.aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
camera.updateProjectionMatrix();
}
function onDocumentMouseMove(event) {
mouseX = (event.clientX - windowHalfX);
mouseY = (event.clientY - windowHalfY);
}
function animate() {
requestAnimationFrame(animate);
render();
}
function render() {
renderer.render(scene, camera);
}
I saved a collada file from second life and am rendering it using 3js and colladaloader2. The image looks fine except for the part that is using the transparent texture file. The file is a png with transparency. The transparent part renders as white.
i am using REVISION:"78" of three.js
here is the code snippet
<script src="js/three.min.js"></script>
<script src="js/ColladaLoader2.js"></script>
<script src="js/Detector.js"></script>
<script>
var container;
var camera, scene, renderer;
var group;
var targetRotation = 0;
var targetRotationOnMouseDown = 0;
var mouseX = 0;
var mouseXOnMouseDown = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
var loader = new THREE.ColladaLoader();
loader.options.convertUpAxis = true;
loader.load('models/collada/ASB1/American_Saddlebred.dae', function(collada) {
dae = collada.scene;
dae.scale.x = dae.scale.y = dae.scale.z = 100.0;
dae.updateMatrix();
init();
animate();
function init() {
container = document.createElement('div');
document.body.appendChild(container);
var info = document.createElement('div');
info.style.position = 'absolute';
info.style.top = '10px';
info.style.width = '100%';
info.style.textAlign = 'center';
info.innerHTML = 'Drag to spin';
container.appendChild(info);
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 50, 800);
scene.add(camera);
var light = new THREE.AmbientLight( 0xFFFFFF ); // soft white light
camera.add(light);
renderer = new THREE.WebGLRenderer( { antialias: true, alpha: true} );
renderer.setClearColor( 0x333333, 1);
renderer.setClearAlpha = 0.003;
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild( renderer.domElement );
I have plane ground rectangle rotated by 90 degrees. And I have DirectionalLight which cast shadow on this plane. Look at this simple code example:
var Three = new function () {
var scene = new THREE.Scene()
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000)
camera.position.set(-380, 252, 420);
camera.rotation.order = 'YXZ';
camera.rotation.y = -Math.PI / 4;
camera.rotation.x = Math.atan(-1 / Math.sqrt(2));
var renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMapEnabled = true
var light = new THREE.DirectionalLight(0xffffff, 1)
light.position.set(150, 100, 100)
light.castShadow = true
light.shadowDarkness = 0.3
light.shadowCameraVisible = true
light.shadowCameraRight = 50;
light.shadowCameraLeft = -50;
light.shadowCameraTop = 50;
light.shadowCameraBottom = -50;
scene.add(light);
var ground = new THREE.Mesh(
new THREE.PlaneBufferGeometry(436, 624),
new THREE.MeshLambertMaterial({color: '#808080'})
);
ground.rotation.x = -Math.PI / 2;
ground.receiveShadow = true
scene.add(ground);
this.init = function () {
$('body').append(renderer.domElement);
Three.render();
}
this.render = function () {
requestAnimationFrame(Three.render);
renderer.render(scene, camera);
};
}
$(document).ready(function () {
Three.init();
});
Ground mesh is rotated by 90 degree. Can I rotate light shadow map? I would like to match it to the rotation of the ground?
Fiddle: http://jsfiddle.net/95t964o0/33/
I have simple scene with one cube and one directional light with shadows enabled.
Cube cast and receive shadow. But shadows on right side of the cube ara strange. In middle of shadowcamera shadow gets darker. Why?
Here is example:
code below:
var SCREEN_WIDTH = window.innerWidth - 100;
var SCREEN_HEIGHT = window.innerHeight - 100;
var camera, scene;
var canvasRenderer, webglRenderer;
var container, mesh, geometry, plane;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
init();
animate();
function init() {
container = document.createElement('div');
document.body.appendChild(container);
camera = new THREE.PerspectiveCamera(30, window.innerWidth / window.innerHeight, 1, 100000);
camera.position.set(500, 500, -1000);
camera.lookAt({ x: 0, y: 0, z: 0 });
scene = new THREE.Scene();
// LIGHTS
scene.add(new THREE.AmbientLight(0x666666));
var light;
light = new THREE.DirectionalLight(0xdfebff, 1.75);
light.position.set(100, 50, 20);
light.position.multiplyScalar(1.3);
light.castShadow = true;
light.shadowCameraVisible = true;
light.shadowMapWidth = light.shadowMapHeight = 2048;
var d = 200;
light.shadowCameraLeft = -d;
light.shadowCameraRight = d;
light.shadowCameraTop = d;
light.shadowCameraBottom = -d;
light.shadowCameraFar = 500;
light.shadowDarkness = 0.5;
//light.shadowBias = 0.001;
scene.add(light);
var box = new THREE.Mesh(new THREE.CubeGeometry(1000, 500, 100), new THREE.MeshLambertMaterial({ color: 0xFF0000 }));
box.castShadow = true;
box.receiveShadow = true;
scene.add(box);
// RENDERER
webglRenderer = new THREE.WebGLRenderer();
webglRenderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
webglRenderer.domElement.style.position = "relative";
webglRenderer.shadowMapEnabled = true;
//webglRenderer.shadowMapSoft = true;
webglRenderer.shadowMapType = THREE.PCFSoftShadowMap;
//webglRenderer.sortObjects = false;
//webglRenderer.setFaceCulling(THREE.CullFaceNone);
//webglRenderer.autoClear = false;
//webglRenderer.shadowMapCullFace = THREE.CullFaceNone;
container.appendChild(webglRenderer.domElement);
window.addEventListener('resize', onWindowResize, false);
}
function onWindowResize() {
windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
webglRenderer.setSize(window.innerWidth, window.innerHeight);
}
function animate() {
var timer = Date.now() * 0.0002;
//camera.position.x = Math.cos(timer) * 1000;
//camera.position.z = Math.sin(timer) * 1000;
requestAnimationFrame(animate);
render();
}
function render() {
camera.lookAt(scene.position);
webglRenderer.render(scene, camera);
}
UPDATE:
changed fiddler code, now light is outside cube, and light is rotating around cube.
Now my problem is even more visible. When light direction vector is almost perpendicular to cube normal on shadow there is sharp line in the middle of light shadowCamera.
new fiddler code: http://jsfiddle.net/gbwojcg6/2/
The way you have your scene set up currently, the light source is inside the object.
So there are several things you can do.
move the light outside the object
reduce the very big value of camera far
use a negative shadow bias light.shadowBias = -0.01;
updated fiddle
It seams to be an issue with three.js prior r67, new version fix my problem (darker shadow in the middle of shadowcamera)
I've looked through a number of other S.O. questions, followed all of the advice, but I'm still clueless as to why I can't get shadows to render on this very basic scene.
http://jsfiddle.net/4Txgp/
[Updated] Code:
var SCREEN_WIDTH = window.innerWidth - 25;
var SCREEN_HEIGHT = window.innerHeight - 25;
var camera, scene;
var canvasRenderer, webglRenderer;
var container, mesh, geometry, plane;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
init();
animate();
function init() {
container = document.createElement('div');
document.body.appendChild(container);
camera = new THREE.PerspectiveCamera(30, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.x = 1200;
camera.position.y = 1000;
camera.lookAt({
x: 0,
y: 0,
z: 0
});
scene = new THREE.Scene();
var groundMaterial = new THREE.MeshLambertMaterial({
color: 0x6C6C6C
});
plane = new THREE.Mesh(new THREE.PlaneGeometry(10000, 10000, 100, 100), groundMaterial);
plane.rotation.x = -Math.PI / 2;
plane.receiveShadow = true;
scene.add(plane);
// LIGHTS
// scene.add(new THREE.AmbientLight(0x666666));
/*
var light;
light = new THREE.DirectionalLight(0xdfebff, 1.75);
light.position.set(600, 800, 100);
//light.position.multiplyScalar(1.3);
light.castShadow = true;
light.shadowCameraVisible = true;
light.shadowMapWidth = light.shadowMapHeight = 2048;
var d = 50;
light.shadowCameraLeft = -d;
light.shadowCameraRight = d;
light.shadowCameraTop = d;
light.shadowCameraBottom = -d;
light.shadowCameraFar = 500;
light.shadowDarkness = 0.5;
scene.add(light);
*/
var spotLight = new THREE.SpotLight( 0xffffff );
spotLight.position.set( 700, 1000, 100 );
spotLight.castShadow = true;
spotLight.shadowCameraVisible = true;
spotLight.shadowMapWidth = 2048;
spotLight.shadowMapHeight = 2048;
spotLight.shadowCameraNear = 100;
spotLight.shadowCameraFar = 2000;
spotLight.shadowCameraFov = 30;
scene.add( spotLight );
var boxgeometry = new THREE.CubeGeometry(100, 200, 100);
var boxmaterial = new THREE.MeshLambertMaterial({
color: 0x0aeedf
});
var cube = new THREE.Mesh(boxgeometry, boxmaterial);
cube.position.x = 0;
cube.position.y = 100;
cube.position.z = 0;
scene.add(cube);
// RENDERER
webglRenderer = new THREE.WebGLRenderer();
webglRenderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
//webglRenderer.domElement.style.position = "relative";
webglRenderer.shadowMapEnabled = true;
webglRenderer.shadowMapSoft = true;
container.appendChild(webglRenderer.domElement);
}
function animate() {
var timer = Date.now() * 0.0002;
camera.position.x = Math.cos(timer) * 1000;
camera.position.z = Math.sin(timer) * 1000;
requestAnimationFrame(animate);
render();
}
function render() {
camera.lookAt(scene.position);
webglRenderer.render(scene, camera);
}
I have a scene with a plane, an object (cube), a spotlight (copied directly from http://threejs.org/docs/58/#Reference/Lights/SpotLight for testing purposes) , and a camera. It renders fine, except that the cube is not casting a shadow on the "ground" (plane), and the shading looks like everything has been done in a basic material. I'm using a combo of Phongs and Lamberts.
My directional light is set to castShadow = true;, and my plane is set with receiveShadow = true, along with shadow map settings. The renderer itself has shadowMapEnabled = true.
I've tried various solutions, I remember with previous versions of ThreeJS there would be external library calls depending on what you wanted to do, but I've also seen other examples on JSFiddle just calling ThreeJS by itself, as well as examples from the official site, that work fine.
Any hints/info/constructive remarks about overlooking something simple and small?
You need to set
cube.castShadow = true;
and make sure the shadow camera far plane reaches the cube.
three.js r.144