叉口裁剪球体案例

二话不说先上效果图:



全部代码带注释

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>clipIntersection</title>

  <style>

  body {

    margin: 0;

    background: #000;

    overflow: hidden;

  }

  </style>

</head>

<body>

  <script src="../three.js-master/build/three.js"></script>

  <script src="../libs/OrbitControls.js"></script>

  <script>

  var camera, scene, renderer;

  // 定义参数，后面定义材质的时候会用到

  var params = {

    clipIntersection: true

  };

  // 定义裁剪的切面，后面定义材质的时候会用到

  var clipPlanes = [

    new THREE.Plane(new THREE.Vector3(1, 0, 0), 0),

    new THREE.Plane(new THREE.Vector3(0, -1, 0), 0),

    new THREE.Plane(new THREE.Vector3(0, 0, -1), 0)

  ];

  init()

  render()

  function init() {

    // 定义WebGL渲染器，并且开启抗锯齿

    renderer = new THREE.WebGLRenderer({ antialias: true })

    // 设置设备像素比，通常用于HiDPI（一种高清渲染方式）设备防止模糊输出canvas

    renderer.setPixelRatio(window.devicePixelRatio)

    // 返回一个包含渲染器输出canvas宽高的对象，以像素为单位

    renderer.setSize(window.innerWidth, window.innerHeight)

    // 定义渲染器是否考虑对象级别的裁剪平面

    renderer.localClippingEnabled = true

    // 将输出的canvas添加到body中

    document.body.appendChild(renderer.domElement)

    // 定义场景和相机并且设置相机的位置

    scene = new THREE.Scene()

    camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 0.1, 1000)

    camera.position.set(-20, 30, 40)

    // 设置鼠标点击拖拽之后旋转和滚动滚轮放大缩小

    var controls = new THREE.OrbitControls(camera, renderer.domElement)

    controls.addEventListener('change', render); // use only if there is no animation loop

    controls.minDistance = 10;

    controls.maxDistance = 100;

    controls.enablePan = false;

    // 定义半球光，参数为天空颜色，地面颜色，光的强度

    var light = new THREE.HemisphereLight(0xffffff, 0x080808, 1)

    scene.add(light)

    // 添加环境光

    scene.add(new THREE.AmbientLight(0x505050))

    // 这与Object3d几乎是一样的，其目的是使用语法上更清晰的对象组进行工作

    var group = new THREE.Group()

    for (var i = 1; i < 25; i++) {

      // 创建球体的缓存几何模型，参数为半径，水平分割面数量，垂直分割面数量

      var geometry = new THREE.SphereBufferGeometry(i / 2, 48, 24);

      // 定义兰伯特网口材料，一种非发光材质

      var material = new THREE.MeshLambertMaterial({

        // 线条的十六进制颜色

        color: new THREE.Color(Math.sin(i * 0.5) * 0.5 + 0.5, Math.cos(i * 1.5) * 0.5 + 0.5, Math.sin(i * 4.5 + 0) * 0.5 + 0.5),

        // 定义表面两侧的哪一个将呈现，默认是前面

        side: THREE.DoubleSide,

        // 用户在全局使用THREE.Plane对象定义的裁剪平面，这些平面应用于该材料所附的对象。

        // 空间中与平面点积为负的点将被裁剪掉。缺省为空 []。

        clippingPlanes: clipPlanes,

        // 改变剪切平面的行为，以便只裁剪他们的交集，而不是剪接

        clipIntersection: params.clipIntersection

      })

      // 三角形布成的网格图形的基类

      group.add(new THREE.Mesh(geometry, material))

    }

    scene.add(group)

    window.addEventListener('resize', onWindowResize, false);

  }

  function onWindowResize() {

    // 设置相机视锥体宽高比

    camera.aspect = window.innerWidth / window.innerHeight;

    // 更新相机投影矩阵

    camera.updateProjectionMatrix();

    // 设置渲染器宽高

    renderer.setSize(window.innerWidth, window.innerHeight);

    render();

  }

  function render() {

    renderer.render(scene, camera);

  }

  </script>

</body>

</html>

代码知识点详解

  1. THREE.Plane

    • 该方法是定义一个在三维空间中无线伸展的平面，Plane( normal, constant )
    • normal -- (Vector3) 定义平面指向原点的法向量，(1, 0, 0)
    • constant -- (Float) 从原点到平面沿法线方向的负距离，默认0
  2. THREE.Vector3
    • 定义一个三维向量，Vector3( x, y, z )
    • x,y,z分别代表向量的x,y,z的值
  3. THREE.WebGLRenderer
    • WebGL渲染器使用WebGL来绘制您的场景，如果您的设备支持的话。使用WebGL将能够利用GPU硬件加速从而提高渲染性能。这个渲染器比 Canvas渲染器(CanvasRenderer) 有更好的性能。
    • WebGLRenderer( parameters )，parameters可以不写，parameters参数介绍：
      • canvas：将要渲染到的canvas对象，如果没有定义将会新创建一个canvas
      • context：所需要的渲染上下文对象
      • precision：着色器的精度，有"highp","mediump","lowp",如果设备支持的话默认为"highp"
      • alpha：这个canvas是否包含alpha（透明度）缓冲区，默认为false
      • premultipliedAlpha：渲染器是否会假设颜色具有预乘透明度
      • antialias：是否抗锯齿，默认为false
      • stencil：绘制缓冲区是否有一个最少8位的模板缓冲区，默认为true
      • preserveDrawingBuffer：是否保留缓冲区，知道手动清除或者覆盖，默认为false
      • depth：绘图缓冲区是否具有至少16位的深度缓冲区，默认为true
      • logarithmicDepthBuffer：是否使用对数深度缓冲区，如果在一个场景中处理巨大的差异可能需要使用它
    • renderer.setPixelRatio(PixelRatio),设置设备像素比，通常用于HiDPI设备放置模糊输出canvas，最好使用新的three.js文件
    • renderer.setSize(width,height，updateStyle),调整输出canvas尺寸，要考虑设备像素比，并且设置视口以匹配改尺寸，如果设置updateStyle为true则显示添加像素到输出canvas的样式中
    • renderer.localClippingEnabled，定义渲染器是否考虑对象级别的裁剪平面
    • 他还有很多的属性和方法，以后在需要的时候再介绍
  4. THREE.Scene
    • 场景允许你设置哪些对象呗three.js渲染并且渲染在哪里，我们在场景中放置物体，灯光和相机，他有三个属性：

      • fog，一个fog实例，定义了场景中雾状北京类型，默认为null
      • overrideMaterial，如果不为空，它将强制场景中的一切对象都是用该材料进行渲染，默认为null
      • autoUpdate：默认为true，如果设置为true，那么每一帧的渲染都要检查场景和对象是否需要矩阵更新，否则你必须自己来维护场景中的所有矩阵
  5. THREE.PerspectiveCamera
    • 进行远景投影的相机，PerspectiveCamera( fov, aspect, near, far )

      • FOV，相机视锥体垂直角度
      • aspect，相机视锥体宽高比
      • near，相机视锥体近裁剪面
      • far，相机视锥体远裁剪面
    • camera.position.set(x,y,z),定义相机的位置
    • camera.updateProjectionMatrix()，更新相机投影矩阵
  6. THREE.HemisphereLight
    • 位于场景正上方的光源，HemisphereLight( skyColor, groundColor, intensity )

      • skyColor，RGB天空颜色值
      • groundColor，RGB地面颜色值
      • intensity，光的强度
  7. THREE.AmbientLight
    • 定义环境光，AmbientLight( color, intensity ),这种光应用到场景中的所有物体

      • color：RGB颜色
      • intensity：光的强度
  8. THREE.SphereBufferGeometry
    • 球体缓存几何模型，SphereBufferGeometry(radius, widthSegments, heightSegments, phiStart, phiLength, thetaStart, thetaLength)

      • radius，球体半径，默认为50
      • widthSegments，水平分割面的数量，最小为3，默认为8
      • heightSegments，垂直分割面数量，最小为2，默认为6
      • phiStart，水平起始角度，默认为0
      • phiLength，指定水平扫描角度大小，默认为Math.PI*2
      • thetaStart，垂直起始角度，默认为0
      • thetaLength，指定垂直扫描角度大小，默认为Math.PI
  9. THREE.MeshLambertMaterial
    • 兰伯特网口材质，一种非发光材料，无镜面高光，改材料使用非物理的朗博模型来计算反射率，这可以模拟一些表面（如未经处理的木材或者石头），但是不能模拟具有镜面高光的光泽表面（比如上漆的木头）
    • 阴影使用Gouraud阴影模型计算，这将计算每个顶点的阴影（在顶点着色器中），并在多边形的面上插入结果
    • 由于反射率和照明模型的简单性，性能要比其他几个材质更好，代价是图形的准确行要稍差
    • MeshLambertMaterial( parameters )
      • color,线条的十六进制颜色，默认为0xffffff
      • side，定义表面两侧的哪一个将呈现，前面，后面或者双面，默认值是THREE.Frontside，其他可选为THREE.Backside和THREE.Doubleside
      • map，设置纹理贴图，默认为null
      • lightMap，设置光照贴图，默认为null
      • lightMapIntensity，设置光照贴图强度，默认为1
      • aoMap，设置环境遮挡贴图（ao=ambient occlusion），默认为null
      • aoMapIntensity，设置环境遮挡贴图强度，默认为1
      • specularMap，高光贴图，默认为null
      • alphaMap，透明度贴图，默认为null
      • envMap，环境贴图，默认为null
      • combine，如果有环境贴图，如何组合表面颜色的结果，默认为THREE.Multiply，还有THREE.MixOperation, THREE.AddOperation.如果选择了mix，反射率用于在两种颜色之间进行混合
      • reflectivity，设置反射率，默认为1
      • refractionRatio，设置折射率默认值是0.98
      • fog，定义材质是否受全局雾设置的有影响，默认为true
      • shading，定义着色器，默认为THREE.SmoothShading
      • wireframe，渲染模型为线框，默认为false
      • wireframeLinewidth，线框线宽度，默认为1
      • wireframeLinecap，定义线端的外观，默认值是round
      • vertexColors：定义顶点如何着色，默认值是THREE.NoColors
      • skinning：定义材质是否使用皮肤，默认为false
      • morphTargets：定义是否使用变形目标，默认为false
      • morphNormals：定义材质是否使用morphNormals，如果设置为true的话将morphNormals从geometry传递到着色器，默认为false
      • clippingPlanes，用户定义的裁剪平面，指定为世界空间中的THREE.Plane对象。 这些平面应用于该材料所附的对象。空间中与平面点积为负的点将被裁剪掉。缺省为空 []
      • chipIntersection，改变裁剪平面的行为，一边只是裁剪他们的交集而不是剪接
      • 还有其他许多基础材料的属性就不在继续介绍了，会在后续逐渐介绍
  10. THREE.Mesh
    • 网孔对象的基类，Mesh( geometry, material )

      • geometry，一个几何体的实例
      • 一个材质的实例

three.js一个简单demo学些和讲解的更多相关文章

  1. 创建node.js一个简单的应用实例

    在node.exe所在目录下,创建一个叫 server.js 的文件,并写入以下代码: //使用 require 指令来载入 http 模块 var http = require("http ...

  2. angular实现了一个简单demo，angular-weibo-favorites

    前面必须说一段 帮客户做了一个过渡期的项目,唯一的要求就是速度,我只是会点儿基础的php,于是就用tp帮客户做了这个项目.最近和客户架构沟通,后期想把项目重新做一下,就用现在最流行的技术,暂时想的使用 ...

  3. 在cengos中安装zabbix server/agent， 并创建一个简单demo

    添加zabbix更新源 rpm -ivh http://repo.zabbix.com/zabbix/2.4/rhel/6/x86_64/zabbix-release-2.4-1.el6.noarch ...

  4. Log4net - 项目使用的一个简单Demo

    参考页面: http://www.yuanjiaocheng.net/entity/entitytypes.html http://www.yuanjiaocheng.net/entity/entit ...

  5. 关于EF的一个简单Demo

       今天使用EF的时候很奇怪的问题,添加属性后,使用程序包管理器控制台的NuGet命令更新无效,于是做了这个测试,一次性写好,自动更新,看看效果 1.首先建立一个MVC项目 2.我们选择Intern ...

  6. Android中调用C++函数的一个简单Demo

    这里我不想多解释什么,对于什么JNI和NDK的相关内容大家自己去百度或谷歌.我对Android的学习也只是个新手.废话少说直接进入正题. 一.在Eclipse中创建一个Android Applicat ...

  7. 用redis来实现Session保存的一个简单Demo

    现在很多项目都用Redis(RedisSessionStateProvider)来保存Session数据,但是最近遇到一个比较典型的情况,需要把用户数据全部load到redis里面,在加上RedisS ...

  8. Chart.js: 一个简单的 JS Chart Library

    Chart.js 是一个 Open Source 的 JavaScript Chart Library.它一共有 6 中 Chart,全都是 HTML5 based. 底下是 Chart.js 所提供 ...

  9. gin框架初识(先跑一个简单demo) ①

    Gin 是一个 go 写的 web 框架,具有高性能的优点.官方地址:https://github.com/gin-gonic/gin 先跑一个demo(先安装gin框架,具体见官方地址): 1.vs ...

随机推荐

  1. phaser小游戏框架学习中的屏幕适配

    这篇博客主要讲一下上一篇博客的右侧和底部出现的问题.就是页面会有偏移量.说一下这个产生的原因吧. 一开始在构建html页面的时候,习惯性的在页面中加了 <meta name="view ...

  2. CF708B Recover the String 构造

    For each string s consisting of characters '0' and '1' one can define four integers a00, a01, a10 an ...

  3. SpringMVC from 表单标签和 input 表单标签

    刚学习很懵  不知道还有springmvc 自己的表单  于是乎就上网查了一下  这个真的好用多啦 刚学习很懵  不知道还有springmvc 自己的表单  于是乎就上网查了一下  这个真的好用多啦 ...

  4. node.js 服务器

    http-server 是一个简单的零配置命令行HTTP服务器, 基于 nodeJs. 如果你不想重复的写 nodeJs 的 web-server.js, 则可以使用这个. 安装 (全局安装加 -g) ...

  5. freemarker macro 使用

    转载... macro, nested, return语法 <#macro name param1 param2 ... paramN>...<#nested loopvar1, l ...

  6. Oracle外连接与条件的组合

    由于很少使用SQL 92语法,今天写个outer join的时候被搞晕了.参考了一些例子后整理如下.总结,"inter join on"中的条件是对table进行joining的r ...

  7. sshd服务及系统文件传输

    一.sshd 简介 sshd= secure shell 可以通过网络在主机中开机shell的服务 客户端软件 sshd 连接方式: ssh username@ip          ##文本模式的链 ...

  8. bootstrap多选框

    不多说,先上图片 本多选框是用的bootstrap的样式为基础,将弹出框css改造,然后自己写的js得到. 下面为全部页面的代码,需要的可以自己改动js,得到自己需要的效果 <!DOCTYPE ...

  9. 《高性能mysql》笔记

    组合索引和sql中的顺序有关 单列索引和sql中的顺序无关

  10. linux的shell脚本

    一.遇到的问题: 1.在Documents/shell_Document的文件夹下创建第一个脚本. 但是发现在图形化界面不能执行shell脚本.只能到命令行模式下才能执行.感觉太麻烦,我的虚拟机从图形 ...