时间戳

首页 > 解决方案 > 如何使用 Three.js 上的 dat gui 更新相机的近平面？

javascript - 如何使用 Three.js 上的 dat gui 更新相机的近平面？

问题描述

我正在尝试更新near相机中的平面值并将其反映在场景中。该camera.near值看起来会更新，但我在浏览器上看不到任何差异。我究竟做错了什么？

<!doctype html>
<html>
<head>
</head>
<body>

</body>

<script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js'></script>
<script src='https://threejs.org/examples/js/controls/OrbitControls.js'></script>
<script src="https://threejs.org/examples/js/libs/dat.gui.min.js"></script>
<script src="https://threejs.org/examples/js/libs/stats.min.js"></script>

<canvas class="webgl"></canvas>
<script type="text/javascript">

    // Canvas
    const canvas = document.querySelector('canvas.webgl')

    // Renderer
    renderer = new THREE.WebGLRenderer({
        canvas: canvas,
        antialias: true,
    });
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
    renderer.shadowMap.enabled = true;

    // set some camera attributes
    var angle = 45,
        near = 0.1,
        far = 10000;
    camera = new THREE.PerspectiveCamera(angle, window.innerWidth / window.innerHeight, near, far);
    camera.position.set(0, 0, 300);

    // scene
    var scene = new THREE.Scene();


    // Controls
    controls = new THREE.OrbitControls(camera, canvas);
    controls.enableDamping = true;

    renderer.setSize(window.innerWidth, window.innerHeight);


    // now create the individual particles
    var particleCount = 2000;
    var positions = new Float32Array(particleCount * 3)
    for (var i = 0; i < particleCount * 3; i++) {
        positions[i] = Math.random() * 500 - 250
    }


    // create the particle variables
    var particlesGeometry = new THREE.BufferGeometry();
    particlesGeometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));

    var particlesMaterial = new THREE.PointsMaterial({
        // color: 0xFF0000,
        size: 10,
    });

    var particles = new THREE.Points(particlesGeometry, particlesMaterial);

    // add it to the scene
    scene.add(particles);

    //Gui
    var gui = new dat.GUI();
    gui.add(camera.position, 'x', -500, 500).step(5);
    gui.add(camera, 'near', 0.1, 5000).step(5);

    // animation loop
    animate();


    function animate() {
        requestAnimationFrame(animate);
        renderer.render(scene, camera);
        // console.log('Near value: ' + camera.near)
    }


</script>
</html>

标签： javascriptthree.js

解决方案

推荐阅读