Three.js深度测试（depthTest和depthWrite属性使用）实例

深度测试用来确定在视线方向上的渲染结果，隐藏掉远处的物体，呈现距离观察者更近的物体。深度测试和混合模式（比如透明）可能会有冲突。

three, webgl, depth test

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

// Sizes
var sceneWidth = 400;
var sceneHeight = 400;
var lineLength = 50;
var circleRadius = 32;
var circleDiameter = circleRadius * 2;

// Renderer
var renderer = new THREE.WebGLRenderer({
    antialias: true,
    alpha: true
});
renderer.setSize(sceneWidth, sceneHeight);
document.body.appendChild(renderer.domElement);

// Scene
var scene = new THREE.Scene();

// Camera
var d = 100;
var aspect = sceneWidth / sceneHeight;
var camera = new THREE.OrthographicCamera(-d * aspect,
    d * aspect,
    d, -d,
    1,
    12000
);
camera.position.set(140, 140, 140);
scene.add(camera);

// Controls
var controls = new THREE.OrthographicTrackballControls(
    camera,
    renderer.domElement
);
controls.rotateSpeed = 0.2;
controls.addEventListener('change', function() {
    renderer.render(scene, camera);
});
window.addEventListener('resize', function() {
    controls.handleResize();
});

// Circle texture
var canvasEl = document.createElement('canvas');
var context = canvasEl.getContext('2d');
canvasEl.width = circleDiameter;
canvasEl.height = circleDiameter;
context.fillStyle = 'rgba(255, 255, 255, 0.5)';
context.beginPath();
context.arc(circleRadius, circleRadius, circleRadius, 0, Math.PI * 2);
context.fill();
var circleTexture = new THREE.Texture(canvasEl);
circleTexture.needsUpdate = true;

// Points
var points = new THREE.Points(
    new THREE.Geometry(),
    new THREE.PointsMaterial({
        map: circleTexture,
        size: circleDiameter,
        transparent: true,
        depthTest: false,
    })
);
points.geometry.vertices.push(new THREE.Vector3(0, 0, 0));
points.geometry.vertices.push(new THREE.Vector3(0, lineLength, 0));
points.geometry.vertices.push(new THREE.Vector3(0, lineLength, lineLength));
points.geometry.vertices.push(new THREE.Vector3(0, 0, lineLength));
scene.add(points);

// Lines
var lines = new THREE.Line(
    new THREE.Geometry(),
    new THREE.LineBasicMaterial({
        linewidth: 1.2,
        color: 0xffffff,
        transparent: true,
        opacity: 0.25
    })
);
lines.geometry.vertices.push(new THREE.Vector3(0, 0, 0));
lines.geometry.vertices.push(new THREE.Vector3(0, lineLength, 0));
lines.geometry.vertices.push(new THREE.Vector3(0, lineLength, 0));
lines.geometry.vertices.push(new THREE.Vector3(0, lineLength, lineLength));
lines.geometry.vertices.push(new THREE.Vector3(0, lineLength, lineLength));
lines.geometry.vertices.push(new THREE.Vector3(0, 0, lineLength));
lines.geometry.vertices.push(new THREE.Vector3(0, 0, lineLength));
lines.geometry.vertices.push(new THREE.Vector3(0, 0, 0));
scene.add(lines);

// Cube
var geometry = new THREE.BoxGeometry(lineLength, lineLength, lineLength);
var material = new THREE.MeshBasicMaterial({
    color: 0x0000ff
});
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// Render
function render() {
    window.requestAnimationFrame(render);
    renderer.render(scene, camera);
    controls.update();
}

render();

编译

CSS

HTML

深度测试用来确定在视线方向上的渲染结果，隐藏掉远处的物体，呈现距离观察者更近的物体。深度测试和混合模式（比如透明）可能会有冲突。

three, webgl, depth test

编辑器支持Emmet

快捷键

深度测试用来确定在视线方向上的渲染结果，隐藏掉远处的物体，呈现距离观察者更近的物体。深度测试和混合模式（比如透明）可能会有冲突。

three, webgl, depth test

three.js使用遮罩（mask）和复合（composition）技术实现电影特效：城市龙卷风

使用Physi.js插件（Three.js）实现的物体碰撞检测

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：