three.js - модель json слишком велика на экране

Я делаю three.js, я использовал файл JSON для загрузки его в файл THREE.js, мой JSON-файл является собакой из clara.io. Все работает отлично, проблема в том, что 3D-модель слишком велика. Есть ли способ уменьшить его размер, который он загружает на экран.three.js - модель json слишком велика на экране

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <title>three.js webgl - loaders - JSON loader</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 { 
       font-family: Monospace; 
       background-color: #000; 
       color: #fff; 
       margin: 0px; 
       overflow: hidden; 
      } 
      #info { 
       color: #fff; 
       position: absolute; 
       top: 10px; 
       width: 100%; 
       text-align: center; 
       z-index: 100; 
       display:block; 
      } 
      #info a, .button { color: #f00; font-weight: bold; text-decoration: underline; cursor: pointer } 
     </style> 
    </head> 

    <body> 

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

     <script src="Detector.js"></script> 
     <script src="stats.min.js"></script> 

     <script> 
      var container, stats; 
      var camera, scene, renderer; 
      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(45, window.innerWidth/window.innerHeight, 1, 2000); 
       camera.position.z = 4; 
       // scene 
       scene = new THREE.Scene(); 
       var ambient = new THREE.AmbientLight(0x444444); 
       scene.add(ambient); 
       var directionalLight = new THREE.DirectionalLight(0xffeedd); 
       directionalLight.position.set(0, 0, 1).normalize(); 
       scene.add(directionalLight); 
       // BEGIN Clara.io JSON loader code 
       var objectLoader = new THREE.ObjectLoader(); 
       objectLoader.load("blue-dog.json", function (obj) { 
        scene.add(obj); 
       }); 
       // END Clara.io JSON loader code 
       renderer = new THREE.WebGLRenderer(); 
       renderer.setPixelRatio(window.devicePixelRatio); 
       renderer.setSize(window.innerWidth, window.innerHeight); 
       container.appendChild(renderer.domElement); 
       document.addEventListener('mousemove', onDocumentMouseMove, false); 
       // 
       window.addEventListener('resize', onWindowResize, false); 
      } 
      function onWindowResize() { 
       windowHalfX = window.innerWidth/2; 
       windowHalfY = window.innerHeight/2; 
       camera.aspect = window.innerWidth/window.innerHeight; 
       camera.updateProjectionMatrix(); 
       renderer.setSize(window.innerWidth, window.innerHeight); 
      } 
      function onDocumentMouseMove(event) { 
       mouseX = (event.clientX - windowHalfX)/2; 
       mouseY = (event.clientY - windowHalfY)/2; 
      } 
      // 
      function animate() { 
       requestAnimationFrame(animate); 
       render(); 
      } 
      function render() { 
       camera.position.x += (mouseX - camera.position.x) * .05; 
       camera.position.y += (- mouseY - camera.position.y) * .05; 
       camera.lookAt(scene.position); 
       renderer.render(scene, camera); 
      } 
     </script> 

    </body> 
</html>

Если кто-нибудь может помочь, пожалуйста, оцените его. Я также размещаю его на WAMP. Файл JSON является большим, чтобы вставить в

источник

2016-12-20 shaneo

переместите камеру дальше дальше = модель получит меньше – 2pha

Вы можете установить масштаб вашего объекта:.

objectLoader.load("blue-dog.json", function(obj){ 
    obj.scale.set(.5, .5, .5); 
    scene.add(obj); 
});

или уменьшить вашу камеру, но если честно, я не могу дать вам пример, потому что я «На 100% не уверен, что вы пытаетесь сделать в отношении камеры (что странно + = - = в вашей функции рендеринга меня немного смущает). Вы можете попробовать это:

camera.position.multiplyScalar(2); 
// This should double the distance between your camera and the center of the scene

Но только попробуйте один раз (если вы повторите это в цикле рендеринга, он будет постоянно удалять, и это произойдет довольно быстро).

источник

2016-12-20 19:55:10 somethinghere

извините, как бы я сделал, чтобы установить масштаб – shaneo

@shaneo Извините, я, возможно, случайно опубликовал это преждевременно. Вы устанавливаете масштаб вашей сетки в 'Mesh.scale.set (x, y, z)' (в вашем случае ваш загруженный 'объект' является' Mesh'). – somethinghere

спасибо, подумайте, что вы упомянули в моей функции рендеринга для анимации объекта с помощью мыши. Я использовал пример three.js, чтобы посмотреть, как загрузить json-модель. Поскольку я не мог заставить ее работать. Существует также способ поворота объекта. Я хочу повернуть его на 90 градусов. – shaneo

three.js - модель json слишком велика на экране

ответ

Смежные вопросы