个人中心
gpt4 book ai didi

javascript - Threejs基本渲染问题

转载 作者：行者123 更新时间：2023-11-28 07:30:35 25 4
gpt4 key购买 nike

我做了一个基本配置来渲染几何图形，但我注意到只有当我将这行关于控制的代码放入代码中时才会渲染:

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

关于javascript - Threejs基本渲染问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29170396/

25 4 0
文章推荐： javascript srollleft 和滚动条以及固定位置
文章推荐： c++ - std::list 的迭代器中的段错误
文章推荐： c++ - 什么时候应该使用派生类 facet 代替基类 facet？
文章推荐： javascript - Wordpress AJAX 与原始 JavaScript？没有 Jquery
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com