three.js自定义模型wireframe样式

customized model wireframe material with texture

three, wireframe

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

camera.position.y = 1;
camera.position.z = 5;

//构建场景代码放在这里

// create a basic write frame cube
var createBasicWireCube = function() {
    return new THREE.Mesh(
        new THREE.BoxGeometry(1, 1, 1),
        new THREE.MeshBasicMaterial({
            color: 0xffffff,
            wireframe: true
        }));
};

// create a canvas texture
var createCanvasTexture = function(draw) {
    var canvas = document.createElement('canvas'),
        ctx = canvas.getContext('2d');
    canvas.width = 16;
    canvas.height = 16;
    draw = draw || function(ctx, canvas) {
        ctx.lineWidth = 1;
        ctx.fillStyle = 'black';
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        ctx.strokeStyle = '#ffffff';
        ctx.strokeRect(0.5, 0.5, canvas.width - 1, canvas.height - 1);
    };
    draw(ctx, canvas);
    var texture = new THREE.Texture(canvas);
    texture.needsUpdate = true;
    return texture;
};

// create a cube with a canvas as a texture
// the material is transparent and rendering is done on
// both sides.
var createCanvasWireCube = function() {
    var texture = createCanvasTexture();
    return new THREE.Mesh(
        new THREE.BoxGeometry(1, 1, 1),
        new THREE.MeshBasicMaterial({
            transparent: true,
            opacity: 0.2,
            map: texture,
            side: THREE.DoubleSide
        }));
};

scene.add(createBasicWireCube());
var cube = createCanvasWireCube();
cube.position.set(3, 0, 0)
scene.add(cube);

var render = function() {
    requestAnimationFrame(render);

//更新场景代码放在这里

renderer.render(scene, camera);
};

render();

编译

CSS

HTML

customized model wireframe material with texture

three, wireframe

编辑器支持Emmet

快捷键

customized model wireframe material with texture

three, wireframe

three.js使用meshdistancematerial来实现模型透明部位不投射阴影

three.js webgpu渲染器加载gltf模型代码示例（Chrome 113版本以上）

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：