效果如图点击几何体的其中一个面改变这个面的颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{margin:auto;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div id="webgl"></div>
    <script src="../libs/three.js"></script>
    <script src="../libs/dat.gui.js"></script>
 
    <script>
         function main(){
             //渲染器
             var renderer=new THREE.WebGLRenderer();
             renderer.setSize(window.innerWidth,window.innerHeight);
             renderer.setClearColor(0xffffff);
            
             //相机
             var camera=new THREE.PerspectiveCamera(60,window.innerWidth/window.innerHeight,0.1,1000);
            //场景
             var scene=new THREE.Scene();

    

              var mesh1=new THREE.MeshBasicMaterial({color:0xff0000,side:THREE.DoubleSide})
              var mesh2=new THREE.MeshBasicMaterial({color:0x00ff00,side:THREE.DoubleSide})
              var mesh3=new THREE.MeshBasicMaterial({color:0x0000ff,side:THREE.DoubleSide})
              var mesh=new THREE.MeshFaceMaterial([mesh1,mesh1,mesh2,mesh2,mesh3,mesh3,mesh1,mesh1,mesh2,mesh2,mesh3,mesh3])
           
             var box=new THREE.BoxGeometry(20,20,20)
             //改变的颜色
             var color=[new THREE.Color(0xff0000),new THREE.Color(0xffff33),new THREE.Color(0x00dd00),
             new THREE.Color(0xcc0000),new THREE.Color(0x6600ff),new THREE.Color(0x00cccc),new THREE.Color(0xff00ff),
            new THREE.Color(0x00ffff)]

             function down(event){
                 //世界坐标转屏幕坐标
                 var vector = new THREE.Vector3(( event.clientX / window.innerWidth ) * 2 - 1, -( event.clientY / window.innerHeight ) * 2 + 1, 0.5);
                vector = vector.unproject(camera);
                var raycaster=new THREE.Raycaster(camera.position,vector.sub(camera.position).normalize())
                 var intersects=raycaster.intersectObjects([gemo])
                 //判断是否点击几何体
                 if(intersects.length>0){
                    mesh.materials[intersects[0].face.materialIndex].color.copy(
                        color[Math.floor(Math.random()*color.length)]
                    )
                   
                 }

             }
             document.onmousedown=down
             var gemo=new THREE.Mesh(box,mesh);
             gemo.material=mesh;
             gemo.material.needsUpdate=true;
             scene.add(gemo);

            
             camera.position.set(0,30,40)
             camera.lookAt(scene.position)
    
             var step=0.02;
            
             function render(){
             gemo.rotation.x=step;
             gemo.rotation.y=step
             gemo.rotation.z=step
             step+=0.02
             renderer.render(scene,camera)
             requestAnimationFrame(render)
         }
         requestAnimationFrame(render)

             renderer.render(scene,camera);
             document.getElementById('webgl').appendChild(renderer.domElement);
         }
         window.onload=main;
  
    </script>
</body>
</html>

 

Logo
GitCode 开源社区

旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。

更多推荐

[转载]在Windows环境下安装GNU Radio

转自：在Windows环境下安装GNURadio_恐弱智_新浪博客GNU Radio是用Python开发的，大部分开源的工程能够在Linux环境下运行良好，而Windows下却运行的很勉强，而且安装配置都很复杂。GNU Radio算是个例外了，不光提供了Windows的二进制安装，还有比较详细的说明。我是Python小白，所以折腾了好久才弄好，特意记录下来，免得以后再装还折腾。GNU Radio的

avatar GitCode 开源社区

centOS 8 使用dnf安装Docker

DNF是什么？CentOS 8使用YUM软件包管理器版本v4.0.4。现在，该版本使用DNF(已删除YUM)。DNF是软件包管理器。它会在Linux发行版上安装，执行更新并删除软件包。使用DNF安装Docker跳过具有损坏依赖性的程序包一个有效的解决方案是使您的CentOS 8系统使用以下--nobest命令安装最符合条件的版本：sudo dnf install docker...

avatar GitCode 开源社区

定时同步数据库表(mysql+linux+crontab)

sync.sh里面的参数需要改变，ip/username/password/database/tablesync.sh#!/bin/sh# Please change the IP and password of the data source db.# Then change the table name.filename=/home/nington/db/$(date +%Y-%m

avatar GitCode 开源社区