0

I have this object enter image description here in blender, i want to display it on three js but the result enter image description here is so different and can't able to change the view, How can i change the view with mouse?

Here's my full code, i'm newbie and this is my first time using three.js and blender:

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>three.js webgl - loaders - ColladaLoader2</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: 0;
    overflow: hidden;
    }
  </style>
 </head>

 <body>
  <div id="WebGL-output">
  </div>

  <script src="https://threejs.org/build/three.min.js"></script>
  <script src="colladaloader.js"></script>

  <script>

  function init() {
   var scene = new THREE.Scene();
   var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
   var renderer = new THREE.WebGLRenderer();
   renderer.setSize(window.innerWidth, window.innerHeight);
   var axes = new THREE.AxisHelper(20);
   scene.add(axes);

   var planeGeometry = new THREE.PlaneGeometry(60, 20, 1, 1);
   var planeMaterial = new THREE.MeshBasicMaterial({color: 0xcccccc});
   var plane = new THREE.Mesh(planeGeometry, planeMaterial);
   plane.rotation.x = -0.5 * Math.PI;
   plane.position.x = 15
   plane.position.y = 0
   plane.position.z = 0
   scene.add(plane);
   document.body.appendChild(renderer.domElement);
   camera.position.set(0, 0, 4);
   var loader = new THREE.ColladaLoader();
   loader.load("MAC12.dae", function (result) {
    scene.add(result.scene);
   });

   function render() {
    requestAnimationFrame(render);
    renderer.render(scene, camera);
   }
   render();
  };
  
  window.onload = init;
  </script>
 </body>
</html>
Zeyad Etman
  • 2,250
  • 5
  • 25
  • 42
  • 1
    If you are new to `three.js`, then please read the following guide: https://threejs.org/docs/index.html#manual/en/introduction/Loading-3D-models. You should not use Collada anymore but `glTF`. – Mugen87 Nov 07 '18 at 16:44
  • Thanks @Mugen87 it works well with `glTF` – Zeyad Etman Nov 07 '18 at 18:36
  • Possible duplicate of [How to load a gltf model to Three.js?](https://stackoverflow.com/questions/25391529/how-to-load-a-gltf-model-to-three-js) – M - Nov 08 '18 at 18:19
  • Yes i fixed it as Mugen87 said, also it duplicated as you mentioned. Thanks @Marquizzo – Zeyad Etman Nov 09 '18 at 15:05

0 Answers0