Question

我有一个网页上有三个.js（webgl）图片。该图的类型为.dae，是从Blender导入的。我试图画一个正方形或一个标记，鼠标被点击，但由于某种原因，广场被绘制在不同的位置..我已经阅读了各种博客，但我无法弄清楚我是什么做错了..这是我的代码：

<script src="three.js"></script>
        <script src="ColladaLoader.js"></script>
        <script src="TrackballControls.js"></script>
        <script>
            var dae;
            var camera;
            var renderer; 
            var loader = new THREE.ColladaLoader();             
            loader.options.convertUpAxis = true;
            loader.load( './dataFile.dae', function ( collada ) {
                dae = collada.scene;
                dae.traverse( function ( child ) {
                    if ( child instanceof THREE.SkinnedMesh ) {
                        var animation = new THREE.Animation( child, child.geometry.animation );
                        animation.play();
                    }
                } );

                dae.scale.x = dae.scale.y = dae.scale.z = 1;
                dae.updateMatrix();

                init();
                animate();

            } );

            function init() {
                container = document.getElementById( 'canvas' );
                document.body.appendChild( container );

                camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 5, 1000 );
                camera.position.set( 2, 7, 3 );
                controls = new THREE.TrackballControls( camera );
                controls.rotateSpeed = 1.0;
                controls.zoomSpeed = 1.0;
                controls.panSpeed = 0.8;
                controls.noZoom = false;
                controls.noPan = false;
                controls.staticMoving = false;
                controls.dynamicDampingFactor = 0.3;
                controls.addEventListener( 'change', render );

                scene = new THREE.Scene();
                // Add the COLLADA
                scene.add( dae );

                // Lights
                scene.add( new THREE.AmbientLight( 0xcccccc ) );
                light = new THREE.PointLight(0x000000);
                light.position.set(-100, 100, 100);
                scene.add(light);

                // Renderer
                renderer = new THREE.WebGLRenderer();
                renderer.setPixelRatio( window.devicePixelRatio );
                renderer.setSize( window.innerWidth, window.innerHeight );
                container.appendChild( renderer.domElement );

                // Misc
                document.addEventListener('click', onDocumentMouseClick);
                render();

            }

            function onDocumentMouseClick(event) {
                //event.preventDefault();
                var mouses = { x : 0, y : 0 };
                mouses.x = ( ( event.clientX - renderer.domElement.offsetLeft ) / window.innerWidth ) * 2 - 1;
                mouses.y = - ( ( event.clientY - renderer.domElement.offsetTop ) / window.innerHeight ) * 2 + 1;

                // particle
                var dotGeometry = new THREE.Geometry();
                dotGeometry.vertices.push(new THREE.Vector2( mouses.x, .5, mouses.y));
                var dotMaterial = new THREE.PointCloudMaterial( { color: 0x000000, size: 8, sizeAttenuation: false } );
                var dot = new THREE.PointCloud( dotGeometry, dotMaterial );
                scene.add( dot );

                render();

            }
        </script>

Answer 1

所以我发现了问题..问题是相机位置和平移搞砸了点击位置的位置。

一旦我禁用平移和缩放，一切都完美无缺。

鼠标点击three.js

1 个答案: