three.js绘制透明物体示例2：交叉平面

three.js transparent objects rendering issue：//本例用来说明webgl中渲染透明物体的一个问题，图中2个物体都是透明的， //但显然有半面的渲染是有问题的，背后的没有被渲染。 //原因是three.js里面对于透明物体的渲染，是先按镜头远近做了排序，先绘制远处的透明物体， //由于是按object来排序，而不是按triangle来排，那么比如plane1在后面，那么它先渲染，那么plane2在plane1前面的那半面就能被正确绘制，但是plane2在plane1后面的那半面由于深度测试就根本得不到渲染。 //处理方法有2个：1）是设置材料的depthWrite=false 2）是把2个平面按交叉线拆分成4个子平面。

three, transparent

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2746
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

<canvas id="c"></canvas>
<script type="module">
import * as THREE from '//techbrood.com/threejs/build/three.module.js';
import {OrbitControls} from '//techbrood.com/threejs/examples/jsm/controls/OrbitControls.js';

function main() {
  const canvas = document.querySelector('#c');
  const renderer = new THREE.WebGLRenderer({canvas});

const fov = 75;
  const aspect = 2;  // the canvas default
  const near = 0.1;
  const far = 25;
  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
  camera.position.set(0.5, 1, 0.5);

const controls = new OrbitControls(camera, canvas);
  controls.target.set(0, 0, 0);
  controls.update();

const scene = new THREE.Scene();
  scene.background = new THREE.Color('white');

function addLight(x, y, z) {
    const color = 0xFFFFFF;
    const intensity = 1;
    const light = new THREE.DirectionalLight(color, intensity);
    light.position.set(x, y, z);
    scene.add(light);
  }
  addLight(-1,  2,  4);
  addLight( 1, -1, -2);

const planeWidth = 1;
  const planeHeight = 1;
  const geometry = new THREE.PlaneBufferGeometry(planeWidth, planeHeight);

const loader = new THREE.TextureLoader();

function makeInstance(geometry, color, rotY, url) {
    const texture = loader.load(url, render);
    const material = new THREE.MeshPhongMaterial({
      color,
      map: texture,
      opacity: 0.5,
      transparent: true,
      //depthWrite: false, // comment out this line to fix the issue
      side: THREE.DoubleSide,
    });

const mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);

mesh.rotation.y = rotY;
  }

makeInstance(geometry, 'pink', 0, '/uploads/1911/happyface.png');  
  makeInstance(geometry, 'lightblue',  Math.PI * 0.5, '/uploads/1911/hmmmface.png');

function resizeRendererToDisplaySize(renderer) {
    const canvas = renderer.domElement;
    const width = canvas.clientWidth;
    const height = canvas.clientHeight;
    const needResize = canvas.width !== width || canvas.height !== height;
    if (needResize) {
      renderer.setSize(width, height, false);
    }
    return needResize;
  }

let renderRequested = false;

function render() {
    renderRequested = undefined;

if (resizeRendererToDisplaySize(renderer)) {
      const canvas = renderer.domElement;
      camera.aspect = canvas.clientWidth / canvas.clientHeight;
      camera.updateProjectionMatrix();
    }

renderer.render(scene, camera);
  }
  render();

function requestRenderIfNotRequested() {
    if (!renderRequested) {
      renderRequested = true;
      requestAnimationFrame(render);
    }
  }

controls.addEventListener('change', requestRenderIfNotRequested);
  window.addEventListener('resize', requestRenderIfNotRequested);
}

main();

</script>

three, transparent

编辑器支持Emmet

快捷键

three, transparent

关于如何用three.js绘制大量粒子并使其可以交互的教程和示例代码

three.js通过多点控制器来交互绘制多边形物体

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：