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

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

requestAnimationFrame(render);

Threejs 基本渲染问题

Threejs basic rendering issue

javascript

three.js