Threejs основной вопрос оказания

Я сделал базовую конфигурацию, чтобы сделать геометрию, но я заметил, что визуализируется только если я ставлю в код эту строку о контроле:Threejs основной вопрос оказания

controls = new THREE.OrbitControls(camera, renderer.domElement); 
controls.addEventListener('change', render); 
controls.target = new THREE.Vector3(0, 0, 0);

если я пытаюсь удалить эту строку геометрии не видно. Ниже приведен полный код:

<html> 
<head> 
    <title>MVC - example</title> 
    <script src="Stereos/threejs/Three.js"></script> 
    <script src="Stereos/threejs/Detector.js"></script> 
    <script src="Stereos/threejs/BufferAttribute.js"></script> 
    <script src="Stereos/threejs/BufferGeometry.js"></script> 
    <script src="Stereos/threejs/EdgesHelper.js"></script> 
    <script src="Stereos/threejs/OrbitControls.js"></script> 

</head> 

<body> 
<p id="stats"></p> 

<div id='maincanvas' style="border: 1px solid black; width: 500px; height: 500px"></div> 
<input type="button" onClick="test()" value="test"/> 
<input type="button" onClick="render()" value="render"/> 


<script type="text/javascript"> 

    var container, testbox, scene, camera, renderer, controls, scene_text, raycaster, projector, mouse2D; 

    function init() 
    { 
     // SCENE 
     scene = new THREE.Scene(); 

     // CAMERA 
     var SCREEN_WIDTH = window.innerWidth - 5, SCREEN_HEIGHT = window.innerHeight - 5; 

     var VIEW_ANGLE = 45, ASPECT = SCREEN_WIDTH/SCREEN_HEIGHT, NEAR = 0.1, FAR = 20; 
     camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR); 
     var r = 4, phi = Math.PI/4, theta = Math.PI/4; 
     camera.position.set(r * Math.cos(phi) * Math.sin(theta), r * Math.sin(phi), r * Math.cos(phi) * Math.cos(theta)); 

     // RENDERER 
     if (Detector.webgl) { 
      renderer = new THREE.WebGLRenderer({antialias: true}); 
     } 
     else { 
      renderer = new THREE.CanvasRenderer(); 
     } 
     renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT); 
     renderer.autoClear = false; 

     // CONTAINER 
     container = document.getElementById('maincanvas'); 
     container.appendChild(renderer.domElement); 

     // controls = new THREE.OrbitControls(camera, renderer.domElement);*** if remove controls geometry is not visible 
     // controls.addEventListener('change', render); 
     // controls.target = new THREE.Vector3(0, 0, 0); 

     // LIGHTS 
     var light1 = new THREE.PointLight(0xffffff); 
     light1.position.set(0, 1000, 1000); 
     scene.add(light1); 
     var light2 = new THREE.PointLight(0xffffff); 
     light2.position.set(0, -1000, -1000); 
     scene.add(light2); 

     ///////////// 
     // OBJECTS // 
     ///////////// 

     geometry0 = new THREE.Geometry(); 
     geometry0.vertices = [new THREE.Vector3(0.5, -0.5, 0.5), new THREE.Vector3(-0.5, -0.5, 0.5), new THREE.Vector3(-0.5, -0.5, -0.5), new THREE.Vector3(0.5, -0.5, -0.5), 
           new THREE.Vector3(0.5, 0.5, 0.5), new THREE.Vector3(-0.5, 0.5, 0.5), new THREE.Vector3(-0.5, 0.5, -0.5), new THREE.Vector3(0.5, 0.5, -0.5)]; 
     geometry0.faces = 
     [new THREE.Face3(3, 2, 1), new THREE.Face3(3, 1, 0), new THREE.Face3(4, 5, 6), new THREE.Face3(4, 6, 7), new THREE.Face3(0, 1, 5), new THREE.Face3(0, 5, 4), 
     new THREE.Face3(1, 2, 6), new THREE.Face3(1, 6, 5), new THREE.Face3(2, 3, 7), new THREE.Face3(2, 7, 6), new THREE.Face3(3, 0, 4), new THREE.Face3(3, 4, 7)]; 
     geometry0.computeFaceNormals(); 
     geometry0.computeVertexNormals(); 
     var material0 = new THREE.MeshBasicMaterial({ color: 0xD1740A, transparent: true, opacity: 0.5 }); 
     mesh0 = new THREE.Mesh(geometry0, material0); 
     scene.add(mesh0); 
     egh0 = new THREE.EdgesHelper(mesh0, 0x000); 
     egh0.material.linewidth = 2; 
     scene.add(egh0); 

    } 

    function render() 
    { 
     renderer.clear(); 
     renderer.render(scene, camera); 
    } 

    function test() 
    { 
     init(); 
     render(); 
    } 
</script> 

</body> 

</html>

источник

2015-03-20 Giuseppe Matrizzi

Просто позиция вашей камеры не установлена должным образом, поэтому она смотрит в другое место. В настоящее время позиция вашего объекта равна (0,0,0), поэтому вы должны смотреть в правильном направлении, и вы увидите свой объект.

Вы должны смотреть на где-то вроде:

camera.position.set(0,0,10);

Кроме того, для создания анимации вам нужно добавить следующий код в конце функции визуализации. Но если у вас нет анимации, ее можно игнорировать:

requestAnimationFrame(render);

источник

2015-03-20 17:34:29

Как я могу проверить, что такое позиция моего объекта? –

@GiuseppeMatrizzi по умолчанию (0,0,0) ... вы можете установить его, используя: mesh0.position.set (x, y, z) –

Threejs основной вопрос оказания

ответ

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