Question

我可能遗漏了一些事情来完成这件事。

<html lang="en">
<head>
    <title>three.js webgl - materials - cube reflection [cars]</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
</head>

<body>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r83/three.js"></script>
    <script>

        var controls, camera, scene, renderer;
        var cameraCube, sceneCube;
        var textureCube;
        var cubeMesh;
        var currentLookat, newLookat;

        init();
        animate();

        function init() {
            // CAMERAS
            camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 5000 );
            camera.position.set( 0, 0, 1000 );
            cameraCube = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 5000 );

            currentLookat = new THREE.Vector3( 0, 0, - 1 );
            newLookat = new THREE.Vector3( 0, 0, - 1 );

            // SCENE
            scene = new THREE.Scene();
            sceneCube = new THREE.Scene();

            // Lights
            var ambient = new THREE.AmbientLight( 0xffffff );
            scene.add( ambient );

            var starsGeometry = new THREE.Geometry();

            for ( var i = 0; i < 1000; i ++ ) {

                var star = new THREE.Vector3();
                star.x = THREE.Math.randFloatSpread( 5000 );
                star.y = THREE.Math.randFloatSpread( 5000 );
                star.z = THREE.Math.randFloatSpread( 5000 );

                starsGeometry.vertices.push( star )

            }

            var starsMaterial = new THREE.PointsMaterial( { color: 0x888888 } )

            var starField = new THREE.Points( starsGeometry, starsMaterial );

            scene.add( starField );


            var geometry = new THREE.BoxGeometry(10, 10, 10);
            var material = new THREE.MeshStandardMaterial({ color: 0xff0000 });
            var cube = new THREE.Mesh(geometry, material);

            cube.position.z = 20;
            cube.position.y = 10;

            scene.add( cube );


            renderer = new THREE.WebGLRenderer();
            renderer.autoClear = false;
            renderer.setPixelRatio( window.devicePixelRatio );
            renderer.setSize( window.innerWidth, window.innerHeight );
            renderer.setFaceCulling( THREE.CullFaceNone );
            document.body.appendChild( renderer.domElement );
        }


        function onWindowResize() {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            cameraCube.aspect = window.innerWidth / window.innerHeight;
            cameraCube.updateProjectionMatrix();
            renderer.setSize( window.innerWidth, window.innerHeight );
        }


        function animate() {
            currentLookat.lerp(newLookat, 0.05);
            camera.lookAt(currentLookat);
            // controls.update();
            requestAnimationFrame( animate );
            render();
        }


        function render() {
            var timer = -0.0002 * Date.now();
            cameraCube.rotation.copy( camera.rotation );
            renderer.render( sceneCube, cameraCube );
            renderer.render( scene, camera );
        }


        function onMouseDown( event ) {


            var canvasPosition = renderer.domElement.getBoundingClientRect();

            var mouseX = event.clientX - canvasPosition.left;
            var mouseY = event.clientY - canvasPosition.top;

            var mouseVector = new THREE.Vector3 (
                            2 * (mouseX / window.innerWidth) - 1,
                    1 - 2 * (mouseY / window.innerHeight), 1);

            console.log(mouseVector);
            mouseVector.unproject( camera );
            console.log(mouseVector);
            // console.log(unproject( camera ));
            var dir = mouseVector.sub( camera.position ).normalize();
            var distance = - camera.position.z / dir.z;
            var oldPos = camera.position.clone();
            newLookat = camera.position.clone().add( dir.multiplyScalar( distance ) );

            currentLookat.applyQuaternion( camera.quaternion );

        }

        window.addEventListener( 'mousedown', onMouseDown, false );
    </script>

</body>

想法是单击空间中的某个区域，并根据鼠标坐标将该摄像机（或摄像机外观）旋转到该点，直到示例中正在进行的世界坐标事件。 lerp中的插值因子越小，不准确的旋转就越明显。

我尝试将两个矩阵和向量传递给lerp，但我得到完全相同的行为。没有lerp，它看起来不像问题，尽管很难说。

我需要帮助才能诊断，更不用说修复它了。

与此相关：Tween question但我想删除tween.js，部分取决于我在那里收到的评论。

谢谢！

点击一致旋转而不是拖动

0 个答案: