Importing 3 models camera in three js using collada loader in .dae format

Questions
, , , ,
1

is there any example for this kind of issue. because my model came with camera and its have keyframe animation too please let me know if someone have some information about this topic

2

Can you show your current code?

3

for now i am just following this but

https://threejs.org/examples/?q=key#webgl_animation_keyframes_json

with collada.dae file not with json

4

You might be better off following on of the collada examples instead.

In particular if you put console.log( object ) after this line:

You’ll see be able to check any cameras that have been imported.

5

Hi i can see some camera object in my model after importing now i don’t know how to add them to the scene that’s what my problem.

6

You don’t (generally) add the camera to the scene - instead, think of it as three top level objects, scene, camera and renderer. You render a scene from the point of view of a camera:

renderer.render( scene, camera )
7

yes you are right i know that but i want to use camera from the model i imported so i added something like this
if (node instanceof THREE.PerspectiveCamera) {
camera1 = node;
camera1.near = 1;
camera1.fov = 30;
camera1.castShadow = true;
}
by following

link it worked somehow but is this the correct way to render my scene with dynamic camera1 ?

8

https://rmx.github.io/collada-converter/preview/examples/convert.html

maybe useful

9

The camera is just a normal PerspectiveCamera, so you can treat it as you would any other camera. So yes, I would say your approach is fine.

By the way, you’ll have to do

camera.updateProjectionMatrix()

after changing the fov.

10

" camera.updateProjectionMatrix()" yes i did that already thanks one more doubt i have now
i want to remove shadow line behind my mesh
you can see there is one small line
could you tell me how can i do that if you know how to remove that

<!DOCTYPE html>
<html lang="en">
<head>
    <title>three.js webgl - geometry - cube</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <style>
        body {
            margin: 0px;
            background-color: #000000;
            overflow: hidden;
        }
    </style>
</head>
<body>

    <script src="../js/three.js"></script>
    <script src="../js/OrbitControls.js"></script>

    <script>

			var camera, scene, renderer;
			var mesh, dlight, slight;

			init();
			animate();

			function init() {

				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
				camera.position.set(20,20,20);

				scene = new THREE.Scene();

			    dlight = new THREE.SpotLight(0xffffff, 1);
			    dlight.position.set(0, 10, 10);
			    dlight.castShadow = true;
			    scene.add(dlight);

			    dlight.shadow.mapSize.width = 512;  // default
			    dlight.shadow.mapSize.height = 512; // default
			    dlight.shadow.camera.near = 0.5;       // default
			    dlight.shadow.camera.far = 500      // default

				var geometry = new THREE.BoxBufferGeometry( 3, 3, 3 );

                                var material = new THREE.MeshPhongMaterial({ map: texture, side: THREE.DoubleSide });

				mesh = new THREE.Mesh(geometry, material);
				mesh.position.set(0, 1, 0);
				mesh.castShadow = true;
				mesh.receiveShadow = true;
				scene.add(mesh);
                                /* plane */

				var texture = new THREE.TextureLoader().load('../img/glass.jpg');
				var geometry = new THREE.PlaneGeometry(20, 20, 32, 32);
				var material = new THREE.MeshPhongMaterial({ map: texture, side: THREE.DoubleSide });
				plane = new THREE.Mesh(geometry, material);
				plane.position.set(0, 0, 0);
				plane.rotation.x = THREE.Math.degToRad(90);
				plane.name = "plane";
				plane.castshadow = true;
				plane.receiveShadow = true;
				scene.add(plane);

				renderer = new THREE.WebGLRenderer();
				renderer.shadowMap.enabled = true;
				renderer.shadowMap.type = THREE.PCFSoftShadowMap;
				renderer.gammaInput = true;
				renderer.gammaOutput = true;
				renderer.setPixelRatio( window.devicePixelRatio );
				renderer.setSize( window.innerWidth, window.innerHeight );
				document.body.appendChild( renderer.domElement );

			    //
				var controls = new THREE.OrbitControls(camera, renderer.domElement);

			    //

				window.addEventListener( 'resize', onWindowResize, false );

			}

			function onWindowResize() {

				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();
				renderer.setSize( window.innerWidth, window.innerHeight );

			}

			function animate() {

				requestAnimationFrame( animate );
				renderer.render( scene, camera );

			}

    </script>

</body>
</html>