Threejs的基本渲染问题

Threejs basic rendering issue

本文关键字：问题 Threejs      更新时间：2023-09-26

我做了一个渲染几何体的基本配置，但我注意到只有当我在代码中放入关于控制的这一行时，它才会被渲染：

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>

简单地说，你的相机的位置设置不正确，所以它看起来在其他地方。当前您的对象的位置是（0,0,0），所以您应该朝正确的方向看，您会看到您的对象。

你需要看看这样的地方：

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

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

requestAnimationFrame(render);
相关文章：