Question

我想在div中放置一个THREE.WebGLRenderer。为了做一些事情，mouseevents应该工作。到目前为止我发现的是：http://jsfiddle.net/fek9ddg5/1/

我尝试按如下方式实现此代码。我的问题：似乎鼠标击中几何体（控制台显示“命中”），但几何体未显示。我的错是什么？

HTML：

` 测试仪

    <title>Jumbotron Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link href="../bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="../bootstrap-3.3.7-dist/css/portfolio-item.css" rel="stylesheet">
    <style>
        .container-main {
            margin-top: 75px;
        }

        .container-canvas {
            margin: 0 auto;
            width: 200px;
        }

        canvas {
            border: 1px solid #333;
            background-color: #000;
        }
    </style>

</head>
<body>
    <script src="../build/three.js"></script>
    <script src="js/libs/stats.min.js"></script>
    <script src="js/libs/dat.gui.min.js"></script>
    <script src="js/controls/OrbitControls.js"></script>        
    <script src="js/Detector.js"></script>

    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="navbar-inner">
            <div class="container">
                <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="brand" href="#">Project name</a>
                <div class="nav-collapse collapse">
                    <ul class="nav">
                        <li class="active"><a href="#">Home</a></li>
                        <li><a href="#about">About</a></li>
                        <li><a href="#contact">Contact</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="container container-main">
        <div class="container-canvas">
            <canvas id="mycanvas" width="200" height="200">
                This is my fallback content.
            </canvas>
        </div>
    </div>
        <div class="row">

            <div class="col-lg-12">
                <h3 class="page-header">Related Projects</h3>
            </div>

            <div class="col-sm-3 col-xs-6">
                <a href="#">
                    <img class="img-responsive portfolio-item" src="http://placehold.it/500x300" alt="">
                </a>
            </div>

            <div class="col-sm-3 col-xs-6">
                <a href="#">
                    <img class="img-responsive portfolio-item" src="http://placehold.it/500x300" alt="">
                </a>
            </div>

            <div class="col-sm-3 col-xs-6">
                <a href="#">
                    <img class="img-responsive portfolio-item" src="http://placehold.it/500x300" alt="">
                </a>
            </div>

            <div class="col-sm-3 col-xs-6">
                <a href="#">
                    <img class="img-responsive portfolio-item" src="http://placehold.it/500x300" alt="">
                </a>
            </div>

        </div>`

的javascript：

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script>
        var container, camera, scene, renderer, mesh,

            mouse = { x: 0, y: 0 },
            objects = [],

            count = 0,

            CANVAS_WIDTH = 200,
            CANVAS_HEIGHT = 200;

        canvas = document.getElementById( 'mycanvas' );

        renderer = new THREE.WebGLRenderer();
        renderer.domElement = canvas;
        renderer.setSize( CANVAS_WIDTH, CANVAS_HEIGHT );

        scene = new THREE.Scene();

        camera = new THREE.PerspectiveCamera( 50, CANVAS_WIDTH / CANVAS_HEIGHT, 1, 1000 );
        camera.position.y = 150;
        camera.position.z = 2000;
        camera.lookAt( scene.position );

        mesh = new THREE.Mesh( 
            new THREE.BoxGeometry( 200, 200, 200, 1, 1, 1 ), 
            new THREE.MeshBasicMaterial( { color : 0xff0000, wireframe: true } 
        ) );
        scene.add( mesh );
        objects.push( mesh );


        // find intersections
        var vector = new THREE.Vector3();
        var raycaster = new THREE.Raycaster();

        // mouse listener
        document.addEventListener( 'mousedown', function( event ) {

            // For the following method to work correctly, set the canvas position *static*; margin > 0 and padding > 0 are OK
            mouse.x = ( ( event.clientX - renderer.domElement.offsetLeft ) / renderer.domElement.width ) * 2 - 1;
            mouse.y = - ( ( event.clientY - renderer.domElement.offsetTop ) / renderer.domElement.height ) * 2 + 1;

            // For this alternate method, set the canvas position *fixed*; set top > 0, set left > 0; padding must be 0; margin > 0 is OK
            //mouse.x = ( ( event.clientX - container.offsetLeft ) / container.clientWidth ) * 2 - 1;
            //mouse.y = - ( ( event.clientY - container.offsetTop ) / container.clientHeight ) * 2 + 1;

            vector.set( mouse.x, mouse.y, 0.5 );
            vector.unproject( camera );

            raycaster.set( camera.position, vector.sub( camera.position ).normalize() );

            intersects = raycaster.intersectObjects( objects );

            if ( intersects.length > 0 ) {

                console.log("hit");
                console.log(renderer);
            }

        }, false );

        function render() {

            mesh.rotation.y += 0.01;

            renderer.render( scene, camera );

        }

        (function animate() {

            requestAnimationFrame( animate );

            render();

        })();
    </script>

非常感谢你的帮助！

Answer 1

Pls follow the following steps to view your geometry.

1.Try to use div tag instead of canvas.
<div id="mycanvas" width="200" height="200">
  This is my fallback content.
</div>
2.To remove the following code
  renderer.domElement = canvas;
3.Add the following line in your code      
  canvas.appendChild( renderer.domElement );

这是工作小提琴：https://jsfiddle.net/8mszqo83/6/

div中的Three.js

1 个答案: