Threejs基本渲染问题

Question

我做了一个基本的配置来渲染几何图形，但是我注意到只有在将以下有关控制的代码放入代码中时才会渲染几何图形：

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>

Answer 1

简而言之，您相机的位置设置不正确，因此它看起来在其他地方。 当前，对象的位置在（0,0,0），因此您应该查看正确的方向，然后才能看到对象。

您需要看一下类似的地方：

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

除此之外，出于动画目的，您需要在render函数的末尾添加以下代码。 但是，如果您没有任何动画，可以忽略它：

requestAnimationFrame(render);

Threejs基本渲染问题

问题描述

1 个解决方案

解决方案1
0 已采纳 2015-03-20 17:34:29

Threejs基本渲染问题

问题描述

1 个解决方案

解决方案1 0 已采纳 2015-03-20 17:34:29

解决方案1
0 已采纳 2015-03-20 17:34:29