ZBLOG

请写出完整代码

以下是一个完整的示例代码,实现使用Three.js绘制三维坐标系,并通过鼠标点击多出不同处,然后将这些点连接成线:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Three.js 3D Coordinate System</title>
    <style>
        body { margin: 0; }
    </style>
</head>
<body>
<script src="https://threejs.org/build/three.js"></script>

<script>

    var scene, camera, renderer;
    var points = [];

    init();
    animate();

    function init() {

        scene = new THREE.Scene();

        camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        camera.position.z = 5;

        renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        var axisHelper = new THREE.AxisHelper(2);
        scene.add(axisHelper);

        document.addEventListener('mousedown', onDocumentMouseDown, false);

    }

    function onDocumentMouseDown(event) {
        
        event.preventDefault();

        var mouseVector = new THREE.Vector3(
            (event.clientX / window.innerWidth) * 2 - 1,
            -(event.clientY / window.innerHeight) * 2 + 1,
            0.5
        );
        
        mouseVector.unproject(camera);

        var dir = mouseVector.sub(camera.position).normalize();
        var distance = -camera.position.z / dir.z;
        
        var pos = camera.position.clone().add(dir.multiplyScalar(distance));
        
        createPoint(pos.x, pos.y, pos.z); 
       
       if (points.length >= 2) {
            createLine();
        }
    }

    function createPoint(x, y, z) {

        var geometry = new THREE.SphereGeometry(0.1, 32, 32);
        var material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
        var point = new THREE.Mesh(geometry, material);
        
        point.position.set(x, y, z);
        
        scene.add(point);

        points.push(new THREE.Vector3(x, y, z));

    }

    function createLine() {
        
        var geometry = new THREE.BufferGeometry().setFromPoints(points);
        var material = new THREE.LineBasicMaterial({ color: 0x00ff00 });
        
        var line = new THREE.Line(geometry, material);

        scene.add(line);
    }

    function animate() {
    
    	requestAnimationFrame(animate);
    
    	renderer.render(scene, camera);
    
    }
</script>
</body>
</html>

你可以将以上代码保存为一个HTML文件,然后在浏览器中打开该文件,即可看到绘制的三维坐标系。点击鼠标左键可以添加新的点,并将这些点用线连接起来。


内容由零声教学AI助手提供,问题来源于学员提问

本站部分文章来源于网络,版权归原作者所有,如有侵权请联系站长删除。
转载请注明出处:https://golang.0voice.com/?id=16058

分享:
扫描分享到社交APP
上一篇
下一篇
发表列表
游客 游客
此处应有掌声~
评论列表

还没有评论,快来说点什么吧~

联系我们

在线咨询: 点击这里给我发消息

微信号:3007537140

上班时间: 10:30-22:30

关注我们
x

注册

已经有帐号?