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);

除此之外，出于动画目的，您需要在渲染功能结束时添加以下代码。但如果你没有任何动画，可以忽略它：

requestAnimationFrame(render);

Threejs基本渲染问题

1 个答案: