Question

我有两个.obj文件的多维数据集.obj文件在浏览器上呈现。我想要做的是当用户点击任何一个立方体或立方体上的任何地方时，会在一个提示框中显示添加注释到多维数据集上的那个地方。如何做到这一点？我是three.js的新手。任何人都可以帮助我吗？

这是我的代码with.obj文件

<!DOCTYPE html>
<html>
<head>

    <title>Mouse Picking</title>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script src="three.js"></script>
    <script src="Detector.js"></script>
    <script src="OrbitControls.js"></script>
    <script src="OBJLoader.js"></script>
    <script src="MTLLoader.js"></script>
	<script src="DragControls.js"></script>
	

    <style>
        body {
            overflow: hidden;
            margin: 0;
            padding: 0;
            background: hsl(0, 0%, 10%);
        }
	</style>

</head>
<body>
	<script>
        if (!Detector.webgl) {
            Detector.addGetWebGLMessage();
        }

        var container;
		var camera, controls, scene, renderer;
        var lighting, ambient, keyLight, fillLight, backLight;
		var BlueCube, RedCube;
		var objects = [];
		
		init();
        animate();
		
		function init() {

            container = document.createElement('div');
            document.body.appendChild(container);

            /* Camera */

            camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000);
            camera.position.x = 5;
			camera.position.y = 3;
			camera.position.z = 7;

            /* Scene */

            scene = new THREE.Scene();
            lighting = true;

            ambient = new THREE.AmbientLight(0xffffff, 2.5);
            scene.add(ambient);

            keyLight = new THREE.DirectionalLight(new THREE.Color('hsl(30, 100%, 75%)'), 1.0);
            keyLight.position.set(-100, 0, 100);

            fillLight = new THREE.DirectionalLight(new THREE.Color('hsl(240, 100%, 75%)'), 0.75);
            fillLight.position.set(100, 0, 100);

            backLight = new THREE.DirectionalLight(0xffffff, 1.0);
            backLight.position.set(100, 0, -100).normalize();
			
		
			
			/* Model */

            var mtlLoader = new THREE.MTLLoader();
            mtlLoader.setBaseUrl('assets/');
            mtlLoader.setPath('assets/');
            mtlLoader.load('mouse_picking.mtl', function (materials) {

            materials.preload();
			
			var objLoader = new THREE.OBJLoader();
            objLoader.setMaterials(materials);
            objLoader.setPath('assets/');
            objLoader.load('mouse_picking.obj', function (object) {
			scene.add( object );
			objects.push( object );
			});
                });
			
			raycaster = new THREE.Raycaster();
				mouse = new THREE.Vector2();

            /* Renderer */

          renderer = new THREE.WebGLRenderer();
            renderer.setPixelRatio(window.devicePixelRatio);
              renderer.setSize(window.innerWidth, window.innerHeight);
            renderer.setClearColor(new THREE.Color("hsl(0, 0%, 10%)"));

            container.appendChild(renderer.domElement);

            /* Controls */

            controls = new THREE.OrbitControls(camera, renderer.domElement);
            controls.enableDamping = true;
            controls.dampingFactor = 0.25;
            controls.enableZoom = false;
			
			

            /* Events */

            window.addEventListener('resize', onWindowResize, false);

        }
		function onWindowResize() {

            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();

            renderer.setSize(window.innerWidth, window.innerHeight);
        }

        function animate() {
			//selected();
            requestAnimationFrame(animate);

            controls.update();
			
            render();

        }

        function render() {
			renderer.render(scene, camera);
        }
		
		
	   </script>
	</body>
</html>

Answer 1

我建议您细分立方体网格的几何体，然后使用光线投射来确定单击的场景部分（特别是网格中的三角形）。然后你可以添加一个精灵对象，它是一个总是面向摄像机的平面，以显示一些文本。

有关更多信息，请查看http://stemkoski.github.io/Three.js/index.html处的示例集 - 它们有点过时，但示例＆＃34;鼠标单击＆＃34;和＆＃34;精灵文字标签＆＃34;可能会帮助你开始。

使用three.js进行注释

1 个答案: