llltttmmmnnnmmm 2015-04-07 02:24 采纳率: 0%
浏览 2703

在three.js中 画点显示

请问,在three.js zhong 如何定义很多固定的三维的点放在空间中显示,我是小白,谢谢大家

  • 写回答

1条回答 默认 最新

  • 石榴姐bs 2016-06-22 08:40
    关注
                init();
                animate();
    

    function init() {

                 //创建div,将其加入到页面中
        container = document.createElement('div');
        document.body.appendChild(container);
    
        //定义相机
        camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 2000);
        camera.position.z = 10;
    
        // 定义场景  
        scene = new THREE.Scene();
    
        var ambient = new THREE.AmbientLight(0x101030);
        scene.add(ambient);
    
        var directionalLight = new THREE.DirectionalLight(0xffeedd);
        directionalLight.position.set(0, 0, 1);
        scene.add(directionalLight);
    
    
        //定义材质
        var PI2 = Math.PI*2;
        var material = new THREE.SpriteCanvasMaterial({
            color: 0xff0000,
            program: function (context) {
                context.beginPath();
                context.arc(0, 0, 0.1, 0, PI2, true);
                context.fill();
            }
        });
    
                var i = 0;
        for (var ix = 0; ix < count; ix++) {
            particle = particles[i++] = new THREE.Sprite(material);
            particle.position.x= ix;//具体的坐标点
            particle.position.y= ix+1;
            particle.position.z= ix+2;
            scene.add(particle);
        }
                renderer = new THREE.CanvasRenderer();
    //  renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);
        container.appendChild(renderer.domElement);
        document.addEventListener('mousemove', onDocumentMouseMove, false);
    
        //  
        stats = new Stats();
        stats.domElement.style.position = 'absolute';
        stats.domElement.style.top = '0px';
        container.appendChild(stats.domElement);
        window.addEventListener('resize', onWindowResize, false);
    
        animate();
    
    }
    
    
    function onWindowResize() {
        windowHalfX = window.innerWidth / 2;
        windowHalfY = window.innerHeight / 2;
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth, window.innerHeight);
    }
    
    function onDocumentMouseMove(event) {
        mouseX = (event.clientX - windowHalfX) / 2;
        mouseY = (event.clientY - windowHalfY) / 2;
    }
    
    //  
    
    function animate() {
        requestAnimationFrame(animate);
        render();
    }
    
    function render() {
        camera.position.x += (mouseX - camera.position.x) * .5;
        camera.position.y += (-mouseY - camera.position.y) * .5;
        camera.lookAt(scene.position);
        renderer.render(scene, camera);
    }
    
    
    
    评论

报告相同问题?

悬赏问题

  • ¥30 计算机硬件实验报告寻代
  • ¥15 51单片机写代码,要求是图片上的要求,请大家积极参与,设计一个时钟,时间从12:00开始计时,液晶屏第一行显示time,第二行显示时间
  • ¥15 用C语言判断命题逻辑关系
  • ¥15 原子操作+O3编译,程序挂住
  • ¥15 使用STM32F103C6微控制器设计两个从0到F计数的一位数计数器(数字),同时,有一个控制按钮,可以选择哪个计数器工作:需要两个七段显示器和一个按钮。
  • ¥15 在yolo1到yolo11网络模型中,具体有哪些模型可以用作图像分类?
  • ¥15 AD9910输出波形向上偏移,波谷不为0V
  • ¥15 淘宝自动下单XPath自动点击插件无法点击特定<span>元素,如何解决?
  • ¥15 曙光1620-g30服务器安装硬盘后 看不到硬盘
  • ¥15 抖音直播广场scheme